HTML5 簡介、瀏覽器支持、新元素
什么是 HTML5？
HTML5 是最新的 HTML 標准。
HTML5 是專門為承載豐富的 web 內容而設計的，並且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建。
HTML5 是跨平台的，被設計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。
注釋：在下面的章節中，您將學到如何“幫助”老版本的瀏覽器處理 HTML5。
HTML5 中的新內容？
HTML5 的新的文檔類型（DOCTYPE）聲明非常簡單：
<!DOCTYPE html>
The new character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
HTML5 實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
注釋：HTML5 中默認的字符編碼是 UTF-8。
HTML5 - 新的屬性語法
HTML5 標准允許 4 中不同的屬性語法。
本例演示在 <input> 標簽中使用的不同語法：
| 類型 | 示例 |
|---|---|
| Empty | <input type="text" value="John Doe" disabled> |
| Unquoted | <input type="text" value=John Doe> |
| Double-quoted | <input type="text" value="John Doe"> |
| Single-quoted | <input type="text" value='John Doe'> |
在 HTML5 標准中，根據對屬性的需求，可能會用到所有 4 種語法。
HTML5 - 新特性
HTML5 的一些最有趣的新特性：
- 新的語義元素，比如 <header>, <footer>, <article>, and <section>。
- 新的表單控件，比如數字、日期、時間、日歷和滑塊。
- 強大的圖像支持（借由 <canvas> 和 <svg>）
- 強大的多媒體支持（借由 <video> 和 <audio>）
- 強大的新 API，比如用本地存儲取代 cookie。
HTML5 - 被刪元素
以下 HTML 4.01 元素已從 HTML5 中刪除：
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
HTML5 瀏覽器支持
所有現代瀏覽器都支持 HTML5。
此外，所有瀏覽器，不論新舊，都會自動把未識別元素當做行內元素來處理。
正因如此，您可以幫助老式瀏覽器處理”未知的“ HTML 元素。
注釋：您甚至可以教授石器時代的 IE6 如何處理未知的 HTML 元素。
把 HTML5 元素定義為塊級元素
HTML5 定義了八個新的語義 HTML 元素。所有都是塊級元素。
您可以把 CSS display 屬性設置為 block，以確保老式瀏覽器中正確的行為：
實例
header, section, footer, aside, nav, main, article, figure {
display: block;
}向 HTML 添加新元素
您可以通過瀏覽器 trick 向 HTML 添加任何新元素：
本例向 HTML 添加了一個名為 <myHero> 的新元素，並為其定義 display 樣式：
實例
<!DOCTYPE html>
<html>
<head>
<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>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>已添加的 JavaScript 語句 document.createElement("myHero")，僅適用於 IE。
Internet Explorer 的問題
上述方案可用於所有新的 HTML5 元素，但是：
注意：Internet Explorer 8 以及更早的版本，不允許對未知元素添加樣式。
幸運的是，Sjoerd Visscher 創造了 "HTML5 Enabling JavaScript", "the shiv"：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->The code above is a comment, but early versions of IE9 will read it (and understand it).
完整的 Shiv 解決方案
實例
<!DOCTYPE html>
<html>
<head>
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>My First Article</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>引用 shiv 代碼的鏈接必須位於 <head> 元素中，因為 Internet Explorer 需要在讀取之前認識所有新元素。
HTML5 Skeleton
實例
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>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.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>© 2014 W3Schools. All rights reserved.</p>
</footer>
</body>
</html>
新的語義/結構元素HTML5 提供的新元素可以構建更好的文檔結構：
標簽 描述 <article> 定義文檔內的文章。 <aside> 定義頁面內容之外的內容。 <bdi> 定義與其他文本不同的文本方向。 <details> 定義用戶可查看或隱藏的額外細節。 <dialog> 定義對話框或窗口。 <figcaption> 定義 <figure> 元素的標題。 <figure> 定義自包含內容，比如圖示、圖表、照片、代碼清單等等。 <footer> 定義文檔或節的頁腳。 <header> 定義文檔或節的頁眉。 <main> 定義文檔的主內容。 <mark> 定義重要或強調的內容。 <menuitem> 定義用戶能夠從彈出菜單調用的命令/菜單項目。 <meter> 定義已知范圍（尺度）內的標量測量。 <nav> 定義文檔內的導航鏈接。 <progress> 定義任務進度。 <rp> 定義在不支持 ruby 注釋的瀏覽器中顯示什么。 <rt> 定義關於字符的解釋/發音（用於東亞字體）。 <ruby> 定義 ruby 注釋（用於東亞字體）。 <section> 定義文檔中的節。 <summary> 定義 <details> 元素的可見標題。 <time> 定義日期/時間。 <wbr> 定義可能的折行（line-break）。 閱讀更多有關 HTML5 語義的內容。
新的表單元素
標簽 描述 <datalist> 定義輸入控件的預定義選項。 <keygen> 定義鍵對生成器字段（用於表單）。 <output> 定義計算結果。 閱讀更多有關 HTML 表單元素中新老元素。
新的輸入類型
新的輸入類型 新的輸入屬性 - color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 和 width
- list
- min 和 max
- multiple
- pattern (regexp)
- placeholder
- required
- step
學習 HTML 輸入類型中的所有新老輸入類型。
學習 HTML 輸入屬性中的所有輸入屬性。
HTML5 - 新的屬性語法
HTML5 允許四種不同的屬性語法。
該例演示 <input> 標簽中使用的不同語法：
標簽 描述 Empty <input type="text" value="John Doe" disabled> Unquoted <input type="text" value=John> Double-quoted <input type="text" value="John Doe"> Single-quoted <input type="text" value='John Doe'> 在 HTML5 中，根據屬性所需，可能會使用所有這四種語法。
HTML5 圖像
標簽 描述 <canvas> 定義使用 JavaScript 的圖像繪制。 <svg> 定義使用 SVG 的圖像繪制。 閱讀更多有關 HTML5 Canvas 的內容。
閱讀更多有關 HTML5 SVG 的內容。
新的媒介元素
標簽 描述 <audio> 定義聲音或音樂內容。 <embed> 定義外部應用程序的容器（比如插件）。 <source> 定義 <video> 和 <audio> 的來源。 <track> 定義 <video> 和 <audio> 的軌道。 <video> 定義視頻或影片內容。 閱讀更多有關 HTML5 視頻的內容。
閱讀更多有關 HTML5 音頻的內容。
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。