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這樣的誰知道能支援什麼屬性呢。