<hgroup>標(biāo)注副標(biāo)題

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計制作的公司,為廣大用戶提供了成都網(wǎng)站設(shè)計、做網(wǎng)站，成都網(wǎng)站設(shè)計，一元廣告，成都做網(wǎng)站選成都創(chuàng)新互聯(lián)公司，貼合企業(yè)需求，高性價比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

在 HTML5語義元素的使用 中已經(jīng)讓<header>物盡其用了，其實(shí)，HTML5還增加了兩個與標(biāo)題有關(guān)的元素：一個是<header>，另一個是<hgroup>,下面看看兩個元素的規(guī)范做法：

1. 如果有一個普通的標(biāo)題，它本身不包含任何特殊的內(nèi)容，那使用一個帶編號的標(biāo)題元素(<h2>、<h3>、<3>)就可以了：

<h2>因?yàn)橥矗越星啻?lt;/h2>

2. 如果除了主標(biāo)題，還有一個主標(biāo)題，那可以把這兩個標(biāo)題包裝在一個<hgroup>元素中，但是，這里邊除了編號的標(biāo)題元素(<h2>、<h3>、<3>)外，其它任何元素也不要放：

<hgroup>
<h2>因?yàn)橥?，所以叫青?lt;/h2>
<h3>寫給獨(dú)自站在人生路口的你</h3>
</hgroup>

 3.如果除了主標(biāo)題和主標(biāo)題，還有其它內(nèi)容(比如內(nèi)容摘要、發(fā)表日期、作者署名、圖片和小標(biāo)題)，應(yīng)該把他們放在<hgroup>的后面，再把他們整體放在<header>元素中：

<header>
<hgroup>
<h2>因?yàn)橥?，所以叫青?lt;/h2>
<h3>寫給獨(dú)自站在人生路口的你</h3>
</hgroup>
<pclass="Byline">[韓]金蘭都</p>
</header>

上面代碼中用<h3>替換<p>(參見            HTML5語義元素的使用    )，這樣做不會改變頁面在瀏覽器中的效果，但是，但卻會影響瀏覽器或其他工具為頁面生成的文檔摘要(只會關(guān)注頂級標(biāo)題(也就是這里的<h2>),其它標(biāo)題會顯示在瀏覽器中，但不會列入文檔摘要，這樣的結(jié)果才是合理的)。

用<figure>添加插圖

插圖與圖片的概念不完全一樣，HTML5建議把插圖想象成一本書的附件，即是說，插圖雖獨(dú)立于文本，但在文本中會提到它。

一般來說，插圖應(yīng)該是浮動的，即應(yīng)該把插圖放在相關(guān)文本旁邊的一個比較近的位置上(而不是把它們鎖定在特定的詞或元素旁邊)，而且，插圖通常還會有與之相伴的浮動圖題。

下面給            HTML5語義元素的使用 文章中添加插圖：

<p><spanclass="LeadIn">青春</span>, 之所以艱難，是因?yàn)楣聠巍?lt;/p>
<figureclass="FloatFigure">
<imgsrc="youth.jpeg"alt="Our youth">
<figcaption>是誰偷走了我們的青春?</figcaption>
</figure>
<p> 童年時，……</p>

當(dāng)然，只有這些標(biāo)記是不夠的，必須有相應(yīng)的樣式規(guī)則，才能把插圖定位到適當(dāng)?shù)奈恢?添加外邊距、控制圖題文本的格式等)，以下是樣式規(guī)則：

/*為插圖應(yīng)用樣式*/
.FloatFigure {  
      float: left;  
      margin-left: 0px;  
      margin-top: 0px;  
      margin-right: 20px;  
      margin-bottom: 0px;  
}  

記得為圖題也要應(yīng)用樣式規(guī)則：

/*為圖題應(yīng)用樣式*/
.FloatFigure figcaption {
  max-width: 200px;
  font-size: small;
  font-style: italic;
  margin-bottom: 5px;
}
以下就是添加插圖及應(yīng)用樣式頁面的外觀：

用<aside>添加附注

新的<aside>元素表示與它周圍的文本沒有密切關(guān)系的內(nèi)容。使用附注可以介紹另外一個話題，或者對主文檔提出的某個觀點(diǎn)進(jìn)行解釋，也可以用<aside>來盛放廣告、相關(guān)的內(nèi)容鏈接，以起到引起讀者的注意力。

使用<div>元素也可以創(chuàng)造這種效果，但用<aside>元素包裝同樣的內(nèi)容，可以讓標(biāo)記更富有意義，如下：

<h3>只有你，獨(dú)自站在人生邊上</h3>
<aside class="PullQuote">
<img src="quotes_start.png" alt="Quote">
青春，痛并快樂著。但是，自己選擇的路，就是跪著，也要走完。
<img src="quotes_end.png" alt="End quote">
</aside>
<p>這是個對話已絕，共鳴已亡的時代。</p>

以下是為附注添加的樣式：

.PullQuote {
  float: right;
  max-width: 300px;
  border-top: thin black solid;
  border-bottom: thick black solid;
  font-size: 30px;
  line-height: 130%;
  font-style: italic;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 15px;
  margin-bottom: 10px;
}
.PullQuote img {
  vertical-align: bottom;
}

如此，便可以看到下面的附注的效果：

標(biāo)題名稱：HTML5元素<hgroup>和<figure>及<aside>的使用
新聞來源：http://aaarwkj.com/article14/ipohde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、服務(wù)器托管、標(biāo)簽優(yōu)化、品牌網(wǎng)站制作、App設(shè)計、網(wǎng)站收錄

廣告

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