1、一个规范如果要成为候选推荐标准（REC），它需要具备百分之百的可实施性，只有成功通过上万项的测试案例后才能验证这一点。据保守估计，整个规范可能需要进行2万项测试。其次是2022年，这一年要发布计划推荐版。那个时候，至少会有两大浏览器会完全支持HTML 5的所有特性。如果考虑到HTML 5标准的规模，这个日期还是太乐观了。毕竟之前发布的HTML 4.01已经经过十多年都没能实现这一目标。按照此说法，在两大浏览器支持所有的功能之前，HTML 5的规范是没有最终定稿的。如果你真的等十年之后再来学习，就悔之晚矣。2. 目前发展状况首先，各大浏览器都已经积极支持HTML 5的新功能。各大浏览器厂商不仅积
2、极地支持HTML 5规范，而且还参与到HTML 5规范的制定之中。真正重要的一小部分HTML 5新特性已经得到浏览器的支持。所有浏览器对HTML 5的支持情况，都会在一周之内发生变化，因为浏览器制作厂商的创新速度也非常快。其次，目前已经存在很多基于HTML 5的应用了。有些网站明确表示支持HTML 5，并提示用户升级浏览器，很多网络应用也已经为HTML 5的到来做了充分的准备。2012年是HTML 5真正发力的开始，而且对于移动应用优势非常明显。3HTML 5的开发组织HTML 5最初是由WHATWG推动开发的，到了今天，已经有三个重要的组织参与进来。 WHATWG：由来自Apple、Mozi
3、lla、Opera、Google等浏览器厂商的人员组成，成立于2004年。负责开发HTML和Web应用API，并提供了开放式的合作。 W3C：W3C下辖的HTML工作组负责发布HTML 5规范。 IETF：因特网工程任务组下辖的HTTP等负责Internet协议的团队。其中HTML 5定义的一个新功能WebSocket API就依赖于新的WebSocket协议，这个协议正是由IETF开发的。1.1.3 良好的设计理念回顾HTML的发展历程，曾经出现了XHTML规范，但没有得到较好的发展。特别是XHTML 2，对语法解析过于严格，严重地违背了著名的Postel法则：“发送时要保守；接收时要开放”
4、。根据Postel法则，对自己发送出去的东西要严格要求，而对接收的东西则要放松限制。HTML 5的设计理念就遵循了这个法则，同时HTML 5也强调了其兼容性、实用性和互操作性。1. 化繁为简HTML 5为了做到尽可能简化，避免了一些不必要的复杂设计。例如，DOCTYPE的改进：在过去的HTML版本中，第一行的DOCTYPE过于冗长，没有几个人能记得住，在实际的Web开发中也没有什么意义。而在HTML 5中就非常简单：HTML 5改进的方面如下。 简化了DOCTYPE。 简化了字符集声明。 以浏览器的原生能力替代脚本代码的实现。 简单而强大的HTML 5 API。为了让一切变得简单，HTML 5
5、可谓下足了功夫。为了避免造成误解，HTML 5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。2. 向下兼容遵循Postel法则，HTML 5有着很强的兼容能力。在这方面，HTML 5没有颠覆性的革新，允许存在不严谨的写法，例如，一些标签的属性值没有使用引号括起来；标签属性中包含大写字母；有的标签没有闭合等。然而这些不严谨的错误处理方案，在HTML 5的规范中都有着明确的规定，也希望未来在浏览器中有一致的支持。当然对于Web开发者来说，还是严谨一点好。对于HTML 5的一些新特性，如果旧的浏览器不支持，也不会影响页面的显示。在HTML 5的规范中，也考虑了这方面的内容。如在
6、HTML 5中input标签的type属性增加了很多类型，当浏览器不支持这些类型时，默认会将其视为text，实现了优雅的降级。3. 支持合理存在的内容HTML 5的设计者们花费了大量的精力来研究通用的行为。例如，Google分析了上百万的页面，从中提取了DIV标签的ID名称。例如很多人都是这样标记导航区域的：div id=nav /导航区域内容/div既然该行为已经大量存在，HTML 5就会想办法去改进，所以就直接增加了一个nav标签，用于导航区域。4. 解决实用性的问题对于HTML无法实现的一些功能，用户会寻求其他方法来实现，如对于绘图、多媒体、地理位置、实时获取信息等应用，通常会开发一些相
7、应的插件间接地去实现。HTML 5的设计者们研究了这些需求，开发了一系列用于Web应用的接口。HTML 5规范的制定是非常开放的，所有人都可以获取草案的内容，也可以参与进来提出宝贵的意见。因为开放，所以可以得到更加全面的发展。一切以用户需求为最终目的，用户需要什么，它就规范什么。所以，当你在使用HTML 5的新功能时，会发现正是期待已久的东西。5. 最终用户优先这个设计理念本质上是一种解决冲突的机制。在遇到无法解决的冲突的时候，规范会把最终用户的诉求放在第一位。因此，HTML 5的绝大部分功能都是非常实用的。HTML 5规范的制定遵循如下的优先顺序：用户 编写HTML的开发者 浏览器厂商 规范
8、制定者 理论的存粹性可见，用户与开发者的重要性要远远高于规范和理论。例如，有很多用户都需要实现一个新的功能，HTML 5规范设计者们会研究这种需求，并纳入规范；HTML 5规范了一套错误处理机制，以便当Web开发者写了不够严谨的代码时，接纳这种不严谨的做法。所以，当你在使用HTML 5时，会发现它比以前的版本友好多了。6. 通用访问这个原则可以分成如下三个方面。 可访问性：HTML 5考虑了残障用户的需求，以屏幕阅读器为基础的元素也已经被添加到规范当中。 媒体中立：HTML 5规范不仅仅是为某些浏览器而设计的。也许有一天，HTML 5的新功能在不同的设备和平台上都能运行。 支持所有语种：例如，
9、新的元素支持在东亚页面的排版中会用到的Ruby 注释。1.1.4 新增的HTML 5原生功能1新增的原生功能Web应用程序是HTML 5中最大的亮点，它原生地支持了一些只有在桌面应用中才能实现的功能。这些功能主要如下。 Canvas绘图（2D和3D）。 Channel消息传送。 跨文档消息传送。 地理位置。 WebSocket API及其协议。 本地存储。 本地数据库。 Web工作线程。 跨域的异步请求。 离线应用。这些功能都有着独立的规范，并且从属于HTML 5。2. 原生功能的优点在过去，很多功能只能通过安装插件才能够实现。插件的方式会存在很多问题。 插件需要安装，且安装过程可能失败。 插
10、件可能会被屏蔽或禁用。 插件本身存在安全隐患。 插件不容易与HTML文档的其他部分集成。 插件的开发，对开发者的技能要求进一步提高。而HTML 5的原生功能，让这些功能的实现变得简单，不需要安装不安全的插件，而且能与页面中的其他元素无缝集成，安全性也提高了很多。1.1.5 HTML 5带来的好处对于用户和开发者而言，HTML 5的出现意义非常重大。因为它将解决之前Web页面存在的诸多问题。首先，不必考虑各个浏览器的兼容性问题。在HTML 5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的规范。对于用户而言，使用不同的浏览器，常常会看到不同的页面效果
11、，甚至有些功能根本不能使用；Web开发者也伤透脑筋，为了使页面能在多个浏览器中正常使用，不得不写一些hack，徒增了Web开发的复杂度。在HTML 5中，纳入了所有合理的扩展功能。HTML 5规范的内容也非常庞大，各大浏览器厂商关注的是自己的产品能否更好地支持HTML 5。这样，只要是基于HTML 5开发的Web应用，都能够在浏览器中正常显示（不过，现在还不能完全这样做）。其次，可以实现复杂的Web应用。在HTML 5之前，HTML与Web应用程序的关系十分薄弱。与强大的桌面应用程序的功能相比，Web应用程序的功能是微不足道的，并且在很多方面都做了限制。在HTML 5中，不但大大扩展了Web应
12、用的功能，而且安全性也有了明确的规范。各大浏览器也争相封装了这些功能，目前已经可以使用HTML 5开发富Web应用了。1.2 全新的HTML 5下面让我们快速预览一下HTML 5的新功能。1.2.1 从“头”说起这里所说的是HTML文件的开头部分。HTML 5避免了不必要的复杂性，DOCTYPE和字符集都极大地简化了。1. 简化的DOCTYPE声明DOCTYPE声明是HTML文件中必不可少的内容，它位于文件的第一行，声明了HTML文件遵循的规范。声明HTML 4.01版的DOCTYPE代码为：DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01 Transitiona
13、l/ENhttp:/www.w3.org/TR/html4/loose.dtd这么长的一串代码恐怕极少有人能够默写出来，通常都是通过复制/粘贴的方式添加这段代码。而在HTML 5中的DOCTYPE代码则非常简单：现在好记得多了，可以告别复制/粘贴的时代了。同时这种声明，也标志性地让人感觉到这是符合HTML 5规范的页面。如果使用了HTML 5的DOCTYPE声明，则会触发浏览器以标准兼容的模式来显示页面。2. 简化的字符集声明字符集的声明也是非常重要的，它决定了页面文件的编码方式。在过去，都是使用如下的方式来指定字符集的：meta http-equiv=Content-Type content
14、=text/html; charset=utf-8 /HTML 5把它简化成了：meta charset=utf-8在HTML 5中，以上两种方式都可以使用，这是由HTML 5的向下兼容的原则决定的。1.2.2 明确简洁的结构一个非常典型的页面设计中通常会包含头部、页脚、导航、主体内容和侧边内容等区域。Google从上百万的网页中分析了其存在的合理性，例如，头部区域通常使用：header /页眉针对这种情况，HTML 5引入了与文档结构相关联的结构元素，如表1.1所示。表1.1 HTML 5中的结构元素元 素 名 称描 述 说 明header标记头部区域的内容footer标记页脚区域的内容se
15、ctionWeb页面中的一块区域article独立的文章内容区域aside相关侧边内容或者引文区域nav导航类内容区域下面我们就使用这几个新的结构元素来构建一个新型的博客页面，并且使用前面介绍的DOCTYPE和字符集。【示例1-1】 HTML 5页面结构示例。DOCTYPE HTMLhtmlheadtitleHTML 5示例link rel=stylesheet href=Code1-1.css/headbodyheader 清茶博客p喝一杯清茶，约三五知己，聊聊天，叙叙旧./headernavullia href=#首页/li博客相册个人档案/navcontainersectionartic
16、leHTML 5编辑于2012.1.18/articleCSS3对于前端设计师来说，虽然CSS3不全是新的技术，但它却重启了一扇奇思妙想的窗口。编辑于2012.1.19aside简介版权所有 2012/html如示例1-1所示的代码，与HTML 5之前的页面布满div标签相比，已经变得清晰了很多。涉及的各种头部，我们都会将其包含在header标签内，各种结尾内容都会使用footer标签包含，导航菜单放在nav标签内，主要内容放在section标签内，独立的文章部分放在article标签内，相关的简介等内容放在侧边标签aside内。示例1-1中引用了一个CSS文件（Code1-1.css），这里
17、我们不再展示CSS文件内容（我们会提供相应的源代码供读者学习之用）。运行结果如图1-2所示。图1-2 新型的HTML 5页面结构使用这些用于结构布局的元素，在设计样式表的时候，不用再添加标签的id特性作为选择器了，而是直接针对标签进行设计，因为标签已经具有一定的语义。1.2.3 新增的元素上一节介绍了HTML 5中的一些结构化的元素，使得页面布局耳目一新。本节将全面介绍HTML 5中新增的元素。HTML 5新增了很多新的有意义的标签，为了方便记忆，我们对它们进行了分类。1. 结构片段 article：标识独立的主体内容区域，可用于论坛帖子、报纸文章、博客条目、用户评论等。 aside：标识非主
18、体内容区域，该区域中的内容应该与附近的主体内容相关。 section：标识文档的小节或部分。 footer：标识页面的页脚，或内容区块的脚注。 header：标识页面的页首，或内容区块的标头。 nav：标识页面的导航区块。2. 进度信息 meter：根据value属性赋值和最大、最小值的度量进行显示的进度条状条形图。 progress：标识任务进度显示的进度条。3. 交互性元素 command：标识一个命令元素（单选、复选或者按钮）；当且仅当这个元素出现在元素里面时才会被显示，否则将只能作为键盘快捷方式的一个载体。 datalist：标识一个选项组，与input元素配合使用该元素，来定义inp
19、ut可能的值。4. 内嵌应用元素及辅助元素 audio：定义声音，如音乐或其他音频流。 video：定义视频，如电影片段或其他视频流。 source：为媒介元素（如video和audio）定义媒介资源。 track：为诸如video元素之类的媒介规定外部文本轨道。 canvas：定义图形，比如图表和其他图像。该标签只是图形容器，必须使用脚本来绘制图形。 embed：标识来自外部的互动内容或插件。5. 在文档和应用中使用的元素 details：标识描述文档或文档某个部分的细节。 summary：标识元素的标题。 figcaption：标识figure元素的标题。 figure：标识一块独立的流内
20、容（图像、图表、照片、代码等）。 hgroup：标识文档或内容的多个标题。用于将h1h6元素打包，优化页面结构在SEO中的表现。6. ruby标签 ruby：标识ruby注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。 rp：在ruby注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。 rt：标识字符（中文注音或字符）的解释或发音。7. 文本和文本标记元素 bdi：允许设置一段文本，使其脱离其父元素的文本方向设置。 mark：标识需高亮显示的文本。 time：标识日期或时间。 output：标识一个输出的结果。8. 其他 keygen：标识表单密钥生成器元素。当提交表单
21、时，私钥存储在本地，公钥发送到服务器。 wbr：标识单词中适当的换行位置；可以用此标签为一个长单词指定合适的换行 位置。1.2.4 废弃的元素HTML 5也删除了一些元素，主要是以下几个方面的元素。1. 能使用CSS方案替代的元素在HTML 5之前的一些元素中，有一部分是纯粹用作显示效果的元素。而HTML 5延续了内容与表现的分离，对于显示效果更多地交给CSS去完成。所以，在这方面废除的元素有：basefont、big、center、font、s、strike、tt、u。2. 不再支持frame框架由于frame框架对网页可用性存在负面影响，因此在HTML 5中已经不支持frame框架，但支持
22、iframe框架。所以HTML 5删除了frame框架中的frameset、frame、noframes元素。3. 其他被废除的元素其他元素被废除的原因通常都是有了较好的替代方案。 废除的applet元素：可由embed和object元素替代。 废除的bgsound元素：可由audio替代。 废除的marquee元素：可由JavaScript编程方式替代。 废除的rb元素：可由ruby元素替代。 废除的acronym元素：可由abbr元素替代。 废除的dir元素：可由ul元素替代。 废除的isindex元素：可以使用form元素和input元素相结合的方式替代。 废除的listing元素：可由
23、pre元素替代。 废除的xmp元素：可由code元素替代。 废除的nextid元素：可由GUIDS替代。 废除的plaintext元素：可由“text/plain”MIME类型替代。在HTML 5继续完善的过程中，可能还会废除其他不合理的元素。1.2.5 全新的选择器HTML 5极大地增强了选择器的功能。在HTML 5之前，如果要在页面中查找特定元素，只能使用三个函数：getElementById（）、getElementsByName（）、getElementsByTagName（）。1. 根据类名匹配元素（DOM API）HTML 5新增了getElementsByClassName（）函
24、数，是根据类目匹配元素的，返回的是匹配到的数组，无匹配则返回空的数组。var els = document.getElementsByClassName（section）;支持浏览器：IE9、Firefox 3.0+、Safari 3.2+、Chrome 4.0+、Opera 10.1+。2. 根据CSS选择器匹配元素（Selectors API）HTML 5还提供了两个根据CSS选择器匹配元素的函数：querySelector（）和query SelectorAll（）。querySelector（）返回匹配到的第一个元素，如果没有匹配则返回null。var els = document.querySelector（ul li:nth-child（odd）table.test tr td
