Html5之section元素

section元素简介：

Section元素用于对网站或应用程序中页面上的内容进行分开，它必须有标题，如果需要定义样式的话，那么必须使用div元素。

 

Section元素的使用注意事项：

1.不要将section元素作为设置样式的页面容器。

2.如果article、aside、nav元素更符合使用条件，就不使用section元素。

3.没有标题内容，不能使用section元素。

 

代码参考：

<article>
    <header>
        <ul>
            <li><a href="#">article头部分</a></li>
        </ul>
    </header>
   <!-- 其中一个模块： 1  添加样式，其他的不添加-->
    <section>
       <div id="sectionfont" >
           <header>
               <h1>第1个模块的标题，必须有标题</h1>
           </header>
           <p>第1个模块的标题内容</p>
           <footer>
               <small>第1个模块的版权</small>
               <hr>
           </footer>
       </div>
    </section>
 <script>
        var section=document.getElementById("sectionfont");
        section.style.fontSize="20px";
        section.style.color="red";
    </script>
  <!--  其中一个模块： 2-->
    <section>
        <header>
            <h1>第2个模块的标题，必须有标题</h1>
        </header>
        <p>第2个模块的标题内容</p>
        <footer>
            <small>第2个模块的版权</small>
            <hr>
        </footer>
    </section>
  <!--  其中一个模块： 3-->

    <section>
        <header>
            <h1>第3个模块的标题，必须有标题</h1>
        </header>
        <p>第3个模块的标题内容</p>
        <footer>
            <small>第3个模块的版权</small>
            <hr>
        </footer>
    </section>
</article>