HTML5元素分類-創新互聯

HTML5元素分類：結構性元素、級塊性元素、行內語義性元素、交互性元素。

成都創新互聯主營東昌府網站建設的網絡公司,主營網站建設方案,app軟件定制開發,東昌府h5微信平臺小程序開發搭建,東昌府網站營銷推廣歡迎東昌府等地區企業咨詢

目的：使文檔的結構更加清晰明確；

增加新功能。

結構性元素：負責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支持)交互才會顯示出來。

4.2 datagrid:用來控制客戶端數據與顯示，可以由動態腳本更新。

4.3 menu:主要用于交互菜單（這是一個曾經被廢棄現在又重新啟用的元素）

4.4 command：用來處理命令按鈕

【附】web前端開發規范：http://www.html5cn.org/article-558-1.html

另外有需要云服務器可以了解下創新互聯cdcxhl.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前題目：HTML5元素分類-創新互聯
鏈接分享：http://vcdvsql.cn/article4/hoeie.html

成都網站建設公司_創新互聯，為您提供域名注冊、商城網站、自適應網站、App開發、定制開發、品牌網站建設

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

HTML5元素分類-創新互聯