溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5元素分類：結構性元素、級塊性元素、行內語義性元素、交互性元素。
目的：使文檔的結構更加清晰明確；
增加新功能。
結構性元素：負責Web的上下文結構的定義，確保HTML文檔的完整性。
1.1 section（給內容分段）:在web頁面應用中，該元素可以用于區域的章節表述。
section 元素用于對網站或應用中頁面上的內容進行分區，關注內容的獨立性；一個section元素通常由標題及內容組成；section元素包含的內容可以單獨存儲到數據庫中或輸出到word文檔中
1.2 header（頭部元素）: 頁面主體上的頭部
應該用來標識每一個區域的頭部區域
1.3 footer（底部元素）: 頁面的底部
應該用來標識每一個區域的底部區域
1.4 nav（導航）:用于菜單導航、鏈接導航的元素
適用于以下場合
傳統導航條、側邊欄導航、頁內導航、翻頁操作。
1.5 article（標識文章）:用于標識一片文章的主體內容，一般為文字集中顯示的區域。
article元素用來標識文檔、頁面中獨立的、完整的、可以獨自被外部引用的內容。它可以是一
篇博客或者報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件。
article元素的標題通常放在header中。通常包含header和footer。
article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯。如一篇新聞是
一個article，在新聞的最后的評論就可以嵌套article元素。
【section 與 article 】
article：代表文檔、頁面或者應用程序中獨立完整的可以被外部引用的內容。如博客中的一篇文
章，論壇中的一個帖子或者一段瀏覽者的評論等。通常包含頭部（header元素，article
元素的標題(hn)通常寫在header元素中）、底部（footer元素）。
section:section元素的作用是對頁面上的內容進行分段，如對文章分段等。通常為那些有標題的內
容進行分段（*）。
一個section元素通常由標題（hn，hn不需要放在header標簽中）和內容組成。
一個section元素一般不用包含header元素和footer元素。
section元素的作用是對頁面上的內容進行分段，如對文章分段等。
相鄰的section元素的內容應該是相關的，而不是像article那樣獨立。
section article 不能取代div用于設置樣式;
如果article元素、aside元素、nav元素更符合使用條件，不要使用section元素；
不要為沒有標題的內同區塊使用section元素；
【我的整理】
article用于標識內容獨立的文章；
aricle中通常包含header元素、footer元素；
article的標題hn通常寫在header元素中；
article可以嵌套使用，但是內外層的article內容要有關聯；
section為有標題的內容區塊劃分段落，標題不需要寫在header標簽中；
section 與 article可以嵌套使用；
section 與 article用于劃分區域，不能取代div作為設置頁面樣式的容器，如需要，則使
用div設置；
若aside、nav、article更符合使用條件，就不要使用section元素。
【代碼示例】
<article>
<header>
<h2>
潛行者m的個人介紹</h2>
</header>
<p>
潛行者m是一個中國男人，是一個帥哥。。。</p>
<section>
<h3>
評論</h3>
<article>
<h4>
評論者：潛行者 n</h4>
<p>
確實，m同學真的很帥</p>
</article>
<article>
<h4>
評論者：潛行者 a</h4>
<p>
今天吃藥了沒？</p>
</article>
</section>
</article>
[補：非主體結構元素]
1.6 hgroup(給標題分組)：為標題或者子標題進行分組，通常它與h2~h7元素組合使用，一個內容快中
的標題及其子標題可以通過hgroup元素組成一組;
1.7 address（添加聯系信息）:在文檔中定義聯系信息，包括文檔作者或者文檔編輯者名稱、電子郵
箱、真實地址、電話號碼等。
2.級塊元素：
2.1 aside（設置輔助信息）:用以表達注記、貼士、側欄、摘要、插入的引用等作為補充主體的內
容。從一個簡單頁面的顯示上看，就是側邊欄，可以在左邊，也可以在 右邊。從一個頁面的局部看，就是摘要。 、
aside元素的兩種用法：
作為主要內容的復數信息部分，包含在article元素中，其中的內容可以是與當前文章有關 的參考資料、名詞解釋等；
作為頁面或站點全局的附屬信息部分，在article之外使用。最典型的形式是側邊欄，其中 的內容可以是友情鏈接，博客中其他文章列表、廣告單元。
2.2 figure:對多多個元素進行組合并展示的元素，通常與figcaption聯合使用
<!DOCTYPE HTML> <html> <body> <p>上海盧浦大橋是當今世界第一鋼結構拱橋，是世界上跨度最大的拱形橋。它也是世界上首座完全采用焊接工藝連接的大型拱橋（除合攏接口采用栓接外），現場焊接焊縫總長度達4萬多米，接近上海市內環高架路的總長度。盧浦大橋像澳大利亞悉尼的海灣大橋一樣具有旅游觀光的功能。</p> <figure> <p>黃浦江上的的盧浦大橋</p> <p>拍攝者：W3School 項目組，拍攝時間：2010 年 10 月</p> <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure> </body> </html>
2.3 code：表示一段代碼塊.<code>前臺顯示的內容</code>
2.4 dialog: 用于表達人與人之家 的對話。該元素還包括dt和dd這兩個組合元素，它們常常同時
使用。dt用于表示說話人，dd表示說話內容。
<暫不知何處使用>
3 行內語義性元素：完成web頁面具體內容的引用和表述，豐富內容展示。
3.1 meter:表示特定范圍內的數值，可用于工資、數量、百分比等。
3.2 time:表示時間
3.3 progress:用來標識進度條，可通過對其max、min、step等屬性控制，完成對進度的表示控制
3.4 video:視頻元素，用于支持和實現視頻（含視頻流）文件的直接播放，支持緩沖預載和多種視
頻媒體格式：MPEG-4,OggV和WebM.
3.5 audio:音頻元素，用于支持和實現音頻（音頻流）文件的直接播放，支持緩沖預載和多種音頻
媒體格式。
【我的整理】
設計微格式：<time datetime="2012-11-13">我的生日</time>
添加發布日期：<time datetime="2012-11-13" pubdate></>
4.交互性元素：功能性的內容表達，會有一定的內容和數據的關聯，是各種事件的基礎，這類元素包括
以下幾個。
4.1 details:用來表示一段具體的內容，但是內容默認可能不顯示，通過某種手段（如單擊）與
summary (chrome 中測試為 summary，目前僅chrome和IE支持)交互才會顯示出來。
<details> <summary>健康信息</summary> 身高：<input type="text" /> 體重：<input type="text" /> </details>
4.2 datagrid:用來控制客戶端數據與顯示，可以由動態腳本更新。
4.3 menu:主要用于交互菜單（這是一個曾經被廢棄現在又重新啟用的元素）
4.4 command：用來處理命令按鈕
【附】web前端開發規范：http://www.html5cn.org/article-558-1.html
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
