引言
HTML5 致力于解決跨瀏覽器問題，可以取代部分原來要靠JavaScript實現(xiàn)的功能；
HTML 的發(fā)展歷史“比較復(fù)雜”，因為它實在太“隨意”了，而負(fù)責(zé)解析 HTML 的瀏覽器又太“寬容”了，以至于到了“寫一份對的 HTML 文檔很容易，寫一份錯的 HTML 文檔很難”的程度。而且不同瀏覽器之間又存在一些差異，因此導(dǎo)致 HTML 文檔給人的感覺比較混亂。
2008年，一項關(guān)于Alexa全球500強網(wǎng)站的調(diào)查表明，僅有 6.57%的網(wǎng)站能通過 HTML 規(guī)范驗證。如果把那些名不見經(jīng)傳的小網(wǎng)站考慮在內(nèi)，整個互聯(lián)網(wǎng)上就幾乎都是不符合規(guī)范的 HTML 頁面。
一方面，W3C 組織“聲嘶力竭”的呼吁大家應(yīng)該制作遵守規(guī)范的 HTML 頁面；另一方面，各種瀏覽器卻可以正常解析、顯示那些不符規(guī)范的頁面，HTML 頁面制作者根本不太理會這種呼吁。
現(xiàn)有的 HTML 頁面中大量存在以下 4 種不符合規(guī)范的內(nèi)容：
- 元素標(biāo)簽名大小寫混雜：
<p>HTML</P> - 元素沒有結(jié)束符
- 元素中的屬性，只有屬性名，沒有屬性值：
<input type="text" disabled> - 屬性值沒有用引號：
<input type=text>
可能是出于“存在即合理”的考慮，WHATWG組織開始制定一種“妥協(xié)式”的規(guī)范：HTML 5。既然互聯(lián)網(wǎng)上大量存在上面 4 種不符合規(guī)范的內(nèi)容，而且制作者從來也不打算修改這些頁面，因此 HTML 5 干脆承認(rèn)它們是符合規(guī)范的。換句話說，HTML 5 是規(guī)范制定者對現(xiàn)實的妥協(xié)。
HTML 5 的優(yōu)勢
- 解決跨瀏覽器問題；
- 部分代替了原來的JavaScript：
document.getElementById("price").focus();< input type="text" autofocus name="price" >
- 更明確的語義支持：
- 在 HTML 5 以前，如果要表達(dá)一個文檔結(jié)構(gòu)，可能只能通過 div 元素來實現(xiàn)：
<div id="header" > ... < /div ><div id="nav" > ... < /div ><div id="article" > ... < /div ><div id="section" > ... < /div ><div id="aside" > ... < /div ><div id="footer" > ... < /div >
- HTML 5 為上面的頁面布局提供了更明確的語義元素：
< header > ... < header >< nav > ... < nav >< article > ... < article >< section > ... < section >< aside > ... < aside >< footer > ... < footer >
- 增強了 Web 應(yīng)用的功能：例如以前上傳文件時想同時選擇多個文件都不行，必須通過 JavaScript 來實現(xiàn)；為了彌補這些不足，HTML 5 規(guī)范增加了不少新的 API ，而各種瀏覽器正努力實現(xiàn)這些 API 功能，在未來的日子里，使用 HTML 5 開發(fā) Web 應(yīng)用將變得更加輕松。
HTML 5 基本結(jié)構(gòu)和語法變化
DTD 定義：
< !DOCTYPE html >
基本結(jié)構(gòu)：
<! DOCTYPE html>
<html>
<head>
<title>頁面標(biāo)題，顯示在瀏覽器標(biāo)簽欄</title>
<meta charset="utf-8" />
<!-- 此處可以插入其他meta、樣式單等信息 -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1> Hello, World! </h1>
頁面內(nèi)容
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
基本元素：
<style> 用于引入CSS
<h1> 到 <h6> 用于引入標(biāo)題一到標(biāo)題六
<p> 定義段落
<br> 換行
<hr> 定義水平線
<div> 定義文檔中的節(jié)
<span> 與 <div> 基本類似，區(qū)別是該定義的節(jié)默認(rèn)不會換行
<span>、<p>、<div>三個元素的效果有點類似，它們都可以作為其他內(nèi)容的容器。在默認(rèn)情況下，<span>元素不會導(dǎo)致?lián)Q行，而<div>元素會導(dǎo)致?lián)Q行，而<p>元素會產(chǎn)生一個段落，段落和段落之間默認(rèn)有更大的間距。
除此之外，<p> 和<span>只能包含文本類內(nèi)容，如文本、圖像、超鏈接、文本格式化元素(<em>等)和表單控件等內(nèi)容；
** <p>可以包含<span>元素，但<span>不能包含<p>元素；**
而<div>幾乎可以包含所有內(nèi)容：<h1>到<h6>、<form>、<table>、<ol>、<ul>和<div>、<p>、<span>。正是因為<div>元素可以包含各種各樣的內(nèi)容，因此在 HTML 5 以前，經(jīng)常會大量使用<div>元素來完成頁面布局。
文本格式化元素
-
<b>粗體文本 -
<i>斜體文本 -
<em>強調(diào)文本，實際效果和<i>差不多 -
<strong>粗體文本，與<b>基本相同 -
<big>大號字體文本 -
<small>小號字體文本 -
<sup>上標(biāo)文本 -
<sub>下標(biāo)文本
上面這些文本格式化元素能繼續(xù)包含文本類內(nèi)容，如文本、圖像、超鏈接、文本格式化元素和表單控件元素；還可以包含<span>！
語義相關(guān)元素
-
<abbr>表示一個縮寫 -
<address>表示一個地址，瀏覽器通常會用斜體字顯示地址內(nèi)容 -
<blockquote>引用，長的帶換行的大段引用 -
<q>引用，短的不帶換行的引用 -
<code>一段計算機代碼 -
<dfn>一個專業(yè)術(shù)語，瀏覽器通常會用粗體或斜體顯示 -
<del>被刪除的文本，瀏覽器以中劃線顯示 -
<ins>插入的文本，通常以下劃線顯示 -
<pre>表示該元素包含的文本已經(jīng)進行了預(yù)格式化，也就是說<pre>所包含的空格、回車、Tab和< > / \ ' "等格式字符都會被保留下來 -
<var>表示一個變量。瀏覽器通常以斜體顯示<var>所包含的文本
超鏈接和錨點
<big>< a... /></big>
-
href：鏈接地址 -
target：指定使用框架集中的哪個框架來裝載。屬性值可以為_self、_blank、_top、_parent 四個，分別代表使用自身、新窗口、頂層框架、父框架來加載新資源 -
media：指定目標(biāo) url 所引用的媒體類型。默認(rèn)值為 all。是 HTML 5 新增的屬性。
命名錨點就是頁面內(nèi)的定位點，用來實現(xiàn)頁面內(nèi)的定位：
<a name="anchor1">
<a href="#anchor1">
列表元素
-
<ol>有序列表- 可以通過
start和type屬性指定起始數(shù)字和編號類型（數(shù)字、字母、羅馬數(shù)字）
- 可以通過
-
<ul>無序列表 -
<li>列表項 -
<dl>自定義列表
<dl>
<!-- 定義標(biāo)題列表項 -->
<dt>要掌握的編程語言</dt>
<dd>Java</dd>
<dd>C++</dd>
<dd>Python</dd>
<dd>JavaScript</dd>
</dl>
圖片相關(guān)元素
<img>
此外，還可以指定以下屬性：
-
height：高度，可以為百分比或像素值 -
width：寬度，可以為百分比或像素值
圖片映射：將一幅圖片劃分成不同的區(qū)域，每一個區(qū)域可以設(shè)置一個鏈接地址
http://blog.csdn.net/qiantujava/article/details/18305709
表格
< table >
-
<caption>定義表格標(biāo)題 -
<thead>表格頭 -
<tfoot>表格腳 -
<tr>表格行 -
<td>單元格 -
<th>表格頁眉 -
<tbody>表格體
使用
<tbody>標(biāo)簽，可以將一個表格分成幾個獨立的部分。<tbody>元素可以將表格中的一行或幾行合并成一組，當(dāng)我們使用 Ajax 編程時常常需要動態(tài)修改表格中的某幾行，這就需要使用<tbody>元素了。
<table border="1" style="width:400px">
<caption><b>瘋狂Java體系圖書</b></caption>
<thead>
<tr>
<th>書名</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr>
<td>瘋狂Java講義</td>
<td>李剛</td>
</tr>
<tr>
<td>輕量級Java EE企業(yè)應(yīng)用實戰(zhàn)</td>
<td>李剛</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:right">現(xiàn)總計：2本圖書</td>
</tr>
</tfoot>
</table>
框架
HTML 5 不再推薦在頁面中使用框架集，因此 HTML 5 刪除了
<frameset>、<frame>、和<noframes>三個標(biāo)簽。
HTML 5 依然保留了一個與框架相關(guān)的元素：<iframe>，該元素用于在普通 HTML 頁面中生成一個內(nèi)聯(lián)框架，可以直接放在 HTML 頁面的任意位置，用于加載一個 url 指向的頁面。
<iframe src="https://www.baidu.com/" >
HTML 5 新增的通用屬性
HTML 5 保留了大部分原有的 HTML 元素，但為這些元素增加了一些通用屬性，這些屬性極大地增強了 HTML 元素的功能。
- contentEditable 屬性：允許直接編輯元素里的內(nèi)容。此處的 HTML 元素并不是指那些原來就允許用戶輸入的表單元素，如文本框、文本域子類的；而是可以把
<table>、<div>等元素變成可編輯狀態(tài)。 - designMode 屬性：相當(dāng)于一個全局的 contentEditable 屬性，如果把整個頁面的 designMode屬性設(shè)為 on 時，該頁面上所有可支持 contentEditable 的元素都變?yōu)榭删庉嫚顟B(tài)。
- hidden 屬性：通知瀏覽器不顯示元素，且不占用空間；相當(dāng)于
style="display: none"。 - spellcheck：為
<input>、<textarea>等元素增加了 spellcheck 屬性，瀏覽器會對輸入進行單詞拼寫檢查（錯誤的單詞劃紅色的下劃線）。
HTML 5 新增的常用元素
文檔結(jié)構(gòu)元素
-
<article>：代表頁面上獨立、完整的一篇“文章”，可以使一個帖子、一篇 Blog 文章、一篇短文、一條完整的回復(fù)等。-
<article>內(nèi)部可以用<header>定義文章標(biāo)題部分，用<footer>定義腳注，用多個<section>將文章內(nèi)容分成幾個段落，同時還可以嵌套多個<article>作為它的附屬文章，比如一篇 Blog 文章后面可以有多篇回復(fù)文章。
-
-
<section>：對頁面內(nèi)容進行分塊； -
<nav>：定義導(dǎo)航條。HTML 5 推薦將導(dǎo)航鏈接放在<nav>元素中進行管理。 -
<aside>：定義側(cè)邊欄； -
<header>：<article>文章的頭部，該元素內(nèi)部可以包含多個<h1>~<h6>這樣的標(biāo)題元素，也可以包含<hgroup>元素； -
<hgroup>：用于組織多個<h1>~<h6>這樣的標(biāo)題元素； -
<footer>：<article>的腳注部分； -
<figure>：一個獨立的圖片區(qū)域，內(nèi)部可包含多個<img>元素所代表的的圖片。
語義元素
-
<mark>：熒光筆效果，瀏覽器默認(rèn)會用黃色顯示； -
<time>：表示時間；
兩個特殊功能的元素
-
<meter>：用于表示一個已知最大值和最小值的計數(shù)儀表，比如電池的剩余電量； -
<progress>：進度條；
當(dāng)前行車速度是：
<meter value="120" min="0" max="220" low="0" high="160">120</meter>千米/小時。<br>
任務(wù)完成比：
<progress value="30" max="100">30/100</progress>
HTML 5 的頭部和元信息
<head>
-
<script>：用于包含 JavaScript 腳本； -
<style>：用于定義 CSS 樣式； -
<link>：用于鏈接外部 CSS 樣式等資源； -
<title>：顯示在瀏覽器標(biāo)簽欄的標(biāo)題； -
<base>：用于指定頁面中所有鏈接的基準(zhǔn)鏈接；-
<href>：指定所有鏈接的基準(zhǔn)鏈接； -
<target>：指定頁面中所有鏈接的默認(rèn)打開方式：<_blank>,<_self>,<_parent>,<_top>；
-
-
<meta>：用于定義 HTML 頁面的元數(shù)據(jù)，也就是一些 name-value 對，它可以指定以下 3 個屬性：-
<http-equiv>：指定元信息的名稱，該屬性指定的名稱具有特殊意義，它可以向瀏覽器傳回一些有用的信息，幫助瀏覽器正確的處理網(wǎng)頁內(nèi)容。 -
<name>：指定元信息的名稱，該名稱值可以隨意指定； -
<content>：元信息的值；
-
<meta>元素里<http-equiv>和<name>的作用基本相同，只是<http-equiv>屬性值通常規(guī)定為應(yīng)該是瀏覽器可以識別的、具有特殊意義的名稱。
<http-equiv>屬性支持以下幾個值：
-
<Expires>：指定網(wǎng)頁的過期時間，一旦網(wǎng)頁過期，必須重新從服務(wù)器上下載。例如：<meta http-equiv="Expires" content="Sat Sep 27 16:12:36 CST 2008"/>
-
<Pragma>：<meta http-equiv="Pragma" content="no-cache">禁止緩存頁面，等價于 HTTP 頭中的Cache-Control: no-cache -
<Refresh>：指定瀏覽器多長時間后自動刷新頁面：-
<meta http-equiv="Refresh" content="2"/>兩秒后自動刷新； -
<meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"/>兩秒后自動刷新至百度；
-
-
<Set-Cookie>：設(shè)置 Cookie：<meta http-equiv="Set-Cookie" content="name=value expires= Sat Sep 27 16:12:36 CST 2008, path=/">
-
<Content-Type>：設(shè)置頁面內(nèi)容類型和字符集：<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML 5 新增的拖放 API
HTML 5 新增了關(guān)于拖放的 API ，通過拖放 API 可以讓 HTML 頁面的任意元素都變成可拖動的（比如圖片和鏈接就默認(rèn)是可拖動的）。
結(jié)合 JavaScript 就可以設(shè)置拖放時攜帶的數(shù)據(jù)。
HTML 5 表單
一個問題，不要被 HTML 5 的“強大”迷惑，上傳文件這種事情還是要靠 JavaScript 來完成；只不過 HTML 5 提供了更方便的接口。
<form>三個重要的屬性：
-
<action>：目標(biāo)地址； -
<method>：postorget； -
<enctype>：對表單內(nèi)容進行編碼所使用的字符集-
application/x-www-form-urlencoded：默認(rèn)的編碼方式； -
multipart/form-data：含有文件時； -
text/plain：適用于發(fā)送郵件；
-
HTML 5 對客戶端校驗進行了增強（以前完全要靠 JavaScript 來實現(xiàn)），甚至支持基于正則表達(dá)式的校驗。
HTML 5 繪圖
在 HTML 5 以前的時代，如果需要在頁面上動態(tài)的生成圖片，要么在服務(wù)器端生成位圖后輸出到 HTML 頁面上顯示；要么要么使用 Flash 等第三方工具。HTML 5 的出現(xiàn)改變了這種局面， HTML 5 新增了一個
<canvas>元素，結(jié)合 JavaScript 的繪圖 API ，能夠?qū)崿F(xiàn)強大的繪圖功能。
HTML 5 的多媒體支持
在 HTML 5 的規(guī)范以前，如果希望在網(wǎng)頁上播放視頻、音頻，通常需要借助第三方插件，比如 Flash；HTML 5 新增了
<audio>、<video>兩個元素，無需使用任何插件，即可播放視頻、音頻。
其他
HTML 5 內(nèi)聯(lián)支持 SVG —— Scalable Vector Graphics——可伸縮矢量圖形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190>
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
