HTML5新语义化标签 （一）

一、html5语义化标签优点：

1、能够清楚地让维护人员知道整个html的作用，方便代码维护。
　　2、方便搜索引擎到该网页。
　　3、能够更好的适配屏幕阅读器等，特殊人群对网站有较好的体验。

二、 html新旧区别：

1、html4.0开始出现：div span img h1-h6等
　　2、html5开始出现：header footer main等
　　3、css2.1开始：widht height background等
　　4、css3新增：transform border-radius等

三、语义化标签（语义化标签都是双标签）

header : 页眉
footer : 页脚
main : 主体
注：header footer main 语义化标签在一个页面中只能出现一次。
hgroup : 标题组合
nav : 导航
article : 独立的内容
论坛帖子
报纸文章
博客条目
用户评论
aside : 辅助信息的内容
section : 区域 , 跟div的功能以及语义是一样的
figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分
datalist : 选项列表（跟seclect下拉菜单用处相同）
涉及到的语法：list id value …

<input type="text" list="elems">
<datalist id="elems">
    <option value="a"></option>
    <option value="ab"></option>
    <option value="abc"></option>
    <option value="abcd"></option>
    <option value="apple"></option>
    <option value="around"></option>
</datalist>

details / summary : 文档细节 / 文档标题
相关语法：open属性

<details open>
    <summary>HTML</summary>
    <p>超文本标记语言</p>
</details>

progress / meter : 定义进度条 / 定义度量范围

<progress min="0" max="100" value="50"></progress>
<meter min="0" max="100" value="80" low="30" high="70"></meter>

time : 定义日期或时间

<p>今天是 <time>3月3日</time></p>
<p>今天是 <time title="2月14日">情人节</time></p>

mark : 带有记号的文本

四、音频与视频：

audio ：音频
以下是可能需要添加的控件属性
controls : 显示控件
loop : 循环播放
autoplay : 自动播放 ( 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题,几乎用不上 )
muted : 静音
例子：< audio src=’#’ controls loop muted>
video : 视频
object-fit: cover; 可以让视频覆盖整个父容器。
例子：<video src=’#’ controls loop muted object-fit: cover; >

五：表单控件：

< input type=“值”>，加在type中的属性控件
email : 电子邮件地址输入框
url : 网址输入框
number : 数字输入框
range : 滑动条（min=x;最小值 max=x;最大值value=x;默认值step=x移动步数）
date / month / week : 日期控件
search : 搜索框 ( 跟普通框的区别，会多一个关闭按钮 )
color : 颜色控件
tel : 电话号码输入框 ( 仅在移动端，会调起带数字的软键盘 )
time : 时间控件

六、name和value：

1、name：用于提交数据
2、value：需要提交的数据
　　（后端通过获取表单中的的name，就可以得到value值，这也叫做键值对；）
3、method : 数据传输方式
　　GET （ 默认的，获取的时候网址后面会带有你输入的东西 ）
　　POST （从网址上看不到你提交成功没）
4、enctype : 数据传输类型
　　application/x-www-form-urlencoded 默认传输的是文本
　　multipart/form-data 传输的是文件