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 传输的是文件