标签,
标签的用法" />
想自学教程的朋友,就来教程巴巴。
当前位置: 新疆11选5 > 图文 > 网页制作教程 >

<section>标签的用法

发布时间:2012-02-29 16:38 点击:
分享到:
【评论本教程】 【挑错本教程】
------分隔线----------------------------

新疆11选5 www.7mb06.cn <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> 的语义性。

相关文章
  • 网友飞机偶遇出门工作的王菲,天后坐姿慵懒霸气,素颜也很美 2019-06-15
  • 沈阳举办首届锡伯族泥巴节 2019-06-15
  • 韩国:关注平昌冬奥会——朝啦啦队抵达  韩方举办欢迎晚宴 2019-06-14
  • 自家车给自家店拉货咋就成“非法营运”了? 2019-06-14
  • “一带一路”论坛 值得世界期待 2019-06-14
  • 哈利王子的首选蜜月地,我们帮你找到了! 2019-06-13
  • “中国区域经济50人论坛”成立大会暨第一次研讨会在京举行 2019-06-13
  • 公然侮辱救火牺牲消防战士 一网民被拘15日罚款1000元 2019-06-13
  • 菊花茶可以和什么东西一起泡 都有哪些功效呢-美食资讯 2019-06-12
  • 专家写的都是错误的,都是自己闭门造车,想出来的。 2019-06-12
  • 权威!个税起征点提至每月5000元,财政部最新解释来了 2019-06-11
  • 那是当然。我国的两弹一星都是在公有制企业里搞出来的。 2019-06-11
  • 【央视快评】让传统文化焕发新时代风采 2019-06-11
  • 红十字日:江西发布红十字会会歌《阳光·天使》 2019-06-10
  • 十九大党章修正案的新时代意蕴 2019-06-10
  • 152| 71| 943| 574| 239| 600| 577| 803| 976| 470|