HTML5 知识库
发表文章

HTML5学习碎片

   阅读:729次   评论:0条   更新时间:2011-03-08    
HTML5 IE 浏览器 JavaScript 脚本

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

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

  1. 浏览器支持情况检测
    • 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]-->
  2. ORIGIN（源）
    • HTML5通过引入origin这个概念来明确和细化了域安全性，origin是由scheme（协议）、host（域名）和port（端口）组成的。譬如http://windstyle.cn和https://windstyle.cn是不同的origin，但http://windstyle.cn和http://windstyle.cn/example.html是同一origin。
  3. 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!”。
      ie8-mode
  4. 文档大纲
    • 在HTML4中，创建文档大纲的唯一方法是使用<h1>到<h6>这几个标签，为了确保大纲只有一个根节点，页面中就不能多次使用<h1>。而在HTML5中，每个section都可以包含自己的<h1>，这并不会影响大纲结构。
  5. <time>标签