HTML5和HTML屬性及元素整理
背景：
我們在開發的時候，經常被問到，你們用到了哪些H5的特性？有的時候這個問題真的很不好回答，除了那幾樣非常有特點的H5技術，比如LocalStorage、Canvas、Offline Application、圖形繪製或者CSS的圓角等，剩下的H5屬性、CSS3很多都細節都我們自己都不知道是否用到了H5技術，所以今天特地整理了下H5的元素和屬性。經過整理和發現，原來我們不經意中已經用了很多H5和CSS3屬性了，不過這些屬性和元素現代瀏覽器都支援的很好了。
1.HTML和XHTML屬性基礎
還是那句話：HTML5不是什麼新技術，它是HTML和XHTML的進化版本，用好H5就應該熟練掌握HTML和XHTML，明白HTML和XHTML的由來，XHTML的設計目的最好。
1.1基本屬性：
HTML中每個元素（標籤）都有下面三個基本屬性：
|
符號 |
名稱 |
作用 |
|
class |
類 |
定義元素的類名稱 |
|
id |
id |
定義元素的id，文件內唯一 |
|
style |
樣式 |
定義元素的樣式，覆蓋外部css，優先應用這些樣式。 |
但是下面這幾個元素沒有這些屬性
|
符號 |
作用 |
備註 |
|
html/head |
文件和頭部基本結構 |
|
|
title |
網頁表頭 |
|
|
base |
網頁資訊 |
比如<base url = “” > |
|
meta |
網頁元資料資訊標記 |
定義網頁的一些資訊，比如編碼 |
|
param |
元素引數資訊 |
基本上沒見過 |
|
style/script |
網頁樣式和指令碼 |
1.2.語言屬性：
基本上每個元素都有下面的語言屬性：
|
符號 |
名稱 |
作用 |
|
lang |
語言編碼 |
定義元素的語言編碼，用的少。 |
|
dir |
文字方向 |
取值：ltr rtl (left to right 和 right to left) |
下面這幾個元素沒有這些屬性：
|
符號 |
作用 |
備註 |
|
frameset/frame/iframe |
定於框架的標記 |
|
|
br |
換行標記。 |
|
|
hr |
水平線 |
比如<base url = “” > |
|
base |
網頁基本資訊 |
定義網頁的一些資訊，比如編碼 |
|
param |
元素引數資訊 |
基本上沒見過 |
|
script |
網元指令碼標籤 |
1.3.鍵盤屬性：
|
符號 |
名稱 |
作用 |
|
accesskye |
指定用Alt + 快捷鍵的訪問，IE、firefox支援不好 |
|
|
tabindex |
tab的訪問順序 |
這兩個屬性用的很少！而且browser支援不是很好！
1.4.內容屬性：
|
符號 |
名稱 |
作用 |
|
alt |
替換屬性 |
元素的替換文字 |
|
title |
元素的提示文字 |
|
|
longdesc |
元素包含的大段描述資訊 |
|
|
cite |
包含內容的引用資訊 |
|
|
datetime |
包含內容的日期和時間 |
alt和title不等價，並不應該混用。但是它們在IE上被混用了，alt是在元素無法顯示的時候替換問題，而title才是滑鼠移動上去的提示資訊。
剩下的三個很少用，最要也別用，支援性不是很好。
下面的標籤不具有這些屬性
|
符號 |
作用 |
備註 |
|
html/head |
定義頁面 |
|
|
title |
標題 |
|
|
meta |
網頁元資訊 |
|
|
base、basefont |
網頁基本資訊 |
|
|
param |
元素引數資訊 |
基本上沒見過 |
|
script |
網元指令碼標籤 |
2.H5中標籤的三種寫法
標籤寫法在H5中比HTML 4規範，但是沒有XHTML要求那麼嚴格，XHTML需要指定DOCTYPE來告訴browser使用什麼DTD解析和驗證文件，要求的標籤書寫方式很嚴格，甚至區分大小寫。但是H5是以實用為標準的，所有要求都沒有那麼嚴格。
（1）H5的元素不區分大小寫，但是推薦全部小寫。
（2）下面幾個標籤可以省略不寫，這在HTML 4中是可以的，但是XHTML中不可以：
html、head、body和colgroup、tbody。
（3）下面的標籤不允許採用標籤對結束的，必須用<元素 />形式：
area / base / br / col / command / embed / hr / img / input / keygen / link / meta / param / source / track / wbr
（4）剩下的全部隨意，可以標籤對結束，可以自封閉，看喜好，看規範，看方便程度。
（5）H5的DOCTYP使用html，不用指定DTD，一般格式：
<!DOCTYPE html>或者<!DOCTYPE HTML SYSTEM “about:legacy-compat”>
H5的DOCTYPE寫法要求在文件開頭，而且不能有空行，和XML的<xml charset=”utf-8”>的開頭要求一樣。這個開頭會觸發瀏覽器採用標準模式解析文件，包括使用標準Box Model。
PS：標準模式和怪異（quirks）對應，quirks模式就是IE的模式。
3.H5中的元素
3.1新增結構元素：
下面幾個是H5新增的用來定義文件內容結構的，是針對內容的！！
|
符號 |
作用 |
|
header |
區別head，是標記內容頭部的 |
|
footer |
標記內容腳部區域。 |
|
section |
頁面中獨立的一塊兒 |
|
article |
獨立的文章內容 |
|
aside |
相關內容或者引文 |
|
nav |
導航類的輔助內容。 |
H5的思想還是延續的表現和內容分離，所以H5新增的標籤針對的是內容，不是網頁結構，據說這些標籤是Google使用了大量的網路爬蟲統計分析主流Web頁面，得出結果發現很多都有類似
<div class=”header”></div>或者<div id=”footer”></div>
這樣的標籤寫法，所以為了方便，H5增加了這幾個針對內容的標籤，目的是讓內容的語音更明確。上面這些標籤和html、head、body不一樣，他們可以出現多次，從內容的角度去理解適用他們，讓他們替代<div id=”nav”></div>這樣的標籤。
3.2.H5新增標籤
下面是H5新增的標籤，可以關注下video、audio、canvas這幾個，剩下的有需要可以試試，反正Browser不支援就會ignore：
|
符號 |
作用 |
|
hgroup |
對內容塊兒的標題進行組合。 |
|
figure |
一段獨立的流內容，子標籤figcaption規定標題 |
|
video |
視訊，替代object標籤 |
|
embed |
每天，可以是多種格式 |
|
mark |
強調，高亮，類似<span> |
|
canvas |
畫布，結合JS API繪製圖形等動畫 |
|
output |
輸出 |
|
source |
定義媒體資源，類似param |
|
menu |
選單列表 |
|
ruby |
ruby註釋 |
|
rt |
字元的解釋或發音 |
|
rp |
在ruby註釋中使用，定義不之處ruby元素的瀏覽器的顯示 |
|
wbr |
軟換行，表示當寬度不夠時才換行 |
|
command |
命了按鈕 |
|
details |
表示一些詳細資訊。用一個小三角隱藏內容 |
|
summary |
配合details，規定標題 |
|
datalist |
可選資料列表，與input元素配合使用，裡面放options。 |
|
datagrid |
樹行結構的列表，不知道怎麼用。 |
|
keygen |
生成祕鑰 |
|
progress |
執行中的程序，可以使用它來顯示JS中耗時函式的程序。 |
|
meter |
上面這些標籤都都是為了替代某一項功能而產生的，比如：
<figure>
<figcaption>標題</figcaption>
<p>內容</p>
</figure>
是為了替代：
<dl>
<h1>標題</h1>
<p>內容</p>
</dl>
這種寫法，讓我們的整改頁面更具有語義化，其實Web語義化是一個真正的前端應該明白的東西，我是個Java程式設計師，這裡就不做整理了，
。
最後，因為本人太懶，而且H5和CSS3技術網上資料也很多，關於CSS3新增和廢棄的屬性這裡不就做整理了，但是有一點，其實很多時候我們已經在使用CSS3技術了，比如background-repeat這個是CSS3的標準技術，但是我們已經很常見了。
關於CSS3的內容細節比較多，其實我們開發的原則按照實用為主就好了，少用那些相容性有爭議的，如果不明白相容性，百度下多測試幾遍就好了。比較像UC這樣的誰知道能支援什麼屬性呢。