HTML5新增的結構元素


HTML5的結構

一:新增的主體結構元素

在HTML5中,為了使文檔的結構更加清晰明確,追加了幾個與頁眉,頁腳內容區塊等文檔結構相關聯的結構元素。

1.1article元素

      article元素代表文檔,頁面或應用程序中獨立的完整的,可以獨自被外部引用的內容,<article> 標簽定義外部的內容。article元素是可以嵌套使用的,內層的內容在原則上需要與外層的內容相關聯,

    另外article元素也可以用來表示一個插件。

<time> 標簽定義日期或時間,或者兩者。pubdate 指示 <time> 元素中的日期 / 時間是文檔(或最近的前輩 <article> 元素)的發布日期

     <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>

<body>
<article>
  <header>
     <h1>博客</h1>
     <p><time pubdate="pubdate">2017/3/1</time></p>
  </header>
  <p><b>我的博客</b>,我的博客內容</p>
  <footer>版權所有</footer>
</article>
</body>
</html>
View Code

2.section元素

      section元素用來對網站或應用程序中頁面上的內容進行分塊,一個section元素通常由內容及其標題組成,但section元素並非一個普通的容器元素,當一個容器需要直接定義樣式或通過腳本定義行為的時候,最好使用div而不要使用section。

section元素的作用是對頁面內容分塊,或者說是對文章進行分段。

<article>
<h1>元素分類</h1>
<section>
   <h2>article元素</h2>
   <p>article元素的作用</p>
</section>
<section>
   <h2>section元素</h2>
   <p>section元素的作用</p>
</section>
</article>
帶有section元素的article元素示例
<section>
<h1>元素分類</h1>
<article>
   <h2>article元素</h2>
   <p>article元素的作用</p>
</article>
<article>
   <h2>section元素</h2>
   <p>section元素的作用</p>
</article>
</section>
帶有article元素的section元素示例

事實上article元素可以看成一種特殊的類的section元素,,它比section元素更強調獨立性,section強調分段,article強調獨立性。

 

3.nav元素

nav元素是一個可以用來作為頁面導航的鏈接組,nav用於導航上.

 

4:aside元素

  aside元素用來表示當前頁面或文章的附屬信息部分,有別於主體內容的部分。其中的內容可以是與當前文章有關的參考資料、名詞解釋;在article元素之外使用,作為頁面或站點全局的附屬信息部分。

 

5:time元素

<time>元素表示的是日期定義日期。頁面在解析時,獲取的是屬性“datetime”中的值,而標記之間的內容只是用於顯示在頁面中。<time>元素中的可選屬性“pubdate”表示時間是否為發布日期,它是一個布爾值,該屬性不僅可以用於<time>元素,還可用於<article>元素。

 

6:header元素

     header元素是一種具有引導和導航作用的結構元素,一個網頁內並未限制header元素的個數,可以擁有多個,在HTML 5中,一個header元素通常包括至少一個heading元素(h1-h6)。

<header>
    <h1>header標簽的使用</h1>
</header>

<article>
    <header>
        <h1>子標題</h1>
    </header>   
    <p>內容</p>
</article>
多個header元素的使用

 

7:footer元素

footer通常包括其相關區塊的腳注信息,如作者、相關閱讀鏈接及版權信息等。

對這些新增的元素使用css樣式,要聲明這些元素為塊元素。

二:大綱的編排規則

關於內容區塊的編排,可以分為“顯式編排”與“隱式編排”兩種方式。

顯式編排

顯式編排是指明確使用section等元素創建文檔結構,在每個內容區塊內使用標題(h1~h6、hgroup等)

隱式編排

所謂隱式編排,是指不明確使用section等元素,而是根據頁面中所書寫的各級標題(h1~h6、hgroup等)把各級內容區塊自動創建出來。

如果新出現的標題比上一個標題級別低,將生成下級內容區塊。

如果新出現的標題比上一個標題級別高,或者兩者的級別相等,將生成新的內容區塊。

因為隱式編排容易使自動生成的整個文檔結構與所想要的文檔結構不一樣,而且也容易引起文檔結構的混亂,所以盡量使用顯式編排。

<section>
    <h2>隱式編碼</h2>
    <p>內容</p>
    <!--因為下面的標題級別比上一個標題級別高,所以自動創建新的內容區塊 -->
    <h1>內容</h1>
    <p>內容</p>
</section>


<section>
    <h2>顯式編碼</h2>
    <p>s內容</p>
</section>
<section>
    <h1>分塊</h1>
    <p>內容</p>
</section>
View Code

——參考自《HTML5與css3的權威指南》

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM