HTML文本格式化用于控制网页中文字的显示样式，包括加粗、斜体、下划线、删除线、上标、下标等效果。这些标签通过语义化方式标记文本内容，同时可结合CSS进一步控制样式。以下是HTML文本格式化的详细解析：
一、基础文本格式化标签
1. 加粗与强调
<strong>：语义化加粗，表示重要内容（默认加粗显示）。<b>：仅视觉加粗，无额外语义（适合非关键文本）。<em>：语义化斜体，表示强调（默认斜体显示）。<i>：仅视觉斜体，无额外语义（适合图标、术语等）。
示例代码：
<p>这是<strong>重要</strong>的内容，而<b>粗体</b>仅用于视觉。</p>
<p>这是<em>强调</em>的文本，而<i>斜体</i>仅用于样式。</p>输出效果：
- 这是重要的内容，而粗体仅用于视觉。
- 这是强调的文本，而斜体仅用于样式。
2. 删除线与下划线
<del>：表示被删除的文本（默认带删除线）。<s>：类似<del>，但语义更弱（适合过时信息）。<ins>：表示新插入的文本（默认带下划线）。<u>：仅视觉下划线，无额外语义（避免滥用，通常用CSS替代）。
示例代码：
<p>原价：<del>100元</del>，现价：<ins>80元</ins>。</p>
<p>过时信息：<s>旧版本</s>，更新版本：<u>新版本</u>。</p>输出效果：
- 原价：
100元，现价：80元。 - 过时信息：
旧版本，更新版本：新版本。
3. 上标与下标
<sup>：上标文本（如数学公式、指数）。<sub>：下标文本（如化学符号、脚注）。
示例代码：
<p>水的化学式：H<sub>2</sub>O。</p>
<p>平方公式：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>。</p>输出效果：
- 水的化学式：H₂O。
- 平方公式：a² + b² = c²。
4. 预格式化文本
<pre>：保留文本中的空格、换行和缩进（适合代码或诗歌）。
示例代码：
<pre>
function hello() {
console.log("Hello, World!");
}
</pre>输出效果：
function hello() {
console.log("Hello, World!");
}5. 引用与缩写
<q>：短引用（自动添加引号）。<blockquote>：长引用（独立成段，适合段落引用）。<abbr>：缩写（可配合title属性显示完整含义）。
示例代码：
<p>短引用：<q>知识就是力量</q>。</p>
<blockquote>长引用：这是弗朗西斯·培根的名言。</blockquote>
<p>缩写：<abbr title="World Wide Web">WWW</abbr>。</p>输出效果：
- 短引用：“知识就是力量”。
- 长引用：
这是弗朗西斯·培根的名言。
- 缩写：WWW（鼠标悬停显示完整含义）。
二、HTML文本格式化与CSS的结合
虽然HTML标签能实现基础样式，但更推荐通过CSS控制样式，以保持语义与样式的分离。
示例代码：
<style>
.custom-bold { font-weight: bold; color: red; }
.custom-italic { font-style: italic; text-decoration: underline; }
</style>
<p>这是<span class="custom-bold">自定义加粗</span>的内容。</p>
<p>这是<span class="custom-italic">自定义斜体</span>的内容。</p>输出效果：
- 这是自定义加粗的内容（红色加粗）。
- 这是自定义斜体的内容（带下划线）。
三、HTML文本格式化的注意事项
- 语义化优先：
- 使用
<strong>而非<b>，使用<em>而非<i>，以提升可访问性和SEO。
- 避免滥用样式标签：
- 下划线
<u>可能被误认为链接，建议用CSS替代。
- 兼容性：
- 所有现代浏览器均支持上述标签，但旧版浏览器可能对
<del>、<ins>的样式支持不一致。
- 移动端适配：
- 预格式化文本
<pre>在移动端可能显示过宽，需通过CSS控制。
四、HTML文本格式化的完整示例
<!DOCTYPE html>
<html>
<head>
<title>HTML文本格式化示例</title>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<h1>文本格式化示例</h1>
<p>这是<strong>重要</strong>的内容，而<b>粗体</b>仅用于视觉。</p>
<p>原价：<del>100元</del>，现价：<ins>80元</ins>。</p>
<p>水的化学式：H<sub>2</sub>O，平方公式：a<sup>2</sup>。</p>
<pre>代码示例：
function hello() {
console.log("Hello!");
}
</pre>
<p>缩写：<abbr title="HyperText Markup Language">HTML</abbr>。</p>
<p>这是<span class="highlight">高亮显示</span>的文本。</p>
</body>
</html>五、总结
HTML文本格式化标签通过语义化方式标记文本内容，同时可结合CSS实现更灵活的样式控制。开发者应遵循以下原则：
- 优先使用语义化标签（如
<strong>、<em>）。 - 避免滥用样式标签（如
<u>），推荐用CSS替代。 - 复杂样式通过CSS实现，保持HTML结构清晰。
通过合理使用文本格式化标签，可以提升网页的可读性、可访问性和SEO效果。