HTML5 簡介
HTML5 是什么樣的，怎么用？其實在我們的HTML教程的第一個章節(jié)，我們里面給大家舉的例子里面用的代碼都是HTML來寫的。下面我們再來詳細了解一下HTML5
HTML5?簡介
 | HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定。 HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。 HTML5 簡單易學(xué)。 |
什么是 HTML5?
HTML5 是下一代 HTML 標準。
HTML , HTML 4.01的上一個版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。
HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
HTML5 是如何起步的？
HTML5 是 W3C 與 WHATWG 合作的結(jié)果,WHATWG 指 Web Hypertext Application Technology Working Group。。
WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進行合作，來創(chuàng)建一個新版本的 HTML。
HTML5 中的一些有趣的新特性：
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
HTML5 <!DOCTYPE>
<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡單:
<!DOCTYPE html>
你可以看一下我們的第一章節(jié)例子是不是由<!DOCTYPE>開頭的
最小的HTML5文檔
下面是一個簡單的HTML5文檔：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文檔標題</title> </head> <body> 文檔內(nèi)容...... </body> </html>
注意：對于中文網(wǎng)頁需要使用?<meta charset="utf-8">?聲明編碼，否則會出現(xiàn)亂碼。
HTML5 的改進
新元素
新屬性
完全支持 CSS3
Video 和 Audio
2D/3D 制圖
本地存儲
本地 SQL 數(shù)據(jù)
Web 應(yīng)用
HTML5 多媒體
使用 HTML5 你可以簡單的在網(wǎng)頁中播放 視頻(video)與音頻 (audio) 。
HTML5?<video>
HTML5?<audio>
HTML5 應(yīng)用
使用 HTML5 你可以簡單地開發(fā)應(yīng)用
本地數(shù)據(jù)存儲
訪問本地文件
本地 SQL 數(shù)據(jù)
緩存引用
Javascript 工作者
XHTMLHttpRequest 2
HTML5 圖形
使用 HTML5 你可以簡單的繪制圖形:
使用?<canvas>?元素
使用內(nèi)聯(lián)?SVG
使用?CSS3 2D/3D
HTML5 使用 CSS3
新選擇器
新屬性
動畫
2D/3D 轉(zhuǎn)換
圓角
陰影效果
可下載的字體
了解更多CSS3知識請查看本站的?CSS3 教程。
語義元素
HTML5 添加了很多語義元素如下所示：
| ? ? ?標簽 | ? ? ?描述 |
| ? ? <article> | 定義頁面獨立的內(nèi)容區(qū)域。 |
| ? ??<aside> | 定義頁面的側(cè)邊欄內(nèi)容。 |
| ? ??<bdi> | 允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。 |
| ? ??<command> | 定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕 |
| ? ??<details> | 用于描述文檔或文檔某個部分的細節(jié) |
| ? ??<dialog> | 定義對話框，比如提示框 |
| ? ??<summary> | 標簽包含 details 元素的標題 |
| ? ??<figure> | 規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。 |
| ? ??<figcaption> | 定義 <figure> 元素的標題 |
| ? ??<footer> | 定義 section 或 document 的頁腳。 |
| ? ??<header> | 定義了文檔的頭部區(qū)域 |
| ? ??<mark> | 定義帶有記號的文本。 |
| ? ??<meter> | 定義度量衡。僅用于已知最大和最小值的度量。 |
| ? ??<nav> | 定義導(dǎo)航鏈接的部分。 |
| ? ??<progress> | 定義任何類型的任務(wù)的進度。 |
| ? ??<ruby> | 定義 ruby 注釋（中文注音或字符）。 |
| ? ??<rt> | 定義字符（中文注音或字符）的解釋或發(fā)音。 |
| ? ??<rp> | 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。 |
| ? ??<section> | 定義文檔中的節(jié)（section、區(qū)段）。 |
| ? ??<time> | 定義日期或時間。 |
| ? ??<wbr> | 規(guī)定在文本中的何處適合添加換行符。 |
HTML5 表單
新表單元素, 新屬性，新輸入類型，自動驗證。
已移除元素
以下的 HTML 4.01 元素在HTML5中已經(jīng)被刪除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
實例?
下面的例子給大家看一下在網(wǎng)頁上播放視頻
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文檔標題</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>
你可以在本地找一個視頻，在src中放入視頻的位置及名稱，嘗試一下
HTML5 瀏覽器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。
你可以讓一些較早的瀏覽器（不支持HTML5）支持 HTML5。
現(xiàn)代的瀏覽器都支持 HTML5。
此外，所有瀏覽器，包括舊的和最新的，對無法識別的元素會作為內(nèi)聯(lián)元素自動處理。
正因為如此，你可以?"教會"?瀏覽器處理?"未知"?的 HTML 元素。
甚至你可以教會 IE6 (Windows XP 2001) 瀏覽器處理未知的 HTML 元素。 ? ?
將 HTML5 元素定義為塊元素
HTML5 定了 8 個新的 HTML?語義（semantic）?元素。所有這些元素都是?塊級?元素。
為了能讓舊版本的瀏覽器正確顯示這些元素，你可以設(shè)置 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>php中文網(wǎng)(php.cn)</title>
<meta charset="utf-8">
<title>為 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #9dddd7;
padding:40px;
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 創(chuàng)建的 "HTML5 Enabling JavaScript", "?shiv" 來解決該問題:
<!--[if lt IE 9]>
? <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代碼是一個注釋，作用是在 IE 瀏覽器的版本小于 IE9 時將讀取 html5.js 文件，并解析它。
注意：國內(nèi)用戶請使用百度靜態(tài)資源庫（Google 資源庫在國內(nèi)不穩(wěn)定）：
<!--[if lt IE 9]>
? <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
針對IE瀏覽器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節(jié)點包裹子元素，并且不能應(yīng)用CSS樣式。
完美的 Shiv 解決方案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> <meta charset="utf-8"> <title>渲染 HTML5</title> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>學(xué)習(xí)HTML就到PHP中文網(wǎng)</h1> <article> php中文網(wǎng) —— php中文網(wǎng)?。? </article> </body> </html>
html5shiv.js 引用代碼必須放在 <head> 元素中，因為 IE 瀏覽器在解析 HTML5 新元素時需要先加載該文件。
