HTML语义化标签入门（12）

上一篇学习了 meta 标签，知道它主要用来描述网页的一些“元信息”，比如字符集、页面描述等。今天，我们的学习将进入一个新的阶段——语义化标签。

很多初学者在刚接触 HTML 的时候，容易把注意力放在“这个标签显示出来是大还是小、粗还是细”。但实际上，HTML 的核心并不是“外观”，而是结构和语义。

换句话说，HTML 就像是文章的“目录和大纲”，它告诉浏览器和搜索引擎：哪些是标题，哪些是正文，哪些是引用，哪些是强调。至于颜色、大小、位置这些外观效果，那是 CSS 的工作，不是 HTML 的重点。

所以，从今天开始，我们会逐步学习一些常见的语义化标签，理解它们真正的含义和用途，而不是只看它们“长得怎样”。

一、HTML 的三大部分

在正式学习语义化标签之前，我们先来回顾一下网页的基本组成。一个完整的网页，通常由三个部分构成：

1. 结构（Structure）
   • 由 HTML 决定。
   • 就像房子的地基和框架，负责定义“页面里有哪些内容，以及它们的层次关系”。
   • 比如：标题、段落、列表、图片、链接、页头、页尾等。
2. 表现（Presentation）
   • 由 CSS 决定。
   • 就像房子的装修，负责定义“这些内容看起来怎么样”。
   • 比如：颜色、字体大小、间距、对齐方式、背景等等。
3. 行为（Behavior）
   • 由 JavaScript 决定。
   • 就像房子里安装的电器，能让整个空间“动起来”。
   • 比如：点击按钮弹出提示、自动轮播图、表单验证等。

在这三者中，HTML 的任务就是 只负责结构，不负责样式。
这也就是为什么我们要学习“语义化标签”——因为语义化决定了网页结构是否清晰、是否利于搜索引擎理解、是否方便后续的样式和交互。

二、标题标签（H1 ~ H6）

在写文章时，我们常常会用“大标题”和“小标题”来组织内容，让整篇文章层次清晰。同样的，在 HTML 里也有一套专门表示标题的标签——<h1> 到 <h6>。

1. 六个层级的标题
   • <h1>：一级标题（最重要的标题）<h2>：二级标题<h3>：三级标题<h4>：四级标题<h5>：五级标题<h6>：六级标题（最不重要的标题）
   👉 这六个标签的作用，是用来表示内容的“重要程度”，而不是字体大小。虽然浏览器会默认把 <h1> 显示得比 <h6> 大，但这只是“默认样式”，真正的大小以后都可以用 CSS 来改。
2. SEO 与标题的关系
   搜索引擎在抓取网页时，会特别关注 标题。一般来说：
   • 网页中应该只有 一个 <h1>，它代表整页的核心主题，就像作文的大标题。
   • <h2> 和 <h3> 常用来分层次，组织小节内容。
   • <h4> 及以下标签用得比较少，因为重要性不高。
   如果在一个网页里写了多个 <h1>，搜索引擎就会“糊涂”，不知道哪个才是最核心的主题，从而影响 SEO 效果。
3. 块元素的特性
   <h1> ~ <h6> 都属于 块元素（Block Element）。
   • 块元素的特点是：独占一行。
   • 也就是说，即使后面有文字，也会被自动换到下一行。
   举个例子： <h1>这是一级标题</h1> <p>这是正文内容。</p> 显示效果中，“一级标题”会独占一行，然后“正文内容”自动换行到下一行。

总结一下：标题标签的重点在于 结构层级 和 语义意义，而不是它看起来有多大。

三、段落与标题组

1. <p>：段落标签

在文章写作里，我们会把内容分成一个个自然段，让读者更容易阅读。HTML 中，用 <p> 标签来表示段落。

• <p> 代表 paragraph（段落）。
• 它也是一个 块元素，会自动独占一行。
• 浏览器在显示段落时，默认会在段落与段落之间加一点间距。

👉 示例：

<p>这是第一段内容。</p>
<p>这是第二段内容。</p>

显示时，这两段文字会自动分开，并且有一定的上下间距。

2. <hgroup>：标题组

有时候，一篇文章可能会有“主标题 + 副标题”。如果我们单独使用多个 <h1> 或 <h2>，语义上就不太清晰。为了表示这些标题属于一个整体，我们可以使用 <hgroup> 标签。

• <hgroup> 用来把多个相关标题组合在一起。
• 常见场景：一篇文章的主标题和副标题。

👉 示例：

<hgroup>
  <h1>HTML 入门教程</h1>
  <h2>—— 从零开始学网页结构</h2>
</hgroup>

在这个例子里：

• <h1> 是大标题，告诉读者和搜索引擎“这篇文章的主题”。
• <h2> 是副标题，补充说明主题。
• <hgroup> 把它们组合在一起，语义更清晰。

小结：

• <p> 用于正文段落，独占一行。
• <hgroup> 用于“标题组”，让大标题和副标题形成一个整体。

四、强调类标签

在写文章的时候，我们常常会想 强调某个词语。比如“今天的作业必须完成”，这里的“必须”就要特别突出。HTML 提供了两个常见的强调标签：

1. <em>：语气上的强调

• em 是 emphasis 的缩写，表示“语气上的重读”。
• 浏览器默认会把 <em> 包裹的内容显示为 斜体。
• 它是一个 行内元素（inline element），不会换行。

👉 示例：

<p>今天天气<em>真不错</em>！</p>

显示效果中，“真不错”会变成斜体，语气上显得更突出。

可以把它理解成：说话时刻意加重语气。

2. <strong>：重要性的强调

• strong 代表“内容特别重要”。
• 浏览器默认会把 <strong> 包裹的内容显示为 加粗。
• 它同样是一个 行内元素。

👉 示例：

<p>你今天<strong>必须</strong>完成作业！</p>

显示效果中，“必须”会被加粗，表示这是重点，不能忽视。

可以把它理解成：说话时郑重提醒“这件事非常关键”。

3. <em> vs <strong> 的区别

• <em>：强调语气（说话的感觉更重）。
• <strong>：强调重要性（内容本身很关键）。
• 两者都属于 语义化标签，重点在于“含义”，而不是“样式”。

👉 小技巧：
如果只是想让字变粗、变斜，请不要直接用 <b>（加粗）、<i>（斜体），而是用 <strong> 和 <em>。因为前者只有样式意义，后者才有语义，搜索引擎和屏幕阅读器都能更好地理解。

小结：

• <em>：语气强调（斜体，行内元素）
• <strong>：重要强调（加粗，行内元素）
• 它们不会独占一行，可以和文字混排

五、引用标签

在写文章时，我们经常需要引用他人的话或者一段资料。HTML 里提供了两种常见的引用标签：

1. <blockquote>：长引用（块级元素）

• blockquote 用来表示一段较长的引用。
• 它是一个 块元素，会独占一行。
• 浏览器通常会给它默认的缩进效果，看起来和正文区分开。

👉 示例：

<p>鲁迅曾经说过：</p>
<blockquote>
  我从来没有说过这句话。
</blockquote>

显示效果中，这句话会缩进，明确告诉读者“这不是作者自己的话，而是引用的内容”。

2. <q>：短引用（行内元素）

• q 是 quote 的缩写，用于表示简短的引用。
• 它是一个 行内元素，不会换行。
• 浏览器会自动在前后加上引号。

👉 示例：

<p>孔子说过：<q>学而时习之，不亦说乎？</q></p>

显示效果中，这句话会直接加上引号，但仍然在一行中显示。

3. 两者的区别

• <blockquote>：引用段落内容，适合长引用，块级元素。
• <q>：引用短句，自动加引号，行内元素。

可以这样理解：

• 如果要引用一段完整的话，就用 blockquote；
• 如果只是引用一句话，就用 q。

小结：

• <blockquote>：长引用，块级，带缩进。
• <q>：短引用，行内，自动加引号。

六、换行标签 <br>

在写文章时，有时候我们需要在一句话里强制换行，但并不想另起一个段落。这个时候，就可以用 <br> 标签。

1. <br> 的作用

• br 是 break 的缩写，表示换行。
• 它是一个 空标签（没有结束标签）。
• 使用它后，文字会从当前位置直接换到下一行。

👉 示例：

<p>今天天气真不错<br>我们一起去公园玩吧</p>

显示效果中：

今天天气真不错
我们一起去公园玩吧

这里就通过 <br> 实现了换行。

2. 连续换行

如果想要多空几行，可以连续写多个 <br>：

<p>第一行<br><br>第三行</p>

显示效果中，“第一行”和“第三行”之间就会空一行。

3. <br> 和 <p> 的区别

• <p>：表示一个完整的段落，段落之间有语义上的分隔。
• <br>：只是强制换行，没有语义，更多是为了排版。

👉 小技巧：

• 写文章时，尽量用 <p> 来分段。
• <br> 更适合用于 诗歌、地址、签名 等需要人工换行的场景。

小结：

• <br>：换行符，行内插入换行。
• 适合短文本换行，而不是分段落。

七、块元素与行内元素总结

学完了标题、段落、引用、强调和换行等标签，你会发现它们在页面中有不同的表现方式。总结来说，HTML 标签大致分为两类：

1. 块元素（Block-level Elements）

• 特点：独占一行，从上到下排列。
• 浏览器在渲染时，块元素会自动把后面的内容换到新的一行。
• 常见的块元素：
  • <h1> ~ <h6>：标题
  • <p>：段落
  • <blockquote>：长引用
  • <div>：常用的通用容器（后面会学到）

👉 示例：

<h1>一级标题</h1>
<p>这是一段文字。</p>
<blockquote>这是一段引用内容。</blockquote>

每一个标签都会独占一行。

2. 行内元素（Inline Elements）

• 特点：不会独占一行，可以和文字混排。
• 适合在段落中修饰或强调局部内容。
• 常见的行内元素：
  • <em>：语气强调（斜体）
  • <strong>：重要强调（加粗）
  • <q>：短引用
  • <span>：通用行内容器（后面会学到）

👉 示例：

<p>你今天<em>必须</em>完成<strong>作业</strong>。</p>

显示效果中，“必须”会变斜体，“作业”会加粗，但它们仍然和其他文字在同一行显示。

3. 块元素 vs 行内元素