本文深入解析HTML5的八大特性，包括语义化、本地存储、设备访问等，同时详细介绍新增的27个标签，如结构性标签、多媒体标签等，以及废弃的16个标签，帮助开发者掌握HTML5的最新规范。
前言：
- HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖。
- 主要目的为了让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年。
- 本节主要介绍下H5标签改动相关知识点，新增了27个标签，废弃16个标签。
- 按照标签作用大致分类：功能性标签、结构性标签。
知识点科普：
- H5本质：
H5是包括HTML、CSS和JavaScript在内的一套技术组合，是HTML最新版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。 - H5的八大特性：
语义化、离线&存储、设备访问、通信、多媒体、图形和特效、性能和集成、呈现（CSS3）
课程大纲：
（1）H5的8大特性
（2）新增标签—结构性标签
（3）新增标签—多媒体标签
（4）新增标签—行内语义性标签
（5）新增标签—交互性标签
（6）删除的标签
（7）重定义的标签
（8）趋势分析：H5弃用div？
一、H5的8大特性：
- 语义特性：
HTML5赋予网页更好的意义和结构，标签更加丰富 - 本地存储特性：
HTML5 APP Cache、本地存储功能、IndexedDB、FileAPI - 设备访问特性：
重力感应（陀螺仪）、全球地理定位、麦克风、摄像头 - 连接特性：
WebSocket、Server-Sent Events实现双向连接，消息推送 - 网页多媒体特性：
支持网页端的Audio、Video等多媒体功能 - 三维、图形及特效特性：
打败了Flash，增加了图形增强，SVG，Canvas，WebGL，2D/3D/2.5D（王者荣耀）游戏和页面视觉特效 - 性能与集成特性：
没有用户会永远等待Loading，HTML5增加WebWorker、XMLHttpRequest2 - 呈现：
除了DOM接口，HTML5增加了更多样化的应用程序接口
二、新增标签—结构性标签：
结构性标签：负责web上下文件结构的定义
- nav：菜单导航，链接导航
- nav 标签通常用于以下场合：网站导航条、侧边栏导航条、页内导航、前页后页翻页等。
- 但开发推荐，一个页面上最好只用一个 nav 标签，用它来标记最重要的导航条（一般就是网站的导航条）。这样，可以让搜索引擎等快速定位，避免误导。通常配合 ul 或 ol 列表标签一块使用。
- section：章节区域内容
- 章节区域内容，section 语义为“部分”，定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。通常对网站或页面上的内容，进行分开。
- section用于对网站中的内容进行分块。一个 section 元素通常由内容以及标题组成，表示一个内容区块。通俗理解：主要用于定义文档中的分区或节。
- 开发建议：普遍认为这是一个比较鸡肋的属性，本身它的功能和 div 标签类似，同时又和 article 标签的功能类似。建议不要乱用 section 标签。
- article：文章主体内容（比如一篇博客、一段用户评论等）
- 文章主体内容，用于装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示。
- article 元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。
- 通俗理解：特殊独立区块，表示这篇页眉中的核心内容
例（博客中的一篇文章的结构）：
- footer：尾部区域内容
- hearder：头部区域内容
- 网站的头部区域，通常放置网站的标题、副标题、头部广告、网站介绍、网站导航等等。在之前的 XHTML （HTML规范版）或者 HTML4 中，通常写一个 id=“header” 的 div 来实现。但是由于使用频率太高，于是 HTML5 中，新增了一个 header 标签，用于表示头部区域。
- aside：标记、侧栏、摘要、插入引用作为补充主体内容
- hgroup[已经弃用]：对网页或区段（section）的标题进行组合
- figure：将多个元素组合并展示元素，常和figcaption一起使用
- code：表示一段代码块（目前并不兼容主流浏览器）
10.dialog：聊天的对话，包括dt和dd两个组合元素（dt表示说话者，dd表示说话者说的内容） ，目前只有Chrome和Safari6支持diglog标签。
H5之前，有意义的结构标签就是div，H5扩展了以上常用结构性标签。
结构性标签注意：
1、不要滥用结构标签
2、< header >、< section >、< aside >、< article >、< footer >这些标签不要嵌套自身
3、标签使用级别优先级：< header > < section > < foote r> 优于 < aside > < article >< hgroup > 优于 < div >
三、新增标签—多媒体标签：
1. video：用来播放视频，支持缓存和预加载而且支持多种视频媒体格式 。
- 视频标签，支持缓存和预加载而且支持多种视频媒体格式。主要用于定义音频，像电影片段或其他视频流而不用再使用第三方插件。现在主要支持 Ogg 和 MPEG 两种视屏格式。
- 缘由：flash格式视频在手机上播放，需要手机安装flash播放插件，而且flash视频绝对无法在苹果手机上播放，因为苹果对flash的不支持，导致现在flash前景堪忧。当然目前已经有些插件可以支持苹果手机播放flash视频。至此，html5的video标签出现了。
< video >< /video >属性值列表：
开发建议：如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。
prsload：规定是否预加载视频，如果使用“autoplay”，则忽略该属性：
兼容：现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。
我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案： 使用多种视频格式、添加Flash后备措施（推荐）、优先使用Flash，H5作为后备措施。
兼容处理①：使用多种视频格式：
• < video >和< audio >元素有个内置的格式后备系统。
• 实际开发里不推荐使用src属性，而是在其内部嵌套一组元素，浏览器会选择播放第一个它所支持的文件。 我们在里面可以添加WebM格式的视频提供对Opera的支持。
• 重点：使用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该文件并忽略随后的其它元素。
• 语法对比：
兼容处理②：添加Flash后备措施（推荐）：
• 方法①不太推荐，因为Opera浏览器只占不到1%的市场份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种不支持元素的老浏览器。
• 使用Flowplayer Flash作为备用播放器，简单了解即可，下载链接：点击下载
兼容处理③：优先使用Flash，而H5作为后备措施：
这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户
audio：用来播放音频，支持缓存和预加载而且支持多种视频媒体格式
用来播放音频，支持缓存和预加载而且支持多种视频媒体格式，注意浏览器不稳定性，有时属性无效
- 兼容性处理：
在日常开发中，为了能够兼容各种浏览器对不同媒体类型的支持，可以用多个 元素来提供多个不同的媒体类型。使用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该文件并忽略随后的其它元素。 - < embed >标签： 定义嵌入的内容，比如插件，嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
案例：插件，在网页上插入flash动画
视频video与音频audio标签除了上述常用属性外，还包含其他API，例如当前的视屏源currentSrc、playbackRate快放慢放、load()、play()、pause() 等等控制着视频的加载，播放和暂停。
四、新增标签—行内语义性标签：
行内语义性标签：完成web页面具体内容的引用和表述，丰富展示的内容
- meter：加粗样式，特定范围内的数值，如工资、硬盘容量、数量、百分比的图像化展示
特定范围内的数值，如工资、硬盘容量、数量、百分比的图像化展示，max表示最大值，min表示最小值，value代表当前值。
<meter max="100" min="0" value="60" style="width: 300px;">该浏览器不支持meter</meter>
如果浏览器不支持则显示“”“该浏览器不支持meter”
- time：时间值（目前不兼容主流浏览器）
- time标签用来标记文章发布时间，可以让机器、搜索引擎等获取这篇文章是什么时间发表的（目前不兼容主流浏览器）
- 注意：因为该标签是一个语义标签，在浏览器上查看时没有特别的效果，基本与没有设置标签的效果相同。
- progress：进度条，用max、min、step属性进行控制，常与JS结合使用完成对进度的表示和监听 。
进度条JS结合使用完成对进度的表示和监听，案例：
<div>
<input type="button" name="inputbtn" id="inputbtn" value="上传" />
<span id="pro"></span>
<progress id="profile" min="0" max="100" value=""></progress>
</div>
<script type="text/javascript">
var profile = document.querySelector("#profile");
var inputbtn = document.querySelector("#inputbtn");
var pro = document.querySelector("#pro");
var num = 0;
var timer = null;
inputbtn.addEventListener("click",function(){
timer = setInterval(function(){
num++;
profile.value = num;
if(num>=profile.max){
clearInterval(timer);
pro.innerHTML = "上传完成";
}else{
pro.innerHTML = "正在上传" + num + "%";
}
},100)
})
</script>
- cite：创建一个引用标记，用于文档中参考文献的引用说明，比如书籍或杂志的标题，呈斜体展示
- mark：表示页面中需要突出显示的文本，相当于荧光笔在纸上标出文字
五、新增标签—交互性标签：
交互性标签：功能性内容的表达，有一定的内容和数据关系，是各种事件的基础
- details：表示一段具体的内容，默认不显示。标题是可见的，用户点击标题时，就会显示出details。
用于描述文档或文档某个部分的细节 。
可与 summary 标签配合使用，summary可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。summary应该是details的第一个子元素。
兼容：
案例：
<details>
<summary>二狗个人信息</summary>
<p>
姓名：<input type="text" name="userName" value="二狗" />
</p>
<p>
性别：
<label for="">男<input type="checkbox" name="nan" /></label>
<label for="">女<input type="checkbox" name="woman" /></label>
</p>
</details>
2. canvas：使用JS代码做内容进行图像2D、2.5D、3D绘制，也可以制作游戏；
- 画布标签，定义图形，比如图表和其他图像。 元素只是图形容器（画布），必须使用脚本来绘制图形。
- 应用场景：3D图形绘制、游戏制作、刮刮乐、绘图板、其他场景特效等。篇幅问题，之后课程介绍。
- three.js------WebGL
- datagrid：表示可选数据的列表，通常用于显示树列表
表示可选数据的列表，通常用于显示树列表，开发中不使用，常见于框架封装好的组件。
- menu：显示菜单列表，通常用于列出表单控件
- command：表示命令按钮，如单选按钮、复选按钮或普通按钮
注意：datagrid、menu、command，以上三个h5新增标签主流浏览器均不支持
六、H5删除的标签：
- 纯表现元素（删除后利于表现与结构分离）
Basefont、big、center、font、s、strike、tt、u
- 可能有负面影响的标签
frame、frameset（使用该标签时会将body标签去掉，破坏原始结构，并且将网页拆分，不利于搜索）、noframes
- 产生混淆的元素
acronym、applet、isindex、dir
因为HTML5向后兼容，所以上述标签还是可以使用，但是最好不要用
XHTML-HTML区别
七、H5重新定义的标签：
八、开发建议：
最后要明确一点：HTML5并没有抛弃div
缘由：
有人认为， HTML5 中新增的那么多语义性的标签，随便一个都比 div 更有语义性。那么我就不用 div 了，全部给成 HTML5 新增的标签。这是大错特错的。W3C 并没有规定 HTML5 废除了 div 标签。实际上 div 标签，仍然用于全局的布局。在你无法非常有把握使用什么 HTML5 标签的时候，还是推荐使用 div 标签！
扫一扫
2149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
