HTML5概述
- 对于我们要讨论的HTML5功能，不管现在支持情况如何，不久的将来肯定会变，因为HTML5发展的速度非常快。不用担心，我们会推荐一些非常好的在线资源，用以查看当前（以及将来）浏览器的支持情况。www.caniuse.com网站按照浏览器的版本提供了详尽的HTML5功能支持情况。若用户通过浏览器访问www.html5test.com的话，该网站会直接显示用户浏览器对HTML5规范的支持情况。此外，我们重点不是讨论使用某种模拟或者变通的方法让HTML5程序能够运行在旧浏览器上，而是着重关注HTML5规范本身，以及它的使用方法。也就是说，我们针对所讨论的每个API都会提供一些示例代码，开发人员可以直接拿来检测其可用性。因为检测用户代理的方式经常不可靠，所以我们使用特性检测。当然，还可以使用Modernizr —— 一个JavaScript库，它提供了非常先进的HTML5和CSS3检测功能。我们强烈推荐使用Modernizr，因为它是检测浏览器是否支持某些特性的***工具。这里有详细介绍：Modernizr教程。下面是我用Modernizr检测firefox10版的结果：
- 跟DOCTYPE一样，字符集的声明也被简化了。过去是这样的：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
现在成了：
<meta charset="utf-8">
- 除了语义化元素外，HTML5还引入了一种用于查找页面DOM元素的快捷方式。表1-3列出了在HTML5出现之前，用来在页面中查找特定元素的函数。querySelector():根据指定的选择规则，返回在页面中找到的第一个匹配元素；querySelectorAll()：根据指定规则返回页面中所有相匹配的元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Query Selector Demo</title> 6 <style type="text/css"> 7 td { 8 border-style: solid; 9 border-width: 1px; 10 font-size: 300%; 11 } 12 td:hover { 13 background-color: cyan; 14 } 15 #hoverResult { 16 color: green; 17 font-size: 200%; 18 } 19 </style> 20 </head> 21 <body> 22 <section> 23 <!-- create a table with a 3 by 3 cell display --> 24 <table> 25 <tr><td>A1</td> <td>A2</td> <td>A3</td> 26 </tr> 27 <tr> 28 <td>B1</td> <td>B2</td> <td>B3</td> 29 </tr> 30 <tr> 31 <td>C1</td> <td>C2</td> <td>C3</td> 32 </tr> 33 </table> 34 <div>Focus the button, hover over the table cells, and hit Enter to identify them 35 using querySelector('td:hover').</div> 36 <button type="button" id="findHover" autofocus>Find 'td:hover' target</button> 37 <div id="hoverResult"></div> 38 <script type="text/javascript"> 39 document.getElementById("findHover").onclick = function() { 40 // 找到鼠标当前悬停的单元格 41 var hovered = document.querySelector("td:hover"); 42 if (hovered) 43 document.getElementById("hoverResult").innerHTML = hovered.innerHTML; 44 } 45 </script> 46 </section> 47 </body> 48 </html>对于希望优化DOM操作方式的Web开发人员来说，建议使用新的Selectors API以便快速查询应用架构。
- console.log API已经成为JavaScript开发人员记录日志的事实标准。为了便于开发人员查看记录到控制台的信息，很多浏览器提供了分栏窗格的视图。console.log API要比alert()好用很多，因为它不会阻塞脚本的执行。
- window.JSON。JSON是一种相对来说比较新并且正在日益流行的数据交换格式。作为JavsScript语法的一个子集，它将数据表示为对象字面量。由于其语法简单和在JavaScript编程中与生俱来的兼容性，JSON变成了HTML5应用内部数据交换的事实标准。典型的JSON API包含两个函数，parse()和stringify()（分别用于将字符串序列化成DOM对象和将DOM对象转换成字符串）。所有新的浏览器都支持window.JSON，将来JSON必将大量应用于HTML5应用中。
- DOM Level 3。事件处理是目前Web应用开发中最令人头疼的部分之一。除了IE以外，绝大多数浏览器都支持处理事件和元素的标准API。早期IE实现的是与最终标准不同的事件模型，而IE9将会支持DOM Level 2和DOM Level 3的特性。如此，在所有支持HTML5的浏览器中，我们终于可以使用相同的代码来实现DOM操作和事件处理了，包括非常重要的addEventListener()和dispatchEvent()方法。
- HTML5时代的四个新设计准则：兼容性、实用性、互通性和通用访问性。
参考文献：HTML5高级程序设计-HTML概述
总结
- 上一篇： HTML标签的自定义元素
- 下一篇： html5 form-Validity验