標簽,
標簽的用法" /> 长沙飞禽走兽遥控器
想自學教程的朋友,就來教程巴巴。
當前位置: 主頁 > 圖文 > 網頁制作教程 >

<section>標簽的用法

發布時間:2012-02-29 16:38 點擊:
分享到:
【評論本教程】 【挑錯本教程】
------分隔線----------------------------

<section>標簽的用法

由于昨晚發了一篇文章
,有一個網友評論問<section> 的用法。所以現在舉例來說明一下:


html5引入了<section>標簽,用于描述文檔的結構,它同<div>標簽的意思一樣。但是在特定環境中,兩者又有明顯的區別。

w3對<section>的定義是:定義一個文檔的章節(可以擁有自己的<header>和<footer>)。
w3對<div>的定義是: 定義一個文檔的章節。(但似乎更適合用于外層的布局,缺少語義性。)


比如看一個案例:

<body>
  <header></header>
  <div id=“content”>
     <section></section>
     <section></section>
  </div>
  <footer></footer>
</body>

在這里,我用<section>來定義id為content的div里面的兩個章節/區域。當然此處你也可以直接把div用section代替,或者把里面的<section>改成<div>,因為此處還不能明顯的區分兩者的區別:
<section id=”content”>
   <section></section>
   <section></section>
</section>
或者:
<div id=”content”>
   <div></div>
   <div></div>
</div>


我們繼續舉例分析另外一個更明顯的區分<section>和<div>的案例:

<div id=”team”>
  <nav>
    <ul>
      <li>member1</li>
      <li>member2</li>
      <li>member3</li>
    </ul>
  </nav>
  <section id=”member1”>
    <article>
    <header><h1>member1</h1></header>
    <p>一個描述的段落</p>
    <p>另一個描述的段落</p>
    <section>
       <p>這里的描述段落在語義上于<section>外層的段落不是兄弟級別。</p>
       <p>這里的描述段落在語義上于<section>外層的段落不是兄弟級別。</p>
    </section>
    <p>又是另外一個段落描述,于最上面的兩個段落屬于兄弟級。</p>
    </article>
  </section>
<section id=”member2”>
    <article>
    <header><h1>member2</h1></header>
    <p>一個描述的段落</p>
    <p>另一個描述的段落</p>
    <section>
       <header><h1>這個<section>有分節的小標題,這里是這個分節的小標題</h1></header>
       <p>這里的描述段落在語義上于<section>外層的段落不是兄弟級別。</p>
       <p>這里的描述段落在語義上于<section>外層的段落不是兄弟級別。</p>
    </section>
    <p>又是另外一個段落描述,于最上面的兩個段落屬于兄弟級。</p>
    </article>
  </section>
<section id=”member3”>
    <article>
    <header><h1>member3</h1></header>
    <p>一個描述的段落</p>
    <p>另一個描述的段落</p>
    <section>
       <header><h1>這里是這個分節的小標題</h1></header>
       <p>這里的描述段落在語義上于<section>外層的段落不是兄弟級別。</p>
       <p>這里的描述段落在語義上于<section>外層的段落不是兄弟級別。</p>
       <footer>這里的內容對于這個<section>是一個腳部,它區別于上面的描述段落。</footer>
    </section>
    <p>又是另外一個段落描述,于最上面的兩個段落屬于兄弟級。</p>
    </article>
  </section>
</div>

在這個案例當中,我們用<div>標簽來布局整個最外層的章,而用<section>用來定義內部的章節。當然如果把整個文檔都看作是一個章節,那么也可以用<section>來代替<div>,但是建議不要使用<section>來代替該用<div>布局的地方,那些地方不能體現出<section> 的語義性。

相關文章
长沙飞禽走兽遥控器