HTML5与浏览器兼容性-优快云博客

http://www.cnblogs.com/xiaoshatian/archive/2011/02/14/1954032.html

春节在家读了两本介绍HTML5的书：《HTML5 Up and Running》和《Pro HTML5 Programming》，得益于Kindle的便捷，一边读一边标注了一些内容，随感觉而标记，不成体系，所以称之为“碎片”，记录于此作为存档。

浏览器支持情况检测

Modernizr是一个开源的JavaScript脚本库，可以用它来检查浏览器对HTML5和CSS3的支持情况。

IE是个很有意思的浏览器，它只识别它的DOM字典里存在的标签。如果你的HTML中包含它不认识的标签，只需要用JavaScript创建一下，IE就会把该标签加到它的DOM字典中，那么也就可以识别该标签并为它应用样式了。例如，让IE支持article标签的方法是：

            document.createElement(“article”)
           

根据这个原理，有人写了一段脚本来让老版本的IE支持HTML5标签：

 
            <!--[
            if 
            lt IE 9]> 
           
            <script>
           
            var 
            e = (
            "abbr,article,aside,audio,canvas,datalist,details," 
            + 
            "figure,footer,header,hgroup,mark,menu,meter,nav,output," 
            + 
            "progress,section,time,video"
            ).split(
            ','
            ); 
           
            for 
            (
            var 
            i = 0; i < e.length; i++) 
           
            {
           
            document.createElement(e[i]);
           
            }
           
            </script>
           
            <![endif]—>

或者直接在线引用这段脚本：

 
            <!--[
            if 
            lt IE 9]> 
           
            <script src=
            "http://html5shiv.googlecode.com/svn/trunk/html5.js"
            ></script> 
           
            <![endif]-->

ORIGIN（源）
- HTML5通过引入origin这个概念来明确和细化了域安全性，origin是由scheme（协议）、host（域名）和port（端口）组成的。譬如http://windstyle.cn和https://windstyle.cn是不同的origin，但http://windstyle.cn和http://windstyle.cn/example.html是同一origin。
DOCTYPE
- Web页面有几种不同的渲染模式：
  - Standards mode
  - Almost Standards mode
  - Quirk mode
- DOCTYPE就是用来告诉浏览器应该用哪种模式来渲染页面，符合HTML5标准（Standards mode）的DOCTYPE很简单：
  
  <!DOCTYPE HTML>
- 没有DOCTYPE或者声明了不同的DOCTYPE会导致浏览器以Almost Standards mode或Quirks mode来渲染页面。《HTML5 Up and Running》的作者说，目前至少有5种DOCTYPE ，它们会触发浏览器的almost standards mode和至少73种quirks mode，光IE8就支持4种呈现模式（见下图），于是作者在书中要大喊：“Kill it. Kill it with fire!”。
文档大纲
- 在HTML4中，创建文档大纲的唯一方法是使用<h1>到<h6>这几个标签，为了确保大纲只有一个根节点，页面中就不能多次使用<h1>。而在HTML5中，每个section都可以包含自己的<h1>，这并不会影响大纲结构。
<time>标签
- 用法示例：
  
  < time datetime

HTML5学习碎片