H5新增功能性标签、与结构性标签

H5

H5是包括HTML、CSS和JavaScript在内的一套技术组合，是HTML最新版本，
2014年10月由万维网联盟（W3C）完成标准制定。
目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，
以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。
H5的8大特性：
语义化、离线&存储、设备访问、通信、多媒体、图形和特效、性能和集成、呈现（CSS3）
1、语义特性
HTML5赋予网页更好的意义和结构，标签更加丰富
2、本地存储特性
HTML5 APP Cache、本地存储功能、IndexedDB、FileAPI
3、设备访问特性
重力感应（陀螺仪）、全球地理定位、麦克风、摄像头
4、连接特性
WebSocket、Server-Sent Events实现双向连接，消息推送
5、网页多媒体特性
支持网页端的Audio、Video等多媒体功能
6、三维、图形及特效特性
打败了Flash，增加了图形增强，SVG，Canvas，WebGL，2D/3D/2.5D游戏和页面视觉特效
7、性能与集成特性
没有用户会永远等待Loading，HTML5增加WebWorker、XMLHttpRequest2
8、呈现
除了DOM接口，HTML5增加了更多样化的应用程序接口

H5网站重构

结构清晰合理的、使用 H5 重构过的网站有很多，要重构 H5 页面，
就是使用 H5 的新标签和相关的新用法，针对原来的用法进行相应的替换。
重点介绍重构网页比较常用的 H5 语义性标签的用法，
以及如何合理正确的使用这些标签来替换之前网页的相应标签。
结构性标签：负责web上下文件结构的定义

nav：菜单导航，链接导

section：章节区域内容

article：文章主体内容（比如一篇博客、一段用户评论等）

footer：尾部区域内容

hearder：头部区域内容
aside：标记、侧栏、摘要、插入引用作为补充主体内容
hgroup[已经弃用]：对网页或区段（section）的标题进行组合

figure：将多个元素组合并展示元素，常和figcaption一起使用

code：表示一段代码块（目前并不兼容主流浏览器）
dialog：聊天的对话，包括dt和dd两个组合元素（dt表示说话者，dd表示说话者说的内容）

新增多媒体标签

<video></video>

兼容处理：添加Flash后备措施（推荐）

<audio></audio>
兼容性处理：
在日常开发中，为了能够兼容各种浏览器对不同媒体类型的支持，可以用多个 元素来提供多个不同的媒体类型。使用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该文件并忽略随后的其它元素。

<embed></embed>

行内语义性标签小结

meter：特定范围内的数值，如工资、硬盘容量、数量、百分比的图像化展示
time：时间值（目前不兼容主流浏览器）
progress：进度条，用max、min、step属性进行控制，
常与JS结合使用完成对进度的表示和监听
cite：创建一个引用标记，用于文档中参考文献的引用说明，
比如书籍或杂志的标题，呈斜体展示
mark：表示页面中需要突出显示的文本，相当于荧光笔在纸上标出文字

progress

进度条，用max、min、step属性进行控制，
常与JS结合使用完成对进度的表示和监听

进度条JS结合使用完成对进度的表示和监听，案例：

cite

创建一个引用标记，用于文档中参考文献的引用说明，
（比如书籍或杂志的标题），呈斜体展示。

 <p>
        有一个未来的目标 ，总能让我们欢欣鼓舞<br/>
        就像飞向火光的灰蛾 甘愿做烈焰的俘虏<br/>
        摆动着的是你不停的脚步 飞旋着的是你美丽的流苏<br/>
    </p>
    <p>-----<cite>引自《嫁给幸福》</cite></p>

mark

主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。
典型应用搜索结果中高亮显示搜素关键字。

details

用于描述文档或文档某个部分的细节 。 
可与 summary 标签配合使用，summary可以为 details 定义标题。
标题是可见的，用户点击标题时，会显示出 details。
summary应该是details的第一个子元素。

。