<q id="GzbXl"><td id="GzbXl"></td></q>
<ol id="GzbXl"></ol>

    <datalist id="GzbXl"><cite id="GzbXl"><col id="GzbXl"></col></cite></datalist>

        想自学教程的朋友,就来微帮教程网。
        微帮教程网
        当前位置: 主页 > 图文 > 网页制作教程 >

        <section>标签的用法

        发布时间:2020-05-26 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> 的语义性。

        相关文章