首页 › HTML论坛 › html5中section元素详解

蝶舞风翎 發表於 2019-12-7 17:42:00

html5中section元素详解

<h1 style="text-align: center">html5中section元素详解</h1>
<h2>一、总结</h2>
<h3>一句话总结：</h3>
<h5>section元素 用来定义文章中的章节(通常应该有标题和段落内容)</h5>
<h5>section元素的作用就是给内容分段，给页面分区</h5>
<p>&nbsp;</p>
<h3>1、section元素 和 div元素的区别是什么？</h3>
<h5>div强调在形式上的独立性，section强调的是内容上的独立性，注意它的语义。</h5>
<h5>section可以看做 &lt;div id="section"&gt;&lt;/div&gt;</h5>
<p>&nbsp;</p>
<h3>2、article元素和section元素的区别是什么？</h3>
<h5>article元素更强调内容的独立性（比如说一篇文章）：可能有header和footer</h5>
<h5>section元素更强调内容的关联性（比如说两个段落，是相似的）：可能有标题和段落内容</h5>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>3、article元素和section元素和div的关联性是什么？</h3>
<h5>本质上都是带有语义的div块元素</h5>
<h5>分别可以看作&lt;div id="section"&gt;和&lt;div id="article"&gt;</h5>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>二、html5--2.4新的布局元素(3)-section</h2>
<p>&nbsp;</p>
<h3>学习要点</h3>
<ol>
<li>了解section元素的语义和用法</li>
<li>通过实例理解section元素的用法</li>
<li>article元素和section元素的区别和共同点</li>
</ol>
<p>&nbsp;</p>
<ol><ol>
<li>article元素（标签）</li>
<ul>
<li>用于定义一个独立的内容区块，比如一篇文章，一篇博客，一个帖子，论坛的一段用户评论，一篇新闻消息等.</li>
<li>article元素内可以嵌套其他元素，它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性，一般对于独立完整的内容才使用article元素，如果只是一段内容的话应该使用section元素。</li>
</ul>
</ol></ol>
<p>&nbsp;</p>
<ol><ol>
<li>section元素（标签）</li>
<ul>
<li>用来定义文章中的<span style="color: rgba(255, 0, 0, 1)"><strong>章节</strong></span>(通常应该有<span style="color: rgba(255, 0, 0, 1)"><strong>标题和段落内容</strong></span>)</li>
<li>用来定义文档中特定<span style="color: rgba(255, 0, 0, 1)"><strong>内容的区块</strong></span>，可视为一个区域分组元素，用来给页面上的内容分块。</li>
<li>section元素可以定义文档的<span style="color: rgba(255, 0, 0, 1)"><strong>主体内容</strong></span>。</li>
<li>用一句话来概括它的作用就是<span style="color: rgba(255, 0, 0, 1)"><strong>给内容分段，给页面分区</strong></span></li>
<li>注意他与div的区别，<strong><span style="color: rgba(255, 0, 0, 1)">div强调在形式上的独立性</span></strong>，<strong><span style="color: rgba(255, 0, 0, 1)">section强调的是内容上的独立性</span></strong>，注意它的<strong><span style="color: rgba(255, 0, 0, 1)">语义</span></strong>。</li>
</ul>
</ol></ol>
<p>&nbsp;</p>
<ol><ol>
<li>article元素和section元素的区别</li>
</ol></ol>
<p><em style="color: rgba(0, 0, 255, 1)">语义不同</em></p>
<ol><ol>
<ul style="background: rgba(255, 127, 80, 1)">
<li>article元素更强调内容的独立性（比如说一篇文章）</li>
<li>section元素更强调内容的关联性（比如说两个段落，是相似的）</li>
<li>article元素是独立完整的内容，section元素页面内容分块</li>
</ul>
</ol></ol>
<p><em style="color: rgba(0, 0, 255, 1)">相同点</em></p>
<ol>
<ul style="background: rgba(255, 127, 80, 1)">
<li>本质上都是<span style="color: rgba(0, 255, 255, 1)"><strong>带有语义的div块元素</strong></span></li>
<li>分别可以看作&amp;ltdiv id="section"&amp;gt和&amp;ltdiv id="article"&amp;gt</li>
</ul>
</ol><hr>
<h3>实例</h3>
<p><img src="https://images2018.cnblogs.com/blog/1163900/201711/1163900-20171128012622612-1513664800.png" alt=""></p>
<p><img src="https://images2018.cnblogs.com/blog/1163900/201711/1163900-20171128012659894-2093497989.png" alt=""></p>
<p><span style="color: rgba(255, 0, 0, 1); font-size: 18pt"><strong>用来定义文档中特定的区块</strong></span></p>
<p>&nbsp;<img src="https://images2018.cnblogs.com/blog/1163900/201711/1163900-20171128013106237-148014386.png" alt=""></p>
<p>&nbsp;<img src="https://images2018.cnblogs.com/blog/1163900/201711/1163900-20171128013343206-2020689713.png" alt=""></p>
<p>&nbsp;</p>
<div>&nbsp;</div>

</div>
<div id="MySignature" role="contentinfo">
    <div id="fry_added_part">
    <div class="fry_website">
      <div class="fry_website" style="color:#3c8dbc;padding: 10px 0;display:none;">
            我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：
            【读书编程笔记】fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
      </div>
      <div class="copyright" style="color: red;padding-bottom: 10px;">
            版权申明：欢迎转载，但请注明出处
            <div style="font-size: 12px">一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。</div>
      </div>
      <div id="fry_know_friends" style="color: red;padding-bottom: 10px;font-size: 22px;">
            <div style="display:none;"></div>
            <div style="display:none;">在校每年国奖、每年专业第一，加拿大留学，先后工作于华东师范大学和香港教育大学。</div>
            <div style="display:none;">2025-04-30：宅加太忙，特此在网上找女朋友，坐标上海，非诚勿扰，vx：fan404006308</div>
      </div>
      <div class="copyright" style="color: green;padding-bottom: 10px;">
            录播课资料github地址：https://github.com/fry404006308/fry_course_materials
      </div>
      <div style="display:none;"></div>
    </div>
    <div class="fry_tech_group" style="color: mediumpurple;">
      <div>
            AI交流资料群：753014672
      </div>
    </div>
    <div class="fry_recommend">
      <h2>作者相关推荐</h2>
      <div id="fry_recommend" style="padding-bottom: 40px">
      </div>
    </div>
    <style>
      #fry_added_part .inspiration_content{
            //max-height: 120px;
            overflow: auto;
            margin: 20px 0;
      }
      #fry_added_part .fry_inspiration .simple a{
            margin-right: 25px;
      }
    </style>
    <div style="display:none;" class="fry_inspiration">
      <div style="color: red;font-size: 20px;text-align: center;" class="title">
            感悟总结
      </div>
      <!--分为详细部分和简略部分-->
      <!--详细部分-->
      <div class="detail">
            <div class="url_set">
                <div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/13498246.html"></div>
                <!--<div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/14379366.html"></div>-->
                <!--<div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/14154624.html"></div>-->
            </div>
            <div class="content_set"></div>
      </div>
      <!--简略部分-->
      <div style="display: none;" class="simple">
            <div style="color: #FF9966;margin-bottom: 10px;">其它重要感悟总结</div>
            <div>
                感悟总结200813
                最近心境200830
                最近心境201019
                201218-210205
            </div>
      </div>
    </div>
</div><br><br>
来源：https://www.cnblogs.com/Renyi-Fan/p/12002720.html

查看完整版本: html5中section元素详解