时间:2016年5月15日
在前面两天的基础学习中,尽管大多数东西给了我们一些新奇和体验,但是任何事物任何人都是不完美的出现,没有谁说能够把一件事情做的滴水不漏找不出一点瑕疵和破绽。也许说来,我们只是站在普通的人潮的一个微小存在,除了顺着人潮走我们别无他法,因为我们还没有能够逆着人潮而去的本事,也没有那个勇气,底气不足,再怎么伪装终究还是心虚。
我是一个适应快节奏的人。而且我也是一个自认为学习能力很好的人,但是我的缺点明显的让我有些反感那就是自制力太差。但是怎么办呢?我可以解决,那就是学完了本该学习的其实还可以往后走,我完全可以在没有老师的情况下吸收我自己想要掌握的东西,这些并不是难事。
经过前两天的基础讲解,今天是完结的一天对于HTML5来说。前面我们学过了HTML5最基本的写法,包括所有标签,列表,链接,图像等等,今天我们学习的就是剩下的关键内容知识点。
一、结构标记
![](https://img.haomeiwen.com/i2064995/a0247b7ae22181ba.png)
A、结构标记的概述
1、<div>标签。经常用来设计页面的大致布局,比如说页头,导航栏,主要内容部分和页脚等。在布局复杂的时候会出现大量的<div>标签。如果元素相互形成嵌套的话,页面会难以处理和维护的。在HTML5中提供了专门用于标识常见结构的结构标记,这样就可以很方便的实现页面各个部分的划分,使得文档结构更清晰明确,代码更容易阅读。其结构如下:
![](https://img.haomeiwen.com/i2064995/5b23e706c98f8176.png)
如上述结构那样,便可以很好的区分页面布局。
B、结构标记的种类
1、<header>元素
通常是一些介绍信息,导航信息,站点标题或者logo图片等。它可以在页面上出现很多次,而且可以作为任何部分的头部定义。
2、<nav>元素
定义页面导航链接部分,用于包含标识表示链接的其他元素。
其结构如下:
![](https://img.haomeiwen.com/i2064995/d3a30755d6048adf.png)
3、<section>元素
用于定义文档中的节
表示文档中的一个具体的组成部分,常用于为页面上的内容分块,比如定义章节,页眉,页脚或文档中的其他部分。
4.<footer>元素
用于定义文档中的尾部,常用于文档总结。
5、<aside>元素
一般用于文档的侧边栏。
以上五种元素并不是说写出来就可以排版出文档的样式,它还需要浮动元素。
前面我们学习了表格,今天学习了和它有些类似但是完全是两个概念的知识点。
二、表单
形如网页上出现的选择栏或者说登陆栏又或者是记录信息到服务器上,那么我们就需要通过表单来完成。
表单中也有很多标签来制作不同的效果。它用于显示,收集信息到服务器,它有两个基本部分。a.是实现数据交互的可见的界面元素,比如文本框或按钮,b.提交后的表单处理。
1、界面元素
使用<form>元素创建表单。在这个元素中添加其他表单可以包含控件元素。
此元素有action,method,enctype,name四个属性。
2、表单控件
包含很多不同的类型。表单控件元素是包含在表单元素中具有可视化外观的HTML元素,用于访问者输入信息
其中,表单控件元素有:a,input元素:文本输入控件text,按钮button,单选radio和复选按钮checkbox,选项框option,文件选择框和隐藏控件hidden等
b、textarea元素,select和option元素,还有其他元素。
3、input元素有type(文本框),value(控件数据),name(控件名称),(disabled)禁用控件四个属性。
4、文本框,密码框,单选框,复选框,提交按钮,重置按钮,普通按钮,隐藏域各自的写法如下:
<input type="text"/>
<input type="password"/>
<input type="radio"/>
<input type="checkbox"/>
<input type="submit"/>
<input type="reset"/>
<input type="button"/>
<input type="hidden"/>
5、其他控件
a、<label>主要属性for:表示与该元素相联系的控件的ID值。
作用:将文本域空间练习在一起后,单机文本,效果同单击控件一样。
b、选项框
![](https://img.haomeiwen.com/i2064995/11abe407fd3c6ce9.png)
c、控件分组
![](https://img.haomeiwen.com/i2064995/e7e6820d9d0d58ac.png)
d、浮动框架元素
主要属性有src,height,width
写法如下:
![](https://img.haomeiwen.com/i2064995/e33ffc1748523ad5.png)
e、摘要与细节
![123.png](https://img.haomeiwen.com/i2064995/e34d4dc535a8f908.png?
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
f、度量元素meter和时间元素time
datetime规定日期和时间之间用T文字分割。
总结:在学习完了HTML5的基础之后,由于太多的标签和属性冲刺人的大脑,基本上想要记住这些标签和属性都是不可能的,于是,想要记住这些代码标签和属性的话就只能是熟能生巧,多谢多练,这就跟卖油翁的故事一样,时间久了的话就算油壶的壶嘴再小他也能把有一滴不洒得装进桶里,这不是技巧,而是熟练的结果。所以,在学习知识的同时不但要选回总结还是要学会反思和找到可以让自己熟练掌握知识点的技巧和方法。
网友评论