HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  本文将介绍HTML5中新增的语义化标签，及在IE5.5~9（IE9已经开始支持部分HTML5新标签了）支持这些新标签的兼容性处理。

  目录一坨：

  二、语义化标签：article、aside、time、mark、section、header、footer、hgroup、progress、figure、figcaption、nav、meter、output、details、summary、ruby和main

  三、让IE5.5~9支持HTML5新标签

     1. IE5.5~8下对于不支持的标签会遇到以下问题

     2. 解决方案

       2.1. html5-els.js——最简单的解决方案

            IE下的条件编译

       2.2. html5shiv.js——更全面的解决方案

 

二、语义化标签　　　　　　　　　　　　　　　　　　　　　　　　　

  1. article标签

     W3C草案：

The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.W3C specification

     语义化<article>元素：用于表示内容与当前文档或网页关联不大的外部资讯，如杂志、报纸或博客等的外部内容。

  2. aside标签

　　W3C草案：

The aside element represents content that is tangentially related to the content that forms the main textual flow of a document.W3C specification

 语义化<aside>元素：表示与正文内容关系不大的内容。如侧栏内容、注解或页脚等内容。

  3. time标签

    W3C草案：

The time element represents a date and/or time.W3C specification

    语义化<time>元素：表示内容日期/时间，或者通过datetime特性标识出内容关联的日期/时间。datetime特性格式如下：

YYYY-MM-DDThh:mm:ssTZD



日期或时间。下面解释了其中的成分：

YYYY - 年 (例如 2011)

MM - 月 (例如 01 表示 January)

DD - 天 (例如 08)

T - 必需的分隔符，若规定时间的话

hh - 时 (例如 22 表示 10.00pm)

mm - 分 (例如 55)

ss - 秒 (例如 03)

TZD - 时区标识符 (Z 表示祖鲁，也称为格林威治时间)

  4. mark标签

    W3C草案：

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.W3C specification

     语义化<mark>元素：突出与特定主题（上下文）关联的内容。

 5. section标签

    W3C草案：

The section element represents a section of a document, typically with a title or heading.W3C specification

    语义化<section>元素：定义文档中的节（section、区段），一般包含标题或页眉。

 6. header标签

　 W3C草案：

The header element represents the header of a section.W3C specification

　 语义化<header>元素：定义section或document的页眉，包含一些内容介绍等信息。

 7. footer标签

　 W3C草案：

 The footer element represents the footer for the section it applies to.W3C specification

    语义化<footer>元素：定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

 8. hgroup标签

    W3C草案：

The hgroup element represents a group of headings.W3C specification

    语义化<hgroup>元素：对h1-h6标签进行分组。内含一个或多个h1-h6标签。示例：文章主标题和副标题

<section>

  <hgroup>

    <h2>滑板速成秘诀</h2>

    <h3>——从Ollie开始</h3>

  </hgroup>

  <p>

     ....................

  </p>

</section>

  9. progress标签

     W3C草案：

The progress element represents the completion progress of a task.W3C specification

     语义化<progress>元素：表示某项任务的执行进度，通过max特性设置任务完成时的值，通过value特性设置任务当前的执行进度。样式效果为进度条。

  10. figure标签

     W3C草案：

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.W3C specification

 　　语义化<figure>元素：表示一个自包含内容单元（含可选的标题），重点是即使将该内容移除也不会影响文档整体的含义。

  11. figcaption标签

     W3C草案：

The figcaption element represents a caption or legend for a figure.W3C specification

　　语义化<figcaption>元素：表示figure元素的标题，作为figure元素的子元素。

  12. nav标签

　　W3C草案：

The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links.W3C specification

　　语义化<nav>元素：表示导航栏。示例：

<nav>

<a href="index.asp">Home</a>

<a href="html5_meter.asp">Previous</a>

<a href="html5_noscript.asp">Next</a>

</nav>

   13. meter标签

　　W3C草案：

The meter element represents a scalar gauge providing a measurement within a known range, or a fractional value.W3C specification

　　语义化<meter>元素：定义已知范围或分数值内的标量测量，也被称为 gauge（尺度）。如磁盘使用量等，而不是定义任务执行进度，虽然样式上也是进度条的形式。该标签含如下特性：

form    form_id    规定 <meter> 元素所属的一个或多个表单。

high    number    规定被视作高的值的范围。

low    number    规定被视作低的值的范围。

max    number    规定范围的最大值。

min    number    规定范围的最小值。

optimum    number    规定度量的优化值。

value    number    必需。规定度量的当前值。

   14. output标签

　　W3C草案：

The output element represents the result of a calculation.W3C specification

　　语义化<output>元素：定义内容为计算结果，可在form元素提交时向服务端发送其内容。for特性用于设置与计算结果相关的表单元素id，多个id时使用空格分隔。示例：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

   <input type="range" id="a" value="50">100

   +<input type="number" id="b" value="50">

   =<output name="x" for="a b"></output>

</form> 

    15. details标签

　　W3C草案：

The details element represents a control from which the user can obtain additional information or controls on-demand.W3C specification

　　语义化<details>元素：标签用于描述文档或文档某个部分的细节。默认不显示详细信息，通过open特性可修改为显示详细信息。通过点击标题可实现展开/收缩详细信息的效果。结合<summary>元素可自定义标题的内容。

    16. summary标签

　　W3C草案：

The summary element represents a summary, caption, or legend for a details element.W3C specification

　　语义化<summary>元素：作为details标签的概要、标题。

    17. ruby标签

　　W3C草案：

The ruby element allows spans of phrasing content to be marked with ruby annotations.W3C specification

　　语义化<ruby>元素：显示的是东亚字符的发音。需要结合<rt>元素和可选的<rp>元素使用。示例：

 <ruby>漢 <rt>ㄏㄢˋ</rt><rp>(ㄏㄢˋ)</rp></ruby>

     在支持ruby元素的浏览器中效果为，在不支持的浏览器中效果为 漢(ㄏㄢˋ) 。<rt>元素标识注音，仅当浏览器支持时显示；<rp>元素标识当浏览器不支持时显示的内容。

    18. main标签（W3C specification）

　　语义化<main>元素：表示文档的主要内容，一个文档仅能出现一个<main>元素，并且不能作为以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

 

三、让IE5.5~9支持HTML5的新标签　　　　　　　　　　　　　　　　

  1. IE5.5~8下对于不支持的标签会遇到以下问题

     ①. 无法通过元素选择器选择匹配相应的标签并应用样式规则；

     ②. 通过ID、类名等方式匹配相应的标签并应用样式规则，或使用style特性嵌入样式规则，均有效。但效果与正常效果相距甚远；

     ③. 标签的默认样式与W3C草案的不同；

     ④. 对于如<progress>、<meter>、<details>和<canvas>等自带特定UI形式和编程接口API的元素，无法渲染出相同的UI形式和向外提供编程接口API；

     ⑤. 对于如<output>、<keygen>等通过form特性指向所属表单元素的API不给予支持。

     注意：

　　  ①. IE5.5~8下使用document.getElementsByTagName或document.getElementById等方法可获取DOM树中的所有标签元素，即使浏览器不支持这些标签元素（通过Object.prototype.toString.call方法获取不支持的标签元素类型，得到结果为[object HTMLUnknownElement]）

        ②. IE9和其他现代浏览器对于不支持的标签，也可以通过元素选择器匹配相应的标签，同时样式规则的应用也与正常的无异。

 2. 解决方案

   注意，这里的解决方案仅仅只能解决上一小节所罗列问题的①、②和③。

 2.1. html5-el.js——最简单的解决方案
   将下面的JS和CSS放在head元素中且所有样式元素之前。

/*@cc_on'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary subline time video'.replace(/\w+/g,function(n){document.createElement(n)})@*/

/*html5*/

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

       是否觉得这段代码有点奇怪呢？（初看之下会觉得这不是被整段注释掉了吗？）其实这里利用了IE5.5~10中支持的条件编译(Conditional Compile)功能。

       对于C#工程师而言条件编译并不是什么新鲜词，就是通过#define、#if...#endif等关键字来让编译器根据条件编译代码， 常用在代码测试和作为功能特性开关使用。而JS下的条件编译又有何用呢？毕竟现在的JS还是解析型语言（在TypeScript、CoffeeScript、ClojureScript等JS超集上使用还情有可原），微软的解释是：“利用条件编译，可以使用新的 JavaScript 语言功能，同时又保留与不支持这些功能的旧版本之间的兼容性。”，也就是说条件编译实际上就是根据条件执行代码，因此我们可以通过JS语法中的作业控制流（if、while等）实现相同的功能，于是IE下这个特性自然就无人问津了。当想在我们可以利用这一特性来识别当前浏览器是否为IE5.5~10。下面我们看看具体如何使用吧！

       语法格式： /*内容 @*/ 

       关键字： @cc_on 、 @if()...@else...@end 和 @set 

       内置属性： @_jscript_version ——jscript版本号、 @_win32 和 @_win16 ——系统位数

　　 示例：

/*@cc_on @*/

/*@if (@_jscript_version >= 4)

    alert("JavaScript version 4 or better");

    @else @*/

    alert("Conditional compilation not supported by this scripting engine.");

/*@end @*/

      上述内容对于IE11和其他浏览器而言会将条件编译的内容视作多行注释。若打算利用条件编译特性来限定代码仅在IE5.5~10下执行，则建议使用如下形式：

/*@cc_on 需要执行的代码@*/

/*@cc_on 

  需要执行的代码

@*/

       现在我们应该理解html5-els.js中代码是什么意思了！当然我们可以通过这句来判断当前的浏览器版本： var isLteIE10 = /*@cc_on!@*/0 

2.2. html5shiv——更全面的解决方案（html5shiv@github）
  2.1.中的解决方案无法解决通过innerHTML属性设置HTML5标签时出现的问题，而html5shiv则完美解决了！示例：

// IE5.5~8下

document.body.innerHTML = '<section>test</section>'

console.log(document.body.innerHTML) //显示test</SECTION>

console.log(document.body.innerHTML.childNodes.length) // 显示2



// IE9+下

console.log(document.body.innerHTML) //显示<section>test</section>

console.log(document.body.innerHTML.childNodes.length) // 显示1

  jQuery1.7开始可增加了对HTML5标签的兼容性处理，而Modernizr也提供相关支持（与html5shiv项目同一批人做出来的哦！）。

 

四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  由于dialog、template、video、canvas等标签内容较多，本文并未对它们继续记录，日后分别学习并记录吧！另外html5shiv的实现也玩味十足，又有必须拜读的冲动了。以后补上源码分析咯！

  尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/4174812.html ^_^肥子John

五、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  http://www.cnblogs.com/yuzhongwusan/archive/2011/11/17/2252208.html

  http://www.daqianduan.com/2831.html