引入
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><p></code>。</p>如果要展示多行代码,通常会配合 <pre> 使用。
<pre><code><p>这是一段文字</p></code></pre><pre> 会保留文本中的空格和换行。
实体字符
有些字符在 HTML 中有特殊含义,不能直接当普通文字写。
常见实体字符:
<表示<>表示>&表示& 表示空格
<p>段落标签写作:<p></p></p>如果直接写 <p>,浏览器可能会把它当成真正的 HTML 标签解析。
特点
- 标题标签用于表达内容层级
- 段落标签用于组织普通文本
- 换行符只负责换行,不负责分段
- 不要为了样式滥用标题标签
<strong>、<em>这类标签带有语义,不只是视觉效果<br>、<hr>是空元素,不需要结束标签- 文本标签能帮助搜索引擎和辅助工具理解页面结构
- 如果只是想改颜色、大小、间距,优先交给 CSS 处理
注意事项
- 不要用很多个
<br>来制造大段空白,页面布局应该交给 CSS - 不要为了字体变大就乱用
<h1>、<h2> <b>和<strong>都可能显示为加粗,但<strong>更强调“重要”<i>和<em>都可能显示为斜体,但<em>更强调“语气”- 展示 HTML 标签本身时,要使用
<和>这类实体字符
理解
文本标签的重点不是让文字“看起来怎样”,而是告诉浏览器和搜索引擎“这段文字是什么”。
可以把文本标签理解为给文字加上身份:这段是标题、这段是正文、这个词很重要、这段内容是引用。
样式可以后面用 CSS 改,但 HTML 先要把文字结构写清楚。