小米游戏中心

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

3.3 頁面語義模塊標簽

除了以上幾個主要的結構元素之外，在HTML5中還新增了一些表示邏輯結構或附加信息的非主體結構元素。

3.3.1 頁眉<header>標簽

<header>標簽是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題，也可以包含其他內容，如數據表格、搜索表單或相關的logo圖片，因此整個頁面的標題應該放在頁面的開頭。

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

<header>網頁或文章的標題信息</header>

如下面的網頁HTML代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁新聞</title>
</head>
<body>
<header>
   <h1>網頁標題</h1>
</header>
<article>
   <header>
      <h1>文章標題</h1>
   </header>
   <p>文章正文內容</p>
</article>
</body>
</html>

在一個網頁中可以多次使用<header>標簽。在<header>標簽中通常包含<h1>至<h6>標簽，也可以包含<hgroup>、<table>、<form>和<nav>等標簽，只要顯示在頭部區域的語義標簽，都可以包含在<header>標簽中。

3.3.2 標題分組<hgroup>標簽

<hgroup>標簽可以為標題或者子標題進行分組，通常它與<h1>至<h6>標簽組合使用，一個內容塊中的標題及子標題可以通過<hgroup>標簽組成一組。但是，如果文章只有一個主標題，則不需要使用<hgroup>標簽。

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

<hgroup>
   標題1
   標題2
   ……
</hgroup>

如下面的網頁HTML代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁新聞</title>
</head>
<body>
<article>
   <header>
      <hgroup>
         <h1>文章主標題</h1>
         <h2>文章副標題</h2>
         <h3>文章標題說明</h3>
      </hgroup>
      <p>
         <time datetime="2015-11-12">發布時間：2015年11月12日</time>
      </p>
   </header>
   <p>文章正文內容</p>
</article>
</body>
</html>

在該HTML代碼中，使用<hgroup>標簽將文章的主標題、副標題和文章的標題說明進行分組，以便讓搜索引擎更容易識別標題塊。

3.3.3 頁腳<footer>標簽

HTML5中新增了<footer>標簽，<footer>標簽中的內容可作為網頁或文章的注腳，如在父級內容塊中添加注釋，或者頁中添加版權信息等。頁腳信息有很多形式，如作者、相關閱讀鏈接及版權信息等。

在HTML5之前，要描述頁腳信息，通常使用<div id="footer">標簽定義包含框。自從HTML5新增了<footer>標簽，這種方式將不再使用，而是使用更加語義化的<footer>元素來替代。

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

<footer>頁腳信息內容</footer>

在如下的HTML代碼中使用<footer>標簽分別為頁面中的文章和整個頁面添加相應的腳注信息。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁新聞</title>
</head>
<body>
<article>
   <header>
      <h1>文章標題</h1>
      <p>
         <time datetime="2015-11-12">發布時間：2015年11月12日</time>
      </p>
   </header>
   <p>文章正文內容</p>
   <footer>文章注釋信息</footer>
</article>
<footer>網頁版權信息</footer>
</body>
</html>

與<header>標簽一樣，頁面中也可以重復使用<footer>標簽。同時，可以為<article>標簽所標注的文章或<section>標簽所標注的章節內容添加<footer>標簽，添加相應的文章或章節注釋信息。

3.3.4 聯系信息<address>標簽

HTML5中新增了<address>標簽，<address>標簽用來在HTML文檔中定義聯系信息，包括文檔作者、電子郵箱、地址和電話號碼等信息。

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

<address>聯系信息內容</address>

<address>標簽的用途不僅僅用來描述電子郵箱或地址等聯系信息，還可以用來描述與文檔相關的聯系人的相關聯系信息。如下面的HTML代碼。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁新聞</title>
</head>
<body>
<article>
   <header>
      <h1>文章標題</h1>
      <p>
         <time datetime="2015-11-12">發布時間：2015年11月12日</time>
      </p>
   </header>
   <p>文章正文內容</p>
   <footer>文章注釋信息</footer>
</article>
<address>
   <a href="#">網頁設計資訊</a>
   <a href="#">Web技術</a>
</address>
</body>
</html>

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

HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通

3.3 頁面語義模塊標簽

3.3.1 頁眉<header>標簽

3.3.2 標題分組<hgroup>標簽

3.3.3 頁腳<footer>標簽

3.3.4 聯系信息<address>標簽