您當前位置：首頁 > web前端 > htmlcss > HTML5之瀏覽器支持、新元素

HTML5之瀏覽器支持、新元素

來源：程序員人生發布時間：2015-04-21 08:26:15 閱讀次數：5660次

HTML5之閱讀器支持、新元素

現代的閱讀器都支持HTML5。另外，所有閱讀器，包括舊的和最新的，對沒法辨認的元素會作為內聯元素自動處理。正由于如此，你可以 "教會" 閱讀器處理 "未知" 的 HTML 元素。乃至你可以教會 IE6 (Windows XP 2001) 閱讀器處理未知的 HTML 元素（即讓1些較早的閱讀器（不支持HTML5）支持 HTML5）。

1、將 HTML5 元素定義為塊元素

HTML5 定了8個新的HTML 語義（semantic）元素。所有這些元素都是塊級元素。為了能讓舊版本的閱讀器正確顯示這些元素，你可以設置 CSS 的 display 屬性值為 block：

header, section, footer, aside, nav, main, article, figure { display: block; }

2、為 HTML 添加新元素

你可以為 HTML 添加新的元素。該實例向 HTML 添加的新的元素，并為該元素定義樣式，元素名為 <myHero> ：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF⑻"> <title>Creating an HTML Element</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>我的第1個標題</h1> <p>我的第1個段落。</p> <myHero>我的第1個新元素</myHero> </body> </html>

運行結果：

注：JavaScript 語句 document.createElement("myHero") 是為了為 IE 閱讀器添加新的元素。

3、Internet Explorer 閱讀器問題

你可使用以上的方法來為 IE閱讀器添加 HTML5 元素，但是：Internet Explorer 8 及更早 IE 版本的閱讀器不支持以上的方式。榮幸的是， Sjoerd Visscher 創建了 "HTML5 Enabling JavaScript", " shiv":

以上代碼是1個注釋，作用是在 IE 閱讀器的版本小于 IE9 時將讀取 html5.js 文件，并解析它。

注意：國內用戶請使用百度靜態資源庫（Google 資源庫在國內不穩定）：

針對IE閱讀器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6⑻辨認，這些新元素不能作為父節點包裹子元素，并且不能利用CSS樣式。

4、完善的 Shiv 解決方案

<!DOCTYPE html> <html> <head> <meta charset="UTF⑻"> <title>Styling HTML5</title>  </head> <body> <h1>我的第1篇文章</h1> <article> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </article> </body> </html>

運行結果：

注：html5shiv.js 援用代碼必須放在 <head> 元素中，由于 IE 閱讀器在解析 HTML5 新元素時需要先加載該文件。

5、HTML5 新元素

自1999年以后HTML 4.01 已改變了很多,今天，在HTML 4.01中的幾個已被廢棄，這些元素在HTML5中已被刪除或重新定義。

為了更好地處理今天的互聯網利用，HTML5添加了很多新元素及功能，比如: 圖形的繪制，多媒體內容，更好的頁面結構，更好的情勢處理，和幾個api拖放元素，定位，包括網頁利用程序緩存，存儲，網絡工作者等。

6、<canvas> 新元素

標簽	描寫
<canvas>	標簽定義圖形，比如圖表和其他圖象。該標簽基于 JavaScript 的繪圖 API

7、新多媒體元素

標簽	描寫
<audio>	定義音頻內容
<video>	定義視頻（video 或 movie）
<source>	定義多媒體資源 <video> 和 <audio>
<embed>	定義嵌入的內容，比如插件。
<track>	為諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。

8、新表單元素

標簽	描寫
<datalist>	定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen>	規定用于表單的密鑰對生成器字段。
<output>	定義不同類型的輸出，比如腳本的輸出。

9、新的語義和結構元素

HTML5提供了新的元夙來創建更好的頁面結構：

標簽	描寫
<article>	定義頁面的側邊欄內容
<aside>	定義頁面內容以外的內容。
<bdi>	允許您設置1段文本，使其脫離其父元素的文本方向設置。
<command>	定義命令按鈕，比如單選按鈕、復選框或按鈕
<details>	用于描寫文檔或文檔某個部份的細節
<dialog>	定義對話框，比如提示框
<summary>	標簽包括 details 元素的標題
<figure>	規定獨立的流內容（圖象、圖表、照片、代碼等等）。
<figcaption>	定義 <figure> 元素的標題
<footer>	定義 section 或 document 的頁腳。
<header>	定義了文檔的頭部區域
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用于已知最大和最小值的度量。
<nav>	定義運行中的進度（進程）。
<progress>	定義任何類型的任務的進度。
<ruby>	定義 ruby 注釋（中文注音或字符）。
<rt>	定義字符（中文注音或字符）的解釋或發音。
<rp>	在 ruby 注釋中使用，定義不支持 ruby 元素的閱讀器所顯示的內容。
<section>	定義文檔中的節（section、區段）。
<time>	定義日期或時間。
<wbr>	規定在文本中的何處合適添加換行符。