一、前言
本文將介紹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新標簽
二、語義化標簽
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>元素：用于表示內容與當前文檔或網頁關聯不大的外部資訊，如雜志、報紙或博客等的外部內容。
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>元素：表示與正文內容關系不大的內容。如側欄內容、注解或頁腳等內容。
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 表示祖魯，也稱為格林威治時間)
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>元素：突出與特定主題（上下文）關聯的內容。
W3C草案：
The section element represents a section of a document, typically with a title or heading.W3C specification
語義化<section>元素：定義文檔中的節（section、區段），一般包含標題或頁眉。
W3C草案：
The header element represents the header of a section.W3C specification
語義化<header>元素：定義section或document的頁眉，包含一些內容介紹等信息。
W3C草案：
The footer element represents the footer for the section it applies to.W3C specification
語義化<footer>元素：定義 section 或 document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯系信息。
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>
W3C草案：
The progress element represents the completion progress of a task.W3C specification
語義化<progress>元素：表示某項任務的執行進度，通過max特性設置任務完成時的值，通過value特性設置任務當前的執行進度。樣式效果為進度條。
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>元素：表示一個自包含內容單元（含可選的標題），重點是即使將該內容移除也不會影響文檔整體的含義。
W3C草案：
The figcaption element represents a caption or legend for a figure.W3C specification
語義化<figcaption>元素：表示figure元素的標題，作為figure元素的子元素。
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>
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 必需。規定度量的當前值。
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>
W3C草案：
The details element represents a control from which the user can obtain additional information or controls on-demand.W3C specification
語義化<details>元素：標簽用于描述文檔或文檔某個部分的細節。默認不顯示詳細信息，通過open特性可修改為顯示詳細信息。通過點擊標題可實現展開/收縮詳細信息的效果。結合<summary>元素可自定義標題的內容。
W3C草案：
The summary element represents a summary, caption, or legend for a details element.W3C specification
語義化<summary>元素：作為details標簽的概要、標題。
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的新標簽
①. 無法通過元素選擇器選擇匹配相應的標簽并應用樣式規則；
②. 通過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.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
 |
不含病毒。www.avast.com |
留言列表
