div 与 span

<div> 和 <span> 本身无样式——它们是容器，用来分组元素以便用 CSS 美化或用 JS 操作。

学完本章你将： 掌握 div 块级容器、span 行内容器、结合 CSS。

div（块级容器）

html

<div style="background-color: #f0f0f0; padding: 20px;">
  <h2>文章标题</h2>
  <p>文章内容……</p>
</div>

<div style="background-color: #e8f4f8; padding: 10px;">
  <p>另一个区块</p>
</div>

span（行内容器）

html

<p>
  这是 <span style="color: red; font-weight: bold;">红色加粗</span> 文字。
  还有 <span style="background-color: yellow;">黄色高亮</span>。
</p>

典型页面布局

html

<div style="width: 800px; margin: 0 auto;">
  <!-- 页头 -->
  <div id="header" style="background: #333; color: white; padding: 20px;">
    <h1>我的网站</h1>
  </div>

  <!-- 内容区 -->
  <div id="content" style="padding: 20px;">
    <p>主要内容……</p>
  </div>

  <!-- 页脚 -->
  <div id="footer" style="background: #eee; padding: 10px; text-align: center;">
    <span>&copy; 2024 我的网站</span>
  </div>
</div>

div 与 span

div 与 span

div（块级容器）

span（行内容器）

典型页面布局

🛠️ 学完试试这些工具