HTML5語義元素的使用

傳統(tǒng)頁面的構造方法

<div class="Header"> 
<h2>因為痛，所以叫青春</h2> 
<p class="Teaser">寫給獨自站在人生路口的你</p> 
<p class="Byline">[韓]金蘭都</p> 
</div> 
 
<div class="Content"> 
<p><span class="LeadIn">青春</span>, 之所以艱難，是因為孤單。</p> 
......完整內容見附件
</div> 
 
<div class="Footer"> 
<p class="Disclaimer">上述這些是譯的觀點</p> 
<p> 
<a href="AboutUs.html">關于我們</a> 
<a href="Disclaimer.html">申明</a> 
<a href="ContactUs.html">聯系我們</a> 
</p> 
<p>Copyright © 2013</p> 
</div> 

因為使用了<div>元素，所以添加樣式表很容易。下面，就是為頁眉及其中的內容添加樣式的規(guī)則。

• 1-1 為<div>添加樣式，使頁眉具有藍色帶邊框

  .Header { 
    background-color: #7695FE; 
    border: thin #336699 solid; 
    padding: 10px; 
    margin: 10px; 
    text-align: center; 
  } 

• 1-2 為頁眉中的<h2>（這里是文章標題）添加樣式

  .Header h1 { 
    margin: 0px; 
    color: white; 
    font-size: xx-large; 
  } 

• 1-3 為頁眉中的子標題添加樣式

  .Header .Teaser { 
    margin: 0px; 
    font-weight: bold; 
  } 

• 1-4 為頁眉中的屬名添加樣式

  .Header .Byline { 
    font-style: italic; 
    font-size: small; 
    margin: 0px; 
  } 

其余的樣式參見附件。上述代碼實現的頁面的整體樣式如下：

上述頁面編寫規(guī)范，通過使用<div>，<span>元素把大部分的工作交給了樣式表。而通過<span>元素可以為處在其它元素中的少量文本添加樣式，通過<div>不僅可以為整個內容區(qū)塊添加樣式，還可以構建整個頁面的結構。

使用HTML5改造頁面

<div>是當今Web設計的必備元素，它是一個直觀、多用途的容器，可以通過它為頁面中的任何區(qū)塊應用樣式。但是<div>的問題在于：它本身不反映與頁面相關的任何信息。你在頁面中看到<div>元素時，你知道這是一個獨立的區(qū)塊，但是不知道這個區(qū)塊的意圖。

HTML5可以改進這種情況，可以把<div>換成具有描述性的語義元素，如<header>、<footer>。

• 1-5 使用HTML5具有描述性的語義元素

  <header class="Header"> 
  <h2>因為痛，所以叫青春</h2> 
  <p class="Teaser">寫給獨自站在人生路口的你</p> 
  <p class="Byline">[韓]金蘭都</p> 
  </header> 
   
  <div class="Content"> 
  <p><span class="LeadIn">青春</span>, 之所以艱難，是因為孤單。</p> 
  ......//完整代碼見附件 
  </div> 
   
  <footer class="Footer"> 
  <p class="Disclaimer">上述這些是譯的觀點</p> 
  <p> 
  <a href="#">關于我們</a> 
  <a href="#">申明</a> 
  <a href="#">聯系我們</a> 
  </p> 
  <p>Copyright © 2013</p> 
  </footer> 

上面的代碼中<header>和<footer>元素仍然使用了類名，這樣做的目的是不用立即修改樣式表。可不管怎么說，類名有點多余，所以最終就是把他們都刪掉。

• 1-6 使用HTML5的語義元素

  <header> 
  <h2>因為痛，所以叫青春</h2> 
  <p class="Teaser">寫給獨自站在人生路口的你</p> 
  <p class="Byline">[韓]金蘭都</p> 
  </header> 

修改之后，為語義元素應用的樣式表也應該做如下調整：

• 1-7 為<header>添加樣式，使頁眉具有藍色帶邊框

  header {  
     ... //與代碼1-1 的內容一樣
  }  

• 1-8 為<header>中的<h2>添加樣式

  header h1 {  
       ... //與代碼 1-2 內容一樣
  }  

• 1-9 為<header>中的子標題添加樣式

  header .Teaser {  
      ...//與代碼1-3內容一樣 
  }  

• 1-10 為<header>中的屬名添加樣式

  header .Byline {  
      ...//與代碼1-4內容一樣 
  }  

這兩種樣式都會得到相同的結果。