div 与 span

我们已经能写文字、表格和表单。页面变长后，有时想把几段内容放进同一个容器，方便以后统一设置样式；或者给一句话中的一小部分命名，但那部分并不是重要提醒或代码。这时可以使用没有特定内容含义的通用容器。

div 把一组内容放在一起

div 是通用容器。默认情况下，它通常作为块级盒子排列，前后另起一块，宽度占据可用空间。但一个空 div 通常没有明显高度，也不会自动生成卡片边框或背景。

<div class="club-card">
  <h2>晨间阅读组</h2>
  <p>每周六上午十点。</p>
</div>

class 是给元素分组的属性。这里的 club-card 是我们自行取的类名，不是 HTML 自带的效果。给另一个 div 相同 class，表示它们属于同一类，未来 CSS 可以统一选中它们。class 可以重复；第一章介绍的 id 在同一文档中应唯一。一个元素也可以有多个类名，用空格分开。

span 标记文字中的一小段

span 也是通用容器，但默认以内联方式参与文字排布，通常不会自己另起一块：

<p>本周主题：<span class="topic">自然写作</span>，欢迎参加。</p>

没有 CSS 时，这个 span 中的文字可能与前后完全一样。这是正常的：class 只是名字，不会自动把“自然写作”涂成绿色。内联内容在窄屏中仍然可以随句子换行，“内联”不等于永远挤在一行。

先找有含义的元素，再考虑容器

如果内容本来是段落，就用 p；是重要提醒，就用 strong；是列表，就用 ul 或 ol。不要为了将来设置颜色，把所有内容都替换成 div 和 span。它们没有自动提供标题、链接或按钮的含义。尤其不要用 span 假装一个可点击按钮；需要按钮时已经有 button。

Lab 用同样的三个词比较 div 和 span：前者默认分块，后者默认连在文字流里。再给容器添加 class，观察为什么页面没有自动变色。下一节会介绍具有更明确含义的页面区域元素，帮我们减少不必要的通用容器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <h1>Club topics</h1>
  <div class="topic">Nature</div>
  <div class="topic">Travel</div>
  <div class="topic">Poetry</div>
</body>
</html>