征途怀旧版藏宝图位置

書名： HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通
作者名：新視角文化行
本章字數： 3517字
更新時間： 2019-10-23 16:45:14

3.2 HTML5頁面主體內容標簽

在HTML5頁面中，為了使文檔的結構更加清晰明確。新增了幾個與頁眉、頁腳、內容區塊等文檔結構相關聯的文檔結構標簽，通過使用這些文檔結構標簽，可以在HTML文檔中清晰地劃分不同的內容區塊。在本節中將向讀者詳細介紹HTML5中在頁面的主體結構方面新增的結構標簽。

3.2.1 標識文章<article>標簽

網頁中常常出現大段的文章內容，通過文章結構元素可以將網頁中大段的文章內容標識出來，使網頁的代碼結構更加整齊。在HTML5中新增了<article>標簽，使用該標簽可以在網頁中定義獨立的內容，包括文章、博客和用戶評論等內容。

<article>標簽的基本語法格式如下。

<article>文章內容</article>

一個<article>元素通常有它自己的標題，一般放在一個<header>標簽中，有時還有自己的腳注。

如下面的網頁HTML代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁新聞</title>
</head>
<body>
<article>
   <header>
      <h1>新聞標題</h1>
      <time pubdate="pubdate">2017年11月12日</time>
   </header>
   <p>新聞正文內容</p>
   <footer>
      新聞版底信息
   </footer>
</article>
</body>
</html>

在以上的HTML頁面代碼中，在<header>標簽中嵌入文章的標題，在這部分中，文章的標題包含在<h1>標簽中，使用<time>標簽包含文章的發布日期。在<header>標簽的結束標簽之后使用<p>標簽包含新聞的正文內容，在結尾外使用<footer>標簽嵌入文章的版底信息作為腳注。整個示例的內容相對比較獨立、完整，因此，對這部分使用了<article>標簽。

<article>標簽是可以嵌套使用的，當<article>標簽嵌套使用的時候，內部的<article>標簽中的內容必須和外部的<article>標簽中的內容相關。

如下面的網頁HTML代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁新聞</title>
</head>
<body>
<article>
   <header>
      <h1>新聞標題</h1>
      <time pubdate="pubdate">2017年11月12日</time>
   </header>
   <p>新聞正文內容</p>
   <footer>
      新聞版底信息
   </footer>
   <section>
      <h2>評論</h2>
      <article>
         <header>
            <h3>用戶1</h3>
         </header>
         <p>評論內容</p>
     </article>
     <article>
        <header>
           <h3>用戶2</h3>
        </header>
        <p>評論內容</p>
     </article>
   </section>
</article>
</body>
</html>

以上的HTML代碼中通過結構標簽將內容分為幾個部分，文章標題放在<header>標簽中，文章正文放在<header>標簽的結束標簽后的<p>標簽中，然后使用<section>標簽將正文與評論部分進行了區分，在<section>標簽中嵌入了評論的內容，評論中每一個人的評論相對來說又是比較獨立、完整的，因此對它們都使用了一個<article>標簽，在評論的<article>標簽中，又可以分為標題與評論內容部分，分別放在<header>標簽與<p>標簽中。

另外，<article>標簽也可以用來表示插件，它的作用是使插件看起來好像內嵌在頁面中一樣。

使用<article>標簽表示插件的代碼如下所示。

<article>
   <h1>使用插件</h1>
   <object>
      <param name="allowFullScreen" value="true">
      <embed src="文件地址" width="寬度" height="高度"> </embed>
   </object>
</article>

3.2.2 標識章節<section>標簽

在網頁文檔中常常需要定義章節等特定的區域。在HTML5中新增了<section>標簽，該標簽用于對頁面中的內容進行分區。一個section元素通常由內容及其標題組成。<div>標簽也可以用來對頁面進行分區，但是<section>標簽并不是一個普通的容器元素，當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用<div>標簽，而非<section>標簽。

<section>標簽的基本語法格式如下。

<section>文章內容</section>

提示

<div>標簽關注結構的獨立性，而<section>標簽關注內容的獨立性。<section>標簽包含的內容通常都是一段獨立的內容，可以單獨將該段內容單獨存儲，同樣可以很好地表達其含義。

如下面的HTML代碼中使用<section>標簽將新聞列表的內容單獨分隔，在HTML5之前，通常使用<div>標簽來分隔該塊內容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁新聞</title>
</head>
<body>
<section>
   <h1>網站新聞</h1>
   <ul>
      <li>新聞標題1</li>
      <li>新聞標題2</li>
      <li>新聞標題3</li>
     ......
   </ul>
</section>
</body>
</html>

<article>標簽和<section>標簽都是HTML5新增的標簽，它們的功能與<div>標簽類似，都是用來區分頁面中不同的區域，它們的使用方法也相似，因此很多初學者會將其混用。HTML5之所以新增這兩種標簽，就是為了更好地描述HTML文檔的內容，所以它們之間是有區別的。

<article>標簽代表HTML文檔中獨立完整的可以被外部引用的內容。例如，博客中的一篇文章，論壇中的一個帖子或者一段用戶評論等。因為<article>標簽是一段獨立的內容，所以<article>標簽中通常包含頭部（<header>標簽）和底部（<footer>標簽）。

<section>標簽用于對HTML文檔中的內容進行分塊，一個<section>標簽中通常由內容及標題組成。<section>標簽中需要包含一個<hn>標簽，一般不包含頭部（<header>標簽）或者底部（<footer>標簽）。通常使用<section>標簽為那些有標題的內容進行分段。

<section>標簽的作用是對頁面中的內容進行分塊處理，相鄰的<section>標簽中的內容應該是相關的，而不是像<article>標簽中的內容那樣是獨立的。如下面的HTML代碼。

<article>
   <header>
      <h1>網頁設計介紹</h1>
   </header>
   <p>這里是網頁設計的介紹內容，介紹有關網頁設計的相關知識……</p>
   <section>
      <h2>評論</h2>
      <article>
         <h3>評論者：用戶1</h3>
         <p>這里是評論內容</p>
      </article>
      <article>
         <h3>評論者：用戶2</h3>
         <p>這里是評論內容</p>
      </article>
   </section>
</article>

在以上的HTML代碼中，可以觀察到<article>標簽與<section>標簽的區別。事實上<article>標簽可以看作是特殊的<section>標簽。<article>標簽更強調獨立性、完整性，<section>標簽更強調相關性。

既然<article>和<section>標簽是用來劃分區域的，又是HTML5的新增標簽，那么是否可以使用<article>和<section>標簽來取代<div>標簽進行網頁布局呢？答案是否定的，<div>標簽的作用就是用來布局網頁，劃分大的區域的。在HTML 4中只有<div>和<span>標簽用來在HTML頁面中劃分區域，所以我們習慣性地把<div>當成一個容器。而HTML5改變了這種用法，它讓<div>的工作更純正，<div>標簽就是用來布局大塊，在不同的內容塊中，按照需求添加<article>、<section>等內容塊，并且顯示其中的內容，這樣才是合理地使用這些元素。

因此，在使用<section>標簽時需要注意以下幾個問題。

? 不要將<section>標簽當作設置樣式的頁面容器，對于此類操作應該使用<div>標簽來實現。

? 如果<article>標簽、<aside>標簽或者<nav>標簽更符合使用條件，不要使用<section>標簽。

? 不要為沒有標題的內容區塊使用<section>標簽。

在HTML5中，<article>標簽可以看成是一種特殊種類的<section>標簽，它比<section>標簽更強調獨立性，即<section>標簽強調分段或分塊，而<article>標簽則強調獨立性。具體來說，如果一塊內容相對來說比較獨立、完整的時候，應該使用<article>標簽，但是如果想將一塊內容分成幾段的時候，應該使用<section>標簽。另外，在HTML5中，<div>標簽只是一個容器，當使用CSS樣式的時候，可以對這個容器進行總體的CSS樣式的套用。

3.2.3 標識導航<nav>標簽

導航是每個網頁中都包含的重要元素之一，通過網站導航可以在網站中各頁面之間進行跳轉。在HTML5中新增了<nav>標簽，使用該標簽可以在網頁中定義網頁的導航部分。

<nav>標簽的基本語法格式如下。

<nav>導航內容</nav>

<nav>標簽標識的是一個可以用作頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。并不是所有的鏈接組都需要被放置在<nav>標簽中，只需要將主要的、基本的鏈接組放進<nav>標簽中即可。

一個頁面中可以擁有多個<nav>標簽，作為頁面整體或不同部分的導航。具體來說，<nav>標簽可以用于以下位置。

? 傳統導航條。常規網站都設置有不同層級的導航條，其作用是將當前頁面跳轉到網站的其他主要頁面上去。

? 側邊欄導航。現在主流的博客網站及商品網站上都有側邊欄導航，其作用是從當前頁面跳轉到其他頁面上去。

? 頁內導航。頁面導航的作用是在本頁面幾個主要的組成部分之間進行跳轉。

? 翻頁操作。翻頁操作是指在多個頁面的前后頁或博客網站的前后篇文章滾動。

在HTML5中，只要是導航性質的鏈接，就要將其放入到<nav>標簽中，該標簽可以在一個HTML文檔中出現多次，作為整個頁面的導航或部分區域內容的導航。如下面的HTML代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁新聞</title>
</head>
<body>
<nav>
   <ul>
      <li><a href="#">網站首頁</a></li>
      <li><a href="#">關于我們</a></li>
      <li><a href="#">設計作品</a></li>
      <li><a href="#">聯系我們</a></li>
   </ul>
</nav>
</body>
</html>

在以上的HTML代碼中，<nav>標簽中包含了4個用于導航的超鏈接，該導航可以用于網頁全局導航，也可以放在某個段落作為區域導航。

提示

很多用戶喜歡使用<menu>標簽進行導航，<menu>標簽主要是用在一系列交互命令的菜單上的，如使用在Web應用程序中。在HTML5中不要使用<menu>標簽代替<nav>標簽。

3.2.4 標識輔助內容<aside>標簽

側邊結構元素可用于創建網頁中文章內容的側邊欄內容。在HTML5中新增了<aside>標簽，用于創建其所處內容之外的內容，<aside>標簽中的內容應該與其附近的內容相關。

<aside>標簽的基本語法格式如下。

<aside>輔助信息內容</aside>

<aside>標簽用來表示當前頁面或文章的輔助信息內容部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條及其他類似的有別于主要內容的部分。<aside>標簽主要有以下兩種使用方法。

（1）<aside>標簽被包含在<article>標簽中，作為主要內容的輔助信息部分，其中的內容可以是與當前文章有關的相關資料、名詞解釋等。其基本應用格式如下。

<article>
   <h1>文章標題</h1>
   <p>文章主體內容</p>
   <aside>文章內容的輔助信息內容</aside>
</article>

（2）在<article>標簽之外使用<aside>標簽，作為頁面或全局的輔助信息部分。最典型的是側邊欄，其中的內容可以是友情鏈接，博客中的其他文章列表、廣告等。其基本應用格式如下。

<aside>
<h2>列表標題1</h2>
<ul>
   <li>列表項1</li>
   <li>列表項2</li>
</ul>
<h2>列表標題2</h2>
<ul>
   <li>列表項1</li>
   <li>列表項2</li>
</ul>
</aside>

3.2.5 標識文章發布日期<time>標簽

微格式是一種利用HTML的class屬性來對網頁添加附加信息的方法，附加信息如新聞事件發生的日期和時間、個人電話號碼、企業郵箱等。

微格式并不是在HTML5出現之后才有的，在HTML5之前它就和HTML結合使用了，但是在使用過程中發現在日期和時間的機器編碼上出現了一些問題，編碼過程中會產生一些歧義。HTML5新增了<time>標簽，通過該標簽可以無歧義地、明確地對機器的日期和時間進行編碼，并且以讓人易讀的方式展現出來，這個元素就是<time>標簽。

<time>標簽代碼24小時中的某個時刻或某個日期，表示時刻時允許帶時差。它可以定義很多格式的日期和時間，其語法格式如下。

<time datetime="2017-11-12">2017年11月12日</time>
<time datetime="2017-11-12">11月12日</time>
<time datetime="2017-11-12">我的生日</time>
<time datetime="2017-11-12T18:00">我生日的晚上6點</time>
<time datetime="2017-11-12T18:00Z">我生日的晚上6點</time>
<time datetime="2017-11-12T18:00+09:00">我生日的晚上8點的美國時間</time>

編碼時引擎讀到的部分在datetime屬性中，而元素的開始標簽與結束標簽中間的部分是顯示在網頁上的。datetime屬性中日期與時間之間要使用字母“T”分隔，“T”表示時間。

注意倒數第2行，時間加上字母“Z”表示機器編碼時使用UTC標準時間，倒數第一行則加上了時差，表示向機器編碼另一地區時間，如果是編碼本地時間，則不需要添加時差。

pubdate屬性是一個可選的布爾值屬性，可以添加在<time>標簽中，用于表示文章或者整個網頁的發布日期。使用格式如下。

<time datetime="2017-11-12" pubdate>2015年11月12日</time>

由于<time>標簽不僅僅表示發布時間，而且還可以表示其他用途的時間，如通知和約會等。為了避免引擎誤解發布日期，使用pubdate屬性可以顯式地告訴引擎文章中哪個時間是真正的發布時間。

官术网_书友最值得收藏!