XZ_HTML5之H5新增标签

H5新增27个标签元素，废弃了16个标签元素，主要包括：结构性标签，级块性标签，行内语义性标签，交互性标签。

1、结构性标签

         负责web上下文结构的定义，确保HTML文档，包括：

• article 文章主题内容（一篇博客、一篇论坛帖子、一段用户评论、插件）
• header 标记头部区域内容
• footer 标记脚部区域内容
• section 区域章节表述
• nav 菜单导航，链接

2、块级性标签

完成web页面区域的划分，确保内容的有效分割，包括：

• aside 注记，贴士，侧栏，摘要，插入的引用作为补充主体的内容
• figure 对多个元素组合并展示的元素，常与figcaption联合使用
• code 表示一段代码块
• dialog 人与人之间对话，包括dt和dd两个组合元素（dt用于表示说话者，dd用于表示说话者的内容）

3、行内语义性标签

完成web页面具体内容的引用和表述，丰富展示内容，包括：

• meter 特定范围内的数值，如工资、数量、百分比
• time 时间值
• progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
• video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
• audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式

例，

<progress value="20" max="100"></progress>

<audio src="source/music.m4a" controls="controls"></audio>

<video src="source/bigBuck.m4v" controls="controls"></video>

4、交互性标签

      功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：

• details  表达一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
• datagrid 控制客户端数据与显示，可用于动态脚本及时更新
• menu 用于交互菜单
• command 用于处理命令按钮

5、HTML标签类型

HTML有N多标签，根据显示的类型，主要可以分为3大类

块级标签

• 独占一行的标签
• 能随时设置宽度和高度（比如，div、p、h1、h2、ul、li）

行内标签（内联标签）

• 多个行内标签能同时显示在一行
• 宽度和高度取决于内容的尺寸（比如span、a、label）

行内-块级标签（内联-块级标签）

• 多个行内-块级标签可以显示在同一行
• 能随时设置宽度和高度（比如input、button）

修改标签的显示类型

CSS中有个display属性，能修改标签的显示类型

none:隐藏标签

/** 隐藏标签 */

div {

display : none ;

}

block:让标签变为块级标签

span {

background-color : palevioletred;

width : 200 px ;

height : 50 px ;

/** 改变标签的类型：行内-->块级标签 */

display : block ;

}

inline:让标签变为行内标签

div {

/** 块级标签-->行内标签 */

display : inline ;

background-color : aquamarine;

width : 200 px ;

height : 80 px ;

}

inline-block:让标签变为行内-块级标签（内联-块级标签）

span {

background-color : palevioletred;

width : 200 px ;

height : 50 px ;

/** 改变标签的类型： 行内—> 行内-块级标签*/  

display : inline-block ;

}