html5語義化

1. 文本元素

序號	HTML標籤	英文全稱	音標	中文釋義
1	a	anchor	[ˈæŋkɚ]	錨點
2	br	break	[brek]	換行
3	wbr	Word Break	略	字符換行時機
4	b	bold	略	粗體
5	strong	strong	略	加劇
6	i	italic	[ɪˈtælɪk]	斜體
7	em	emphasize	[ˈɛmfəˌsaɪz]	強調
8	del	delete	略	刪除
9	s/strike	strikethrough	[straɪki:θ'ru:]	刪除線
10	u	underline	略	下劃線
11	ins	insert	略	下劃線
12	code	code	略	源代碼
13	var	variable	[ˈveriəbl]	變量
14	samp	sample	略	示例
15	kbd	keyborad	略	鍵盤輸入
16	abbr	abbreviation	[əˌbriviˈeʃən]	縮寫
17	cite	citation	[saɪˈteʃən]	引用
18	dfn	define	略	定義
19	mark	mark	略	標籤文本
20	q	quotation	[kwoʊˈteɪʃn]	引用
21	ruby	ruby	略	語言元素
22	rt	ruby text	略	註釋
23	rp	ruby parenthesis	[pəˈrɛnθɪsɪs]	括號不支持ruby時顯示
24	bdo	bidirectional override	[ˌbaɪdɪˈrɛkʃənəl]	雙向覆蓋文本方向
25	small	small	略	小字
26	sub	subscript	[ˈsʌbˌskrɪpt]	下標
27	sup	superscript	[ˈsu:pərskrɪpt]	上標
28	time	time	略	時間
29	span	span	略	通用元素

ruby的使用

<ruby>
饕<rp>(</rp><rt>tāo</rt><rp>)</rp>
餮<rp>(</rp><rt>tiè</rt><rp>)</rp>
</ruby>

2. 分組元素

序號	HTML標籤	英文全稱	音標	中文釋義
1	p	paragraph	[ˈpærəgræf]	段落
2	div	division	[dɪˈvɪʒən]	部分除法
3	blockquote	block quote	略	大塊引用
4	pre	pre-formatted	略	預約義格式
5	hr	Horizontal Rule	略	水平線
6	ul,ol	un/order list	略	有序/無序列表
7	li	list item	略	列表項
8	dl	define list	略	自定義列表
9	dt	define term	略	自定義列表項
10	dd	define Description	略	自定義列表數據
11	figure	figure	略	流數據
12	figcaption	figure caption	略	流數據標題

figure的使用

<figsure>
  <figcaption>這是一張圖片</figcaption>
  <img src="img.png">
</figsure>

3. 表格元素

序號	HTML標籤	英文全稱	音標	中文釋義
1	table	table	略	表格
2	thead	table head	略	表頭
3	tbody	table body	略	表體
4	tfoot	table foot	略	表腳
5	tr	table row	略	表的一行
6	th	table head	略	表頭
7	td	table data	略	表的數據
8	col	column	[ˈkɑ:ləm]	一列
9	colgroup	column group	略	一組列
10	caption	caption	略	表格名稱

thead和th的區別

thead,tbody,tfoot不管代碼位置如何，都會正確顯示。

<tfoot></tfoot>
<tbody></tbody>
<thead>
  <tr>
    <th>姓名</th>
    <th>性別</th>
    <th>婚否</th>
  </tr>
</thead>

col和colgroup的做用

行的樣式能夠加在tr上，但列的樣式如何添加呢？答案就是使用col和colgroup.

<table border="1" style="width:300px;">
  <colgroup>
    <col> // 第一列
    <col style="background:red;" span=2>// 第二列和第三列
  </colgroup>

  <tr>
    <th>姓名</th><th>性別</th><th>婚否</th>
  </tr>
  <tr>
    <td>張三</td><td>男</td><td>未婚</td>
  </tr>
  <tr>
    <td>李四</td><td>女</td><td>已婚</td>
  </tr>
</table>

4. 文檔元素

序號	HTML標籤	英文全稱	中文釋義
1	h1-h6	header	標題
2	header	header	首部
3	section	section	部分
4	footer	footer	尾部
5	nav	navigation	導航
6	article	article	文章
7	address	address	地址
8	aside	column	旁註
9	hgroup	header group	一組標題
10	details	details	細節
11	summary	summary	details的標題

article

article如同body，裏面能夠包含完整的header,section,footer.

5. 嵌入元素

序號	HTML標籤	英文全稱	中文釋義
1	img	image	圖片
2	map	map	分區響應圖
3	area	area	分區響應圖 區域
4	audio	audio	音頻
5	video	video	視頻
6	iframe	inline frame	內聯框架
7	embed	embed	使用插件嵌入
8	canvas	canvas	畫圖
9	meter	header group	度量衡，取值範圍
10	object	object	嵌入對象
11	param	param	經過object傳遞給插件的參數
12	progress	progress	進度條
13	source	source	媒體資源
14	svg	Scalable Vector Graphics	可縮放矢量圖形
15	track	track	附加軌道，如字幕

object和param

object和param是4.0的東西，如今被embed,audio,video等替換。

embed插件

<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" width="800" height="600"></embed>

meter和progress

<progress value="30" max="100"></progress>
<meter value="60" min="10" max="100" low="40" high="80" optimum="60"></meter>

img map 和area

實現圖區熱點

<img src="img.png" alt="風景圖" width="339" height="229" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="47,33,132,102" href="http://www.baidu.com" target="_blank" alt="百度">
  <area shape="circle" coords="232,115,40" href="http://www.soso.com" target="_blank" alt="搜搜">
  <area shape="poly" coords="56,151,177,182,50,217" href="http://www.haosou.com" target="_blank" alt="好搜">
</map>

6. 表單元素

序號	HTML標籤	英文全稱	中文釋義
1	form	form	表單
2	input	input	輸入audio/checkbox
3	textarea	textarea	文本輸入框
4	select	select	下拉選擇
5	option	option	下拉選項
6	optgroup	option group	選項 組
7	button	button	按鈕
8	datalist	data list	數據列表
9	fieldset	field set	表單字段集
10	legend	legend	說明/傳說
10	output	output	輸出結果

7. 全局屬性

序號	HTML標籤	英文全稱	中文釋義
1	id	id	id
2	class	class	class
3	accesskey	accesskey	快捷鍵(alt+指定鍵)
4	contenteditable	讓文本處於可編輯狀態
5	dir	dir	方向
6	hidden	hidden	隱藏
7	lang	lang	局部設置語言
8	title	title	額外提示
9	tabindex	tab index	按tab鍵 焦點獲取順序
10	style	style	內聯樣式

8. 參考資料

html 標籤對應的英文