HTML文本格式化概述

HTML提供了多种标签来格式化文本，这些标签可以分为两类：物理样式标签和语义化样式标签。根据W3C规范，语义化标记不仅改变文本外观，更重要的是传达内容的含义和结构。

最佳实践： 优先使用语义化标签（如、），因为它们不仅改变外观，还传达了内容的含义，对可访问性和SEO都有积极影响。

物理样式 vs 语义化样式

物理样式	语义化样式	描述	W3C建议
`<b>`	`<strong>`	粗体文本	优先使用`<strong>`
`<i>`	`<em>`	斜体文本	优先使用`<em>`
`<u>`	`<ins>`	下划线文本	优先使用`<ins>`
`<s>`	`<del>`	删除线文本	优先使用`<del>`

文本格式化的历史发展

HTML文本格式化经历了从纯视觉标记到语义化标记的演变：

HTML 2.0 (1995) - 引入了基本的文本格式化标签
HTML 4.01 (1999) - 强调样式与内容分离，推荐使用CSS
XHTML 1.0 (2000) - 更严格的标记规范
HTML5 (2014) - 重新定义语义化标签，引入新文本元素

基本文本格式化标签

粗体文本

                        粗体文本示例
                    
                        <!-- 物理样式 -->
<b>这是粗体文本</b>

<!-- 语义化样式 -->
<strong>这是重要文本</strong>

这是粗体文本（使用标签）

这是重要文本（使用标签）

W3C规范说明

根据W3C HTML5规范：

元素用于引起注意而不传达额外重要性
元素表示内容具有强烈的重要性、严肃性或紧急性
屏幕阅读器可能会以不同的语调或音量朗读内容

斜体文本

                        斜体文本示例
                    
                        <!-- 物理样式 -->
<i>这是斜体文本</i>

<!-- 语义化样式 -->
<em>这是强调文本</em>

这是斜体文本（使用标签）

这是强调文本（使用标签）

W3C规范说明

根据W3C HTML5规范：

元素用于以另一种声音或语气表达的文本
元素表示文本需要强调
嵌套的元素会增加强调程度

下划线和删除线

                        下划线和删除线示例
                    

                        <!-- 下划线 -->
<u>这是下划线文本</u>
<ins>这是插入的文本</ins>

<!-- 删除线 -->
<s>这是删除线文本</s>
<del>这是删除的文本</del>
                    

这是下划线文本（使用标签）

这是插入的文本（使用<ins>标签）

~~这是删除线文本~~（使用<s>标签）

~~这是删除的文本~~（使用<del>标签）

W3C规范说明

根据W3C HTML5规范：

元素用于表示非文本注释，如中文专有名词标注
<ins>元素表示添加到文档的内容
<s>元素表示不再准确或不再相关的内容
<del>元素表示从文档中删除的内容
<ins>和<del>可以包含cite和datetime属性

其他文本格式化标签

标记文本

                        标记文本示例
                    
                        <mark>这是标记的文本</mark>

这段文字包含标记的重要内容。

W3C规范说明

元素表示由于与上下文相关而被标记或高亮显示的文本，常用于：

搜索结果中的匹配项
引文中需要特别注意的部分
代码示例中的关键语法

小号文本

                        小号文本示例
                    
                        <small>这是小号文本</small>

正常文本小号文本

W3C规范说明

元素表示旁注和小字印刷，通常用于：

版权信息
法律文本中的免责声明
注释和侧边栏
不影响主要内容重要性的附属信息

上标和下标

                        上标和下标示例
                    
                        <!-- 上标 -->
X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>

<!-- 下标 -->
H<sub>2</sub>O

X² + Y² = Z²

H₂O

W3C规范说明

根据W3C规范：

元素定义上标文本
元素定义下标文本
常用于数学表达式、化学公式和脚注编号

代码和键盘输入

                        代码和键盘输入示例
                    

                        <!-- 内联代码 -->
使用<code>console.log()</code>在控制台输出信息。

<!-- 键盘输入 -->
按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。

<!-- 变量 -->
变量<var>x</var>的值是5。

<!-- 程序输出 -->
程序输出: <samp>Hello, World!</samp>
                    

使用console.log()在控制台输出信息。

按Ctrl + C复制文本。

变量x的值是5。

程序输出: Hello, World!

W3C规范说明

根据W3C规范：

<code>元素表示计算机代码片段
<kbd>元素表示用户输入
<var>元素表示变量或占位符
<samp>元素表示程序或系统的示例输出

引文和定义

引用

                        引用示例
                    

                        <!-- 短引用 -->
<q>知识就是力量</q> - 弗朗西斯·培根

<!-- 块引用 -->
<blockquote cite="https://example.com">
    <p>这是较长的引用内容，通常会单独显示为一个块。</p>
    <footer>- 引用来源</footer>
</blockquote>

<!-- 引文 -->
更多信息请参考<cite>HTML规范文档</cite>。
                    

知识就是力量 - 弗朗西斯·培根

这是较长的引用内容，通常会单独显示为一个块。

- 引用来源

更多信息请参考HTML规范文档。

W3C规范说明

根据W3C规范：

<q>元素表示短的内联引用
<blockquote>元素表示块级引用
<cite>元素表示作品（如书籍、文章、电影等）的标题
<blockquote>可以包含cite属性指明引用来源URL

定义和缩写

                        定义和缩写示例
                    
                        <!-- 定义 -->
<dfn>HTML</dfn>是超文本标记语言。

<!-- 缩写 -->
<abbr title="超文本标记语言">HTML</abbr>是网页的基础。

<!-- 时间 -->
会议将于<time datetime="2026-03-15T14:30">2026年3月15日下午2:30</time>举行。

HTML是超文本标记语言。

HTML是网页的基础。

会议将于2026年3月15日下午2:30举行。

W3C规范说明

根据W3C规范：

<dfn>元素表示正在定义的术语
<abbr>元素表示缩写或首字母缩略词
<time>元素表示机器可读的时间和日期
<abbr>应该包含title属性提供完整解释
<time>应该包含datetime属性提供机器可读格式

语义化文本格式化

语义化标签不仅改变文本外观，还传达了内容的含义：

标签	语义含义	使用场景	屏幕阅读器行为
`<strong>`	重要内容	警告、关键信息	可能改变语调或音量
`<em>`	强调内容	重点词汇、需要强调的部分	可能改变语调或语速
`<mark>`	标记/高亮	搜索结果、重要片段	可能特别指出"已标记"
`<small>`	旁注/小字	版权信息、免责声明	正常朗读
`<ins>`	插入的内容	文档修订、新增内容	可能指出"已插入"
`<del>`	删除的内容	文档修订、删除内容	可能指出"已删除"

屏幕阅读器支持： 语义化标签可以帮助屏幕阅读器用户更好地理解内容结构。例如，可能会被读作"重要"，而可能会改变语调。

语义化嵌套

语义化标签可以嵌套使用，增强内容的层次结构：

                        语义化嵌套示例
                    

                        <p>
    <strong>
        这个<em>非常重要</em>的警告
    </strong>
    需要你<mark>特别注意</mark>。
</p>
                    

这个非常重要的警告 需要你特别注意。

文本方向控制

双向文本

HTML提供了处理双向文本（如混合从左到右和从右到左文本）的元素：

                        双向文本示例
                    

                        <!-- 双向隔离 -->
<p>
    这句话包含<bdi>مرحبا</bdi>阿拉伯语问候。
</p>

<!-- 双向覆盖 -->
<p>
    <bdo dir="rtl">这句话将从右向左显示。</bdo>
</p>
                    

这句话包含مرحبا阿拉伯语问候。

这句话将从右向左显示。

W3C规范说明

根据W3C规范：

<bdi>元素隔离可能以不同方向格式化的一段文本
<bdo>元素覆盖当前文本方向
这些元素对于多语言内容非常重要

已废弃的文本格式化标签

以下标签在HTML5中已废弃，不应继续使用：

废弃标签	描述	替代方案
`<font>`	字体样式	CSS `font-family`, `size`, `color`
`<center>`	居中对齐	CSS `text-align: center`
`<strike>`	删除线	`<s>`或`<del>`
`<tt>`	电传文本	`<code>`或CSS `font-family: monospace`
`<big>`	大号文本	CSS `font-size`

注意： 使用已废弃的标签可能导致网页在不同浏览器中显示不一致，并且不符合现代Web标准。

W3C可访问性指南

文本格式化的可访问性最佳实践

使用语义化标签传达含义，而非仅依赖视觉样式
为缩写提供完整的title属性
使用<time>元素提供机器可读的日期时间
避免仅使用颜色传达信息
确保文本与背景有足够的对比度
为图标和符号提供文本替代方案

ARIA角色与文本格式化

在某些情况下，可以使用ARIA角色增强文本格式化的可访问性：

                        ARIA角色示例
                    

                        <!-- 强调角色 -->
<span role="emphasis">强调的内容</span>

<!-- 重要角色 -->
<span role="strong">重要的内容</span>

<!-- 但通常应优先使用原生HTML元素 -->
<em>强调的内容</em>
<strong>重要的内容</strong>
                    

ARIA第一规则： 如果存在具有所需语义的本地HTML元素或属性，应优先使用它而不是ARIA角色。

综合示例

在实际内容中组合使用各种文本格式化标签：

                        综合示例
                    

                        <article>
    <h1><abbr title="超文本标记语言">HTML</abbr>文本格式化学习指南</h1>
    
    <p>
        <strong>重要提示：</strong> 
        学习HTML时，<mark>语义化标签</mark>的使用非常重要。
    </p>
    
    <p>
        例如，使用<code>&lt;strong&gt;</code>而不仅仅是<code>&lt;b&gt;</code>，
        因为前者不仅让文本<em>看起来</em>重要，还<em>意味着</em>内容确实重要。
    </p>
    
    <blockquote cite="https://www.w3.org/TR/html52/">
        <p>优秀的HTML代码应该既是机器可读的，也是人类可读的。</p>
        <footer>- <cite>W3C HTML5.2规范</cite></footer>
    </blockquote>
    
    <p>
        化学公式：H<sub>2</sub>O <br>
        数学公式：E = mc<sup>2</sup> <br>
        键盘快捷键：按<kbd>Ctrl</kbd> + <kbd>S</kbd>保存文档
    </p>
    
    <p>
        最近更新：<time datetime="2026-01-15">2026年1月15日</time>
    </p>
    
    <p><small>版权所有 © 2026 当发网</small></p>
</article>
                    

HTML文本格式化学习指南

重要提示： 学习HTML时，语义化标签的使用非常重要。

例如，使用而不仅仅是，因为前者不仅让文本看起来重要，还意味着内容确实重要。

优秀的HTML代码应该既是机器可读的，也是人类可读的。

- W3C HTML5.2规范

化学公式：H₂O
数学公式：E = mc²
键盘快捷键：按Ctrl + S保存文档

最近更新：2026年1月15日

浏览器兼容性

现代浏览器支持情况

大多数现代浏览器对HTML5文本格式化标签有良好支持：

元素	Chrome	Firefox	Safari	Edge
<strong>, <em>	1.0+	1.0+	1.0+	12.0+
<mark>	6.0+	4.0+	5.0+	9.0+
<time>	6.0+	4.0+	5.0+	9.0+
<bdi>	16.0+	10.0+	6.0+	79.0+

提示： 对于不支持的旧版浏览器，这些元素通常会以默认样式显示，不会导致功能问题。

动手练习

创建一个使用多种文本格式化标签的HTML页面：

                        练习任务
                    

                        <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本格式化练习</title>
</head>
<body>
    <h1>我的学习笔记</h1>
    
    <p>
        <strong>今天学习了HTML文本格式化</strong>，发现
        <mark>语义化标签</mark>非常重要。
    </p>
    
    <p>
        例如，<code>&lt;strong&gt;</code>和<code>&lt;em&gt;</code>
        比<code>&lt;b&gt;</code>和<code>&lt;i&gt;</code>
        更有语义价值。
    </p>
    
    <blockquote>
        <p>知识就是力量。</p>
        <footer>- <cite>弗朗西斯·培根</cite></footer>
    </blockquote>
    
    <p>
        化学式：H<sub>2</sub>SO<sub>4</sub> <br>
        数学式：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
    </p>
    
    <p>
        键盘快捷键：<kbd>Ctrl</kbd> + <kbd>C</kbd> 复制
    </p>
    
    <p>
        学习时间：<time datetime="2026-01-15T14:30">2026年1月15日下午2:30</time>
    </p>
    
    <p><small>最后更新于今天</small></p>
</body>
</html>
                    

下一步学习

掌握文本格式化后，继续学习：

1

链接与导航

学习创建超链接和网站导航

继续学习

2

图像与多媒体

学习在网页中嵌入图像和多媒体内容

继续学习

3

语义化HTML

深入学习HTML5语义化元素和最佳实践

继续学习