理解 HTML 中 <sub> 标签的作用与语义
掌握 <sub> 标签在化学公式、数学表达式和脚注中的典型应用场景
能够正确编写包含下标文本的 HTML 代码
了解 <sub> 标签的语法结构与可用属性
<sub>HTML 中的 <sub> 标签用于定义下标文本。被该标签包裹的内容会以比正常文本更小的字号显示，并且位置略低于基线（baseline）。这种格式常用于以下场景：
化学分子式（如 H₂O）
数学表达式（如 xₙ、E = mc²）
文献或文章中的脚注标记（如 内容¹）
<sub>下标内容</sub><sub> 是一个行内元素，可嵌套在段落、标题或其他文本容器中。它没有专属的 HTML 属性，仅支持通用的全局属性（如 class、id、style 等）。
水的分子式 H₂O
<!DOCTYPE html>
<html>
<head>
<title>下标示例</title>
</head>
<body>
<h1>使用 <sub> 标签</h1>
<p>化学公式示例：H<sub>2</sub>O</p>
<p>数学表达式示例：E = mc<sub>2</sub></p>
<p>脚注示例：水分子包含两个氢原子<sub>1</sub></p>
</body>
</html>
在上述代码中：
H<sub>2</sub>O 渲染为 H₂O，其中 “2” 作为下标，表示两个氢原子。
类似地，mc<sub>2</sub> 显示为 mc₂。
脚注标记 <sub>1</sub> 将数字 “1” 显示为下标，通常配合参考文献使用。
变量下标 x
<!DOCTYPE html>
<html>
<head>
<title>HTML sub 标签</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">技术笔记</h1>
<h2>数学公式</h2>
<h2>x<sub>n</sub> + y<sub>n</sub></h2>
</body>
</html>此例中，x<sub>n</sub> 和 y<sub>n</sub> 分别渲染为 xₙ 和 yₙ，表示带有下标的变量，常见于数列、向量或矩阵索引等数学场景。
注意：虽然视觉上
<sub>会缩小并下移文本，但其主要目的是语义化标记，而非单纯样式控制。若仅为视觉效果而无语义需求，建议使用 CSS 的vertical-align: sub配合font-size调整。
<sup> 区别<sub> 标签用于定义语义上的下标文本，具有明确的排版和含义。
主要应用于化学式（如 H₂O）、数学变量下标（如 xₙ）和脚注编号。
该标签无专用属性，仅支持 HTML 全局属性。
不应将 <sub> 用于纯视觉效果；若无语义需求，应优先考虑 CSS 实现。
注意区分 <sub>（下标）与 <sup>（上标），避免在平方、指数等场景误用。
为什么在 HTML 中使用 <sub> 标签比直接用 CSS 设置下标样式更合适？请从语义化和可访问性角度分析。
请指出以下代码中的错误，并给出正确写法：
<p>爱因斯坦质能方程：E = mc<sub>2</sub></p>如何使用 <sub> 和 <sup> 标签共同表示一个复杂的化学离子，例如硫酸根离子 SO₄²⁻？