HTML5 簡介
HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。
HTML5的設計目的是為了在移動設備上支持多媒體。
HTML5 簡單易學。
什么是 HTML5?
HTML5 是下一代 HTML 標準。
HTML , HTML 4.01的上一個版本誕生于 1999 年。自從那以后，Web 世界已經經歷了巨變。
HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
HTML5 是如何起步的？
HTML5 是 W3C 與 WHATWG 合作的結果,WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表單和應用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。
HTML5 中的一些有趣的新特性：
- 用于繪畫的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內容元素，比如 article、footer、header、nav、section
- 新的表單控件，比如 calendar、date、time、email、url、search
HTML5 <!DOCTYPE>
<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡單:
<!DOCTYPE html>
最小的HTML5文檔
下面是一個簡單的HTML5文檔：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
注意： 對于中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼。
HTML5 的改進
- 新元素
- 新屬性
- 完全支持 CSS3
- Video 和 Audio
- 2D/3D 制圖
- 本地存儲
- 本地 SQL 數據
- Web 應用
HTML5 多媒體
使用 HTML5 你可以簡單的在網頁中播放 視頻(video)與音頻 (audio) 。
HTML5 應用
使用 HTML5 你可以簡單地開發應用
-本地數據存儲
- 訪問本地文件
- 本地 SQL 數據
- 緩存引用
- Javascript 工作者
- XHTMLHttpRequest 2
HTML5 圖形
使用 HTML5 你可以簡單的繪制圖形:
- 使用 <canvas> 元素。
- 使用內聯 SVG。
- 使用 CSS3 2D 轉換、CSS3 3D 轉換。
HTML5 使用 CSS3
- 新選擇器
- 新屬性
- 動畫
- 2D/3D 轉換
- 圓角
- 陰影效果
- 可下載的字體
語義元素
HTML5 添加了很多語義元素如下所示：
| 標簽 | 描述 |
|---|---|
| <article> | 定義頁面獨立的內容區域。 |
| <aside> | 定義頁面的側邊欄內容。 |
| <bdi> | 允許您設置一段文本，使其脫離其父元素的文本方向設置。 |
| <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> | 規定在文本中的何處適合添加換行符。 |
HTML5 表單
新表單元素, 新屬性，新輸入類型，自動驗證。
已移除元素
以下的 HTML 4.01 元素在HTML5中已經被刪除:
- <acronym>
- <applet>
- <basefont>
- < big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- < strike>
每一章中的實例
通過我們的 HTML 編輯器，您能夠編輯 HTML，然后點擊按鈕來查看結果。
實例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的瀏覽器不支持 video 標簽。
</video>
</body>
</html>
嘗試一下 ?
點擊 "嘗試一下" 按鈕查看在線運行結果。
HTML5 瀏覽器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。
IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態資源的html5shiv包：
<!--[if lt IE9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js">
</script>
<![endif]-->
載入后，初始化新標簽的CSS：
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
HTML5 瀏覽器支持
你可以讓一些較早的瀏覽器（不支持HTML5）支持 HTML5。
現代的瀏覽器都支持 HTML5。
此外，所有瀏覽器，包括舊的和最新的，對無法識別的元素會作為內聯元素自動處理。
正因為如此，你可以 "教會" 瀏覽器處理 "未知" 的 HTML 元素。
 |
甚至你可以教會 IE6 (Windows XP 2001) 瀏覽器處理未知的 HTML 元素。 |
將 HTML5 元素定義為塊元素
HTML5 定了 8 個新的 HTML 語義（semantic） 元素。所有這些元素都是 塊級 元素。
為了能讓舊版本的瀏覽器正確顯示這些元素，你可以設置 CSS 的 display 屬性值為 block:
實例
header, section, footer, aside, nav, main, article, figure {
display: block;
}
為 HTML 添加新元素
你可以為 HTML 添加新的元素。
該實例向 HTML 添加的新的元素，并為該元素定義樣式，元素名為 <myHero> ：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>為 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
<myHero>我的第一個新元素</myHero>
</body>
</html>
嘗試一下 ?
JavaScript 語句 document.createElement("myHero") 是為 IE 瀏覽器添加新的元素。
Internet Explorer 瀏覽器問題
你可以使用以上的方法來為 IE 瀏覽器添加 HTML5 元素，但是：
|
Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式。 |
我們可以使用 Sjoerd Visscher 創建的 "HTML5 Enabling JavaScript", "** shiv**" 來解決該問題:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代碼是一個注釋，作用是在 IE 瀏覽器的版本小于 IE9 時將讀取 html5.js 文件，并解析它。
注意：國內用戶請使用本站靜態資源庫（Google 資源庫在國內不穩定）：
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
針對IE瀏覽器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，并且不能應用CSS樣式。
完美的 Shiv 解決方案
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>我的第一篇文章</h1>
<article>
菜鳥教程 —— 學的不僅是技術，更是夢想！！！
</article>
</body>
</html>
嘗試一下 ?
html5shiv.js 引用代碼必須放在 <head> 元素中，因為 IE 瀏覽器在解析 HTML5 新元素時需要先加載該文件。
