你有没有想过 <section> 和 <div> 元素之间有什么区别？
如果是，那么这个片段适合你！
<section> 标签在具有逻辑连接内容的网页中创建独立的部分。
<div> 标签是一个空容器，指定了一个部门或者一个部分。
在此代码中，我们将提供有关 <section> 和 <div> 元素的更多详细信息，并重点介绍它们之间的差异。
<section> 元素
根据 W3C 规范，<section> 标签表示该元素内的内容是分组的。
换句话说，内容与单个主题相关。
它必须是页面轮廓中的一个条目。
部分的示例可以是章节、选项卡式对话框中的多个选项卡式页面或者论文的编号部分。
例如，一个的主页可以分为许多不同的部分（介绍、新闻、联系信息等）。
如果元素内容的分组合理，我们可以使用 <article> 元素代替 <section>。
<section> 标记不是通用容器。
如果我们只需要一个元素用于样式目的或者脚本，最好使用 <div> 元素代替。
仅当元素的内容列在文档的轮廓中时，才适合使用 <section> 元素。
通过将标题（h1-h6 元素）包含为 <section> 标记的子元素来指定每个部分。
让我们看一个例子。
使用 <section> 元素的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h1>onitroad</h1>
<section>
<h2>onitroad Sections</h2>
<ul>
<li>Books</li>
<li>教程</li>
<li>代码</li>
<li>Tools</li>
<li>String Functions</li>
</ul>
</section>
<section>
<h3>教程</h3>
<p>HTML</p>
<p>CSS</p>
<p>Git</p>
<p>Javascript</p>
<p>PHP</p>
</section>
</body>
</html>
<div> 元素
<div> 元素仅代表其子元素，并没有特殊含义。
它可以与 lang、title 和 class 属性一起使用，以添加一组连续元素共有的语义。
这个元素也可以用在 <dl> 标签和 <dt> 和 <dd> 元素的包装组中。
当没有任何其他合适的元素时，建议使用 <div> 元素作为最后一个选项。
如果可能，使用其他更合适的语义元素（例如，<nav>、<main> 或者 <article>）为读者提供更好的可访问性。
但是，<div> 元素在其他情况下非常有用。
将 <div> 元素用于风格目的或者将各个段落包装在一个部分中，这些段落都需要进行类似的注释。
使用 <div> 标签的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
background-color: #87f5b3
}
</style>
</head>
<body>
<h1>Example</h1>
<div>
<h2>在<div> 标签中的标题</h2>
<p>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。</p>
</div>
<p>在<p> 标签中的文本</p>
</body>
</html>