前言
HTML中的一大主要變化是基本信念方面的:將元素的語義與元素對其內容呈現(xiàn)結構的影響分開。HTML元素負責文檔內容的結構和含義,內容的呈現(xiàn)則由應用與元素上的CSS樣式控制。HTML文檔的用戶未必都需要顯示它們,不摻合呈現(xiàn)方面的事有助于簡化HTML的處理以及從中自動提煉含義。
元素速覽
接下來讓我們一起走馬觀燈地認識一下所有的HTML5元素吧
文檔和元數(shù)據元素
創(chuàng)建HTML文檔的上層建筑,想瀏覽器說明文檔的情況,定義腳本程序和CSS樣式,提供瀏覽器禁用腳本時要顯示的內容
| 元素 | 說明 | 類型 | 有無變化 |
|---|---|---|---|
| base | 設置相對URL的基礎 | 元數(shù)據 | 無變化 |
| body | 表示HTML文檔的內容 | 無 | 有變化 |
| DOCTYPE | 表示HTML文檔的開始 | 無 | 有變化 |
| head | 表示文檔的元數(shù)據 | 無 | 無變化 |
| html | 表示文檔中HTML部分的開始 | 無 | 有變化 |
| link | 定義與外部資源(通常是樣式表或網站圖標)的關系 | 元數(shù)據 | 有變化 |
| meta | 提供關于文檔的信息 | 元數(shù)據 | 有變化 |
| noscript | 包含瀏覽器禁用的腳本或不支持腳本時顯示的內容 | 元數(shù)據、短語 | 無變化 |
| script | 定義腳本程序,可以是文檔內嵌的也可以是外部文件中的 | 元數(shù)據、短語 | 有變化 |
| style | 定義CSS樣式 | 元數(shù)據 | 有變化 |
| title | 設置文檔標題 | 元數(shù)據 | 無變化 |
文本元素
文本元素用來為內容提供基本的結構和含義
| 元素 | 說明 | 類型 | 有無變化 |
|---|---|---|---|
| a | 生成超鏈接 | 短語、流 | 有變化 |
| abbr | 縮略語 | 短語 | 無變化 |
| b | 不再強調或著重意味地標記一段文字 | 短語 | 有變化 |
| br | 表示換行 | 短語 | 無變化 |
| cite | 表示其他作品的標題 | 短語 | 有變化 |
| code | 表示計算機代碼片段 | 短語 | 無變化 |
| del | 表示從文檔中刪除的文字 | 短語、流 | 新增 |
| dfn | 表示術語定義 | 短語 | 無變化 |
| em | 表示著重強調的一段文字 | 短語 | 無變化 |
| i | 表示與周邊內容秉性不同的一段文字,例如來自另一種語言的詞語 | 短語 | 有變化 |
| ins | 表示加入文檔的文字 | 短語、流 | 無變化 |
| kbd | 表示用戶輸入內容 | 短語 | 無變化 |
| mark | 表示一段因為與上下文中另一詞語相關而被突出顯示的內容 | 短語 | 新增 |
| q | 表示引自他處的內容 | 短語 | 無變化 |
| rp | 與ruby元素結合使用,標記括號 | 短語 | 新增 |
| rt | 與ruby元素結合使用,標記注意符號 | 短語 | 新增 |
| ruby | 表示位于表意文字上方或右方的注音符號 | 短語 | 新增 |
| s | 表示文字已不再準確 | 短語 | 無變化 |
| samp | 表示計算機程序輸出的內容 | 短語 | 無變化 |
| small | 表示小號字體內容 | 短語 | 無變化 |
| span | 一個沒有自己語義的通用元素。可以用在希望應用一些全局屬性卻又不想引入額外語義的情況 | 短語 | 無變化 |
| strong | 表示重要內容 | 短語 | 無變化 |
| sub | 表示下標文字 | 短語 | 無變化 |
| sup | 表示上標文字 | 短語 | 無變化 |
| time | 表示時間或日期 | 短語 | 新增 |
| u | 不帶強調或著重意味地標記一段文字 | 短語 | 有變化 |
| var | 表示程序或計算機系統(tǒng)中的變量 | 短語 | 無變化 |
| wbr | 表示可安全換行的地方 | 短語 | 新增 |
對內容分組
用來將相關內容分組
| 元素 | 說明 | 類型 | 有無變化 |
|---|---|---|---|
| blockquote | 表示引用他處的大段內容 | 流 | 無變化 |
| dd | 用在dl元素之中,表示定義 | 無 | 無變化 |
| div | 一個沒有任何既定語義的通用元素,是span元素在流云素中的對應物 | 流 | 無變化 |
| dl | 表示包含一系列術語和定義的說明列表 | 流 | 無變化 |
| dt | 用在dl元素之中,表示術語 | 無 | 無變化 |
| figcaption | 表示figure元素的標題 | 無 | 新增 |
| figure | 表示圖片 | 流 | 新增 |
| hr | 表示段落級別的主題轉換 | 流 | 有變化 |
| li | 用在ul、ol和menu元素中,表示列表項 | 無 | 有變化 |
| ol | 表示有序列表 | 流 | 有變化 |
| p | 表示段落 | 流 | 有變化 |
| pre | 表示其格式應被保留的內容 | 流 | 無變化 |
| ul | 表示無序列表 | 流 | 有變化 |
劃分內容
用于劃分內容、讓每個概念、觀點或主題彼此分隔開。它們中有許多是新增的。這些元素為分離元素的含義和外觀做了大量基礎性工作
| 元素 | 說明 | 類型 | 有無變化 |
|---|---|---|---|
| address | 表示文檔或article的聯(lián)系信息 | 流 | 新增 |
| article | 表示一段獨立的內容 | 流 | 新增 |
| aside | 表示與周邊內容稍為有牽涉的內容 | 流 | 新增 |
| details | 生成一個區(qū)域,用戶將其展開可以獲得更多細節(jié)知識 | 流 | 新增 |
| footer | 表示尾部 | 流 | 新增 |
| h1~h6 | 表示標題 | 流 | 無變化 |
| header | 表示首部 | 流 | 新增 |
| hgroup | 將一組標題組織在一起,以便文檔大綱只顯示其中第一個標題 | 流 | 新增 |
| nav | 表示有意集中在一起的導航元素 | 流 | 新增 |
| section | 表示一個重要的概念或主題 | 流 | 新增 |
| summary | 用在details元素中,表示該元素內容的標題或說明 | 無 | 新增 |
制表
用于制作顯示數(shù)據的表格。表格在HTML5中的主要變化是不能再用來控制頁面布局。
| 元素 | 說明 | 類型 | 有無變化 |
|---|---|---|---|
| caption | 表示表格的標題 | 無 | 有變化 |
| col | 表示一列 | 無 | 有變化 |
| colgroup | 表示一組列 | 無 | 有變化 |
| table | 表示表格 | 流 | 有變化 |
| tbody | 表示表格主體 | 無 | 有變化 |
| td | 表示單元格 | 無 | 有變化 |
| tfoot | 表示表腳 | 無 | 有變化 |
| th | 表示標題行單元格 | 無 | 有變化 |
| thead | 表示標題行 | 無 | 有變化 |
| tr | 表示一行單元格 | 無 | 有變化 |
創(chuàng)建表單
HTML5對這方面關注的比較多,并且新增了不少元素和特性(包括在用戶提交表單時在客戶端驗證輸入數(shù)據的功能)
| 元素 | 說明 | 類型 | 有無變化 |
|---|---|---|---|
| button | 表示可用來提交或重置表單的按鈕(或一般按鈕) | 短語 | 有變化 |
| datalist | 定義一組提供給用戶的建議值 | 流 | 有變化 |
| fieldset | 表示一組表單元素 | 流 | 有變化 |
| form | 表示HTML表單 | 流 | 有變化 |
| input | 表示用來手機用戶輸入數(shù)據的控件 | 短語 | 有變化 |
| keygen | 生成一對公鑰和私鑰 | 短語 | 新增 |
| label | 表示表單元素的說明標簽 | 短語 | 有變化 |
| legend | 表示fieldset元素的說明性標簽 | 無 | 無變化 |
| optgroup | 表示一組相關的option元素 | 無 | 無變化 |
| option | 表示供用戶選擇的一個選項 | 無 | 無變化 |
| output | 表示計算結果 | 短語 | 新增 |
| select | 給用戶提供一組固定的選項 | 短語 | 有變化 |
| textarea | 用戶可以用它輸入多行文字 | 短語 | 有變化 |
嵌入內容
在HTML5文檔中嵌入內容
| 元素 | 說明 | 類型 | 有無變化 |
|---|---|---|---|
| area | 表示一個用于客戶端區(qū)分相應圖的區(qū)域 | 短語 | 有變化 |
| audio | 表示一個音頻資源 | 無 | 新增 |
| canvas | 生成一個動態(tài)的圖形畫布 | 短語、流 | 新增 |
| embed | 用插件在HTML文檔中嵌入內容 | 短語 | 新增 |
| iframe | 通過創(chuàng)建一個瀏覽上下文在一個文檔中嵌入另一個文檔 | 短語 | 有變化 |
| img | 嵌入圖片 | 短語 | 有變化 |
| map | 定義客戶端分區(qū)響應圖 | 短語、流 有變化 | |
| meter | 嵌入數(shù)值在許可值范圍背景中的圖形表示 | 短語 | 新增 |
| object | 在HTML文檔中嵌入內容、也用于生成瀏覽上下文和生成客戶端分區(qū)響應 | 短語、流 | 有變化 |
| param | 表示將通過object元素傳遞給插件的參數(shù) | 無 | 無變化 |
| progress | 嵌入目標進展或任務完成情況的圖形表示 | 短語 | 新增 |
| source | 表示媒體資源 | 無 | 新增 |
| svg | 表示結構化矢量內容 | 無 | 新增 |
| track | 表示媒體的附加軌道(例如屏幕) | 無 | 新增 |
| video | 表示視頻資源 | 無 | 新增 |
未實現(xiàn)的元素
有兩個元素目前還沒有瀏覽器實現(xiàn),而且在HTML5規(guī)范中也僅有含糊不清的說明,這兩個元素時command和menu。它們的設計用途是讓菜單和用戶界面元素處理起來更簡單一些。