引入

HTML 文本标签用于描述网页中的文字内容,例如标题、段落、换行等。

网页中大部分内容都是文字,所以文本标签是 HTML 最基础、最常用的一类标签。

正文

定义

定义

HTML 文本标签用于组织和标记网页中的文字内容,让浏览器知道哪些是标题、哪些是段落、哪些是强调内容。

文本标签不只是让文字显示出来,更重要的是表达文字在页面中的含义

标题

HTML 标题(Heading)是通过 <h1><h6> 等标签进行定义的。

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<h1> 通常表示页面最重要的标题,<h6> 重要性最低。

把标题标签仅用于标题文本。不要为了产生粗体文本而使用它们,粗体样式应该交给 CSS 或其他语义标签处理。

一般一个页面只建议有一个主要的 <h1>,其他标题按内容层级继续使用 <h2><h3>

段落

HTML 段落是通过 <p> 标签进行定义的。

<p>this is a 段落</p>

段落会自动和前后内容产生一定间距,适合放普通正文。

换行符

<br> 用于在文本中换行。

第一行<br>
第二行

<br> 是空元素,不需要写结束标签。

如果是两段独立内容,优先使用两个 <p>,不要用很多个 <br> 强行分段。

水平分割线

<hr> 用于表示内容之间的分隔。

<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>

<hr> 也是空元素,不需要结束标签。

加粗和强调

<strong> 表示重要内容,浏览器通常会显示为加粗。

<p>请注意:<strong>密码不要告诉别人</strong>。</p>

<em> 表示强调内容,浏览器通常会显示为斜体。

<p>这个地方需要<em>特别注意</em>。</p>

<strong><em> 不只是改变样式,它们还带有语义。

如果只是想改变外观,更适合交给 CSS。

普通加粗和斜体

<b> 通常用于让文字显示为加粗。

<i> 通常用于让文字显示为斜体。

<p><b>加粗文字</b></p>
<p><i>斜体文字</i></p>

它们更偏向视觉效果,语义没有 <strong><em> 明确。

标记文本

<mark> 用于标记或高亮一段文字。

<p>搜索结果中匹配到的内容可以用 <mark>HTML</mark> 标记。</p>

它常见的效果是黄色背景高亮。

删除和插入

<del> 表示被删除的内容,浏览器通常会显示删除线。

<ins> 表示新插入的内容,浏览器通常会显示下划线。

<p>价格:<del>99 元</del> <ins>79 元</ins></p>

这类标签适合表示内容发生了修改。

上标和下标

<sup> 表示上标,常用于脚注、指数。

<sub> 表示下标,常用于化学式。

<p>2<sup>3</sup> = 8</p>
<p>H<sub>2</sub>O</p>

小号文字

<small> 用于表示附属说明、版权信息等较不重要的文字。

<p><small>Copyright 2026</small></p>

短引用

<q> 用于表示短引用,浏览器通常会自动加上引号。

<p>他说:<q>HTML 是网页的骨架。</q></p>

如果是较长的一整段引用,可以使用 <blockquote>

<blockquote>
  HTML 用来描述网页的结构。
</blockquote>

代码文本

<code> 用于表示一小段代码。

<p>段落标签是 <code>&lt;p&gt;</code>。</p>

如果要展示多行代码,通常会配合 <pre> 使用。

<pre><code>&lt;p&gt;这是一段文字&lt;/p&gt;</code></pre>

<pre> 会保留文本中的空格和换行。

实体字符

有些字符在 HTML 中有特殊含义,不能直接当普通文字写。

常见实体字符:

  • &lt; 表示 <
  • &gt; 表示 >
  • &amp; 表示 &
  • &nbsp; 表示空格
<p>段落标签写作:&lt;p&gt;&lt;/p&gt;</p>

如果直接写 <p>,浏览器可能会把它当成真正的 HTML 标签解析。

特点

  • 标题标签用于表达内容层级
  • 段落标签用于组织普通文本
  • 换行符只负责换行,不负责分段
  • 不要为了样式滥用标题标签
  • <strong><em> 这类标签带有语义,不只是视觉效果
  • <br><hr> 是空元素,不需要结束标签
  • 文本标签能帮助搜索引擎和辅助工具理解页面结构
  • 如果只是想改颜色、大小、间距,优先交给 CSS 处理

注意事项

  • 不要用很多个 <br> 来制造大段空白,页面布局应该交给 CSS
  • 不要为了字体变大就乱用 <h1><h2>
  • <b><strong> 都可能显示为加粗,但 <strong> 更强调“重要”
  • <i><em> 都可能显示为斜体,但 <em> 更强调“语气”
  • 展示 HTML 标签本身时,要使用 &lt;&gt; 这类实体字符

理解

文本标签的重点不是让文字“看起来怎样”,而是告诉浏览器和搜索引擎“这段文字是什么”。

可以把文本标签理解为给文字加上身份:这段是标题、这段是正文、这个词很重要、这段内容是引用。

样式可以后面用 CSS 改,但 HTML 先要把文字结构写清楚。

引出

理解文本标签之后,可以继续学习 HTML 链接HTML 图片HTML 列表 等更具体的内容标签。