编辑“︁HTML格式化标签”︁（章节）

= HTML格式化标签 =

HTML格式化标签（HTML Formatting Tags）是用于定义文本样式和结构的HTML元素，它们能够在不使用CSS的情况下为文本添加基本的格式效果。这些标签对于网页内容的可读性和语义表达至关重要，特别是在需要强调、区分或标注特定文本时。

== 简介 ==
HTML格式化标签分为两类：
* '''物理样式标签''' - 直接改变文本的视觉呈现（如加粗、斜体）
* '''逻辑样式标签''' - 根据语义含义定义文本（如强调、代码片段）

这些标签都是'''行内元素'''（inline elements），意味着它们不会导致换行，只影响包裹的文本内容。

== 基本格式化标签 ==
以下是HTML中最常用的格式化标签：

=== 物理样式标签 ===
{| class="wikitable"
|-
! 标签 !! 效果 !! 示例代码 !! 输出效果
|-
| <code><nowiki><b></nowiki></code> || 加粗文本 || <code><nowiki><b>重要内容</b></nowiki></code> || '''重要内容'''
|-
| <code><nowiki><i></nowiki></code> || 斜体文本 || <code><nowiki><i>斜体字</i></nowiki></code> || ''斜体字''
|-
| <code><nowiki><u></nowiki></code> || 下划线 || <code><nowiki><u>带下划线</u></nowiki></code> || <u>带下划线</u>
|-
| <code><nowiki><s></nowiki></code> || 删除线 || <code><nowiki><s>原价100</s></nowiki></code> || <s>原价100</s>
|-
| <code><nowiki><sup></nowiki></code> || 上标 || <code><nowiki>E=mc<sup>2</sup></nowiki></code> || E=mc<sup>2</sup>
|-
| <code><nowiki><sub></nowiki></code> || 下标 || <code><nowiki>H<sub>2</sub>O</nowiki></code> || H<sub>2</sub>O
|}

=== 逻辑样式标签 ===
{| class="wikitable"
|-
! 标签 !! 语义含义 !! 示例代码 !! 典型显示效果
|-
| <code><nowiki><strong></nowiki></code> || 重要内容 || <code><nowiki><strong>警告！</strong></nowiki></code> || '''警告！'''
|-
| <code><nowiki><em></nowiki></code> || 强调文本 || <code><nowiki>请<em>立即</em>停止</nowiki></code> || 请''立即''停止
|-
| <code><nowiki><code></nowiki></code> || 代码片段 || <code><nowiki>使用<code>printf()</code>函数</nowiki></code> || 使用<code>printf()</code>函数
|-
| <code><nowiki><mark></nowiki></code> || 高亮标记 || <code><nowiki>搜索<mark>关键词</mark></nowiki></code> || 搜索<mark>关键词</mark>
|}

== 嵌套格式化标签 ==
格式化标签可以嵌套使用以实现组合效果：

<syntaxhighlight lang="html">
<p>
  这是<strong><i>既重要又强调</i></strong>的文本，
  包含<mark><u>高亮和下划线</u></mark>的组合效果。
</p>
</syntaxhighlight>

输出效果：
<div style="border:1px solid #ccc; padding:10px; background:#f9f9f9;">
这是'''<i>既重要又强调</i>'''的文本，包含<mark><u>高亮和下划线</u></mark>的组合效果。
</div>

== 现代最佳实践 ==
虽然这些标签可以直接使用，但在现代网页开发中建议：
1. 优先使用逻辑样式标签（如<code><nowiki><strong></nowiki></code>而非<code><nowiki><b></nowiki></code>），因为它们具有语义价值
2. 复杂样式应使用CSS实现
3. 不要仅为了视觉效果而滥用格式化标签

=== 与CSS的关系 ===
格式化标签的默认样式可以通过CSS覆盖：
<syntaxhighlight lang="css">
/* 修改所有strong元素的样式 */
strong {
  color: red;
  font-weight: bold;
  text-shadow: 1px 1px 1px #ccc;
}
</syntaxhighlight>

== 实际应用案例 ==
=== 学术论文片段 ===
<syntaxhighlight lang="html">
<p>
  根据爱因斯坦的质能方程<var>E</var>=<var>mc</var><sup>2</sup>，
  <mark>能量</mark>和<mark>质量</mark>可以互相转换。
  实验数据表明误差范围在±<sub>0.5</sub>%以内。
</p>
</syntaxhighlight>

=== 电商价格标注 ===
<syntaxhighlight lang="html">
<p>
  原价：<s>$199</s> 现价：<strong>$99</strong><br>
  <small>* 限时优惠，仅剩<mark>3天</mark></small>
</p>
</syntaxhighlight>

== 格式化标签的DOM表示 ==
在文档对象模型(DOM)中，格式化标签表现为行内节点：
<mermaid>
graph TD
  P[&lt;p&gt;元素] --> B[&lt;strong&gt;]
  P --> I[&lt;i&gt;]
  B -->|包含| Text1["重要文本"]
  I -->|包含| Text2["斜体文本"]
</mermaid>

== 数学公式中的使用 ==
格式化标签在显示数学公式时特别有用：
<math>
\oint_C \vec{B} \cdot d\vec{l} = \mu_0 I_{\text{enc}}
</math>
对应的HTML：
<syntaxhighlight lang="html">
<math>
  \oint_C \vec{B} \cdot d\vec{l} = \mu_0 I<sub>enc</sub>
</math>
</syntaxhighlight>

== 注意事项 ==
* 避免过度使用<code><nowiki><u></nowiki></code>标签，因为用户可能将其误认为超链接
* <code><nowiki><b></nowiki></code>和<code><nowiki><i></nowiki></code>在HTML5中仍有保留，但应优先考虑语义化标签
* 屏幕阅读器会根据逻辑标签调整阅读语气（如强调<code><nowiki><em></nowiki></code>内容）

== 总结 ==
HTML格式化标签为网页文本提供了基础的样式控制能力，虽然现代网页开发中CSS承担了主要的样式控制工作，但这些标签在以下场景仍然不可替代：
* 快速原型开发
* 语义化标记
* 无需CSS的基本格式需求
* 与数学公式结合使用

通过合理组合这些标签，开发者可以创建结构清晰、语义明确的文本内容。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML文本元素]]