HTML5元素分類

標籤：tail   檔案   data   orm   附加   預設   add   legend   ddr   

HTML5新增了27個元素，廢棄了16個元素，根據現有的標準規範，把HTML5的元素按優先順序定義為結構性屬性、級塊性元素、行內語義性元素和互動性元素4大類。

1.結構性元素

結構性元素主要負責web上下文結構的定義

• section：在web頁面應用中，該元素也可以用於地區的章節描述。
• header：頁面主體上的頭部，header元素往往在一對body元素中。
• footer：頁面的底部（頁尾），通常會標出網站的相關資訊。
• nav：專門用於菜單導航、連結導航的元素，是navigator的縮寫。
• article：用於表現一篇文章的主體內容，一般為文字集中顯示的地區。

2.級塊性元素

級塊性元素主要完成web頁面地區的劃分，確保內容的有效分割。

• aside：用於表達註記、貼士、側欄、摘要、插入的引用等作為補充主體的內容。
• figure：是對多個元素進行組合并展示的元素，通常與ficaption聯合使用。
• code：表示一段代碼塊。
• dialog：用於表達人與人之間的對話，該元素包含dt和dd這兩個組合元素，dt用於表示說話者，而dd用來表示說話內容。

3.行內語義性元素

行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展示的基礎。

• meter：表示特定範圍內的數值，可用於工資、數量、百分比等。
• time：表示時間值。
• progress：用來表示進度條，可通過對其max、min、step等屬性進行控制，完成對進度的表示和監事。
• video：視頻元素，用於支援和實現視頻檔案的直接播放，支援緩衝預載和多種視頻媒體格式。
• audio：音頻元素，用於支援和實現音頻檔案的直接播放，支援緩衝預載和多種音頻媒體格式。

4.互動性元素

互動性元素主要用於功能性的內容表達，會有一定的內容和資料的關聯，是各種事件的基礎。

details：用來表示一段具體的內容，但是內容預設可能不顯示，通過某種手段（如單擊）與legend互動才會顯示出來。

datagrid：用來控制用戶端資料與顯示，可以由動態指令碼及時更新。

menu：主要用於互動菜單（曾被廢棄又被重新啟用的元素）。

command：用來處理命令按鈕。

 

構建主體內容

標識文章

article元素用來表示文檔、頁面中獨立的、完整的、可以獨立被外部參考的內容。article元素可以嵌套使用。article元素也可以用來表示外掛程式。

給內容分段

section元素用於對網站或應用程式中頁面的內容進行分區，div元素也可以用來對頁面進行分區，當一個容器需要被直接定義樣式或通過指令碼定義行為時，推薦使用div，而非section元素。div關注結構的獨立性，而sectio元素關注內容的獨立性，section元素包含的內容可以單獨儲存到資料庫中或輸出到word文檔中。

section元素用於對網站或者應用程式中頁面上的內容進行分塊，一個section元素通常由內容以及標題組成，需要辦好一個<hn>標題元素，一般不包含header頭部或者footer底部元素，通常用section元素為那些有標題的內容進行分段。section元素是對頁面上的內容分塊處理，相鄰的section元素的內容是相關的，而不是像article那樣獨立。事實上，article可以看做是特殊的section元素，article元素更強調獨立性、完整性，section更強調相關性。

使用section元素時應注意以下幾個問題：

• 不要將section元素當做設定樣式的頁面容器，對於此類操作應該使用div元素實現。
• 如果article元素、aside元素或nav元素更符合使用條件，不要使用section元素。
• 不要為沒有標題的內容區塊使用section元素。

 在HTML5中，div元素變成了一種容器，當使用CSS樣式的時候，可以對這個容器進行一個總體的CSS樣式的套用。

設計導航資訊

nav元素是一個可以用作頁面導航的連結組，其中的導航元素連結到其他頁面或當前頁面的其他部分。nav元素可以用以以下場合：

• 傳統導航條
• 側邊欄導航
• 頁內導航
• 翻頁操作

 設計輔助資訊

aside元素用來表示當前頁面或文章的附屬資訊部分，其中的內容可以是與當前文章相關的參考資料、名詞解釋等。

設計微格式

微格式是一種利用HTML的class屬性來對網頁添加附加資訊的方法，主要是簡化WEB開發的資料提取

time元素代表24小時中的某個時刻或某個日期，標識時刻時允許帶時差。

添加發布日期

pubdate屬性是一個可選的布爾值屬性，可用在article元素中的time元素上，time元素代表了文章或整個網頁的發布日期。

 

添加語義模組

添加標題塊

header元素是一種具有引導和導航作用的結構元素。在HTML5中，header元素通常包含h1-h6元素，也可以包含hgroup、table、form、nav等元素。

給標題分組

hgroup元素可以為標題或者子標題進行分組，通常它與h1~h6元素組合使用。但如果文章只有一個主標題，則不需要hgroup元素。

添加腳註塊

footer元素可以作為內容塊的註腳，註腳資訊有很多種形式，如作者、相關閱讀連結及著作權資訊等。

添加聯絡資訊

address元素用來在文檔中定義聯絡資訊，包括文檔作者或文檔編輯者名稱、電子郵箱、真真實位址、電話號碼等。

HTML5元素分類