HTML5元素<hgroup>和<figure>及<aside>的使用

因?yàn)橥矗越星啻?/h2>
寫(xiě)給獨(dú)自站在人生路口的你

上面代碼中用

替換

(參見(jiàn)            HTML5語(yǔ)義元素的使用    )，這樣做不會(huì)改變頁(yè)面在瀏覽器中的效果，但是，但卻會(huì)影響瀏覽器或其他工具為頁(yè)面生成的文檔摘要(只會(huì)關(guān)注頂級(jí)標(biāo)題(也就是這里的

),其它標(biāo)題會(huì)顯示在瀏覽器中，但不會(huì)列入文檔摘要，這樣的結(jié)果才是合理的)。

用

添加插圖

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

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

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

青春, 之所以艱難，是因?yàn)楣聠巍?/p>

童年時(shí)，……

當(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)用樣式頁(yè)面的外觀：

用