和是语义化HTML标签，专用于下标和上标，自动缩放字号、偏移基线并支持无障碍；不可用+vertical-align替代，因后者无语义且需手动调样式。
sub 和 sup 标签的基本用法
HTML 的 <sub></sub> 和 <sup></sup> 是语义化内联标签，专用于表示下标和上标，不是靠 CSS 模拟出来的视觉效果。它们会自动调整字体大小和垂直位置，且对屏幕阅读器有明确语义提示。
常见误用是拿 <span></span> + vertical-align 代替——这能“看起来像”，但丢失了数学、化学式等场景所需的可访问性与语义。
-
<sub></sub>适合化学式（如 H2O）、单位下标（如 CO2） -
<sup></sup>适合幂次（如 x2）、脚注标记（如 “见注1”）、温度单位（如 25 °C） - 两者都支持嵌套，但不推荐多层嵌套（如
<sup><sub>x</sub></sup>），浏览器渲染行为不一致，可读性差
与 CSS vertical-align 的关键区别
用 vertical-align: sub 或 vertical-align: super 能实现类似视觉效果，但本质不同：CSS 只是位移，不改变元素语义或默认字号缩放比例。
原生 <sub></sub>/<sup></sup> 在多数浏览器中默认将字号缩放到约 75%，并做基线偏移；而纯 CSS 方案需手动设 font-size 才接近，且无法被辅助技术识别为上下标。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 若内容含数学公式（如 E = mc2），必须用
<sup></sup>保证语义正确 - 若只是装饰性小角标（如品牌 logo 里的 ™），可用
<span style="vertical-align: super; font-size: 0.7em;">™</span>，无需强语义 - 注意：Chrome/Firefox 对
<sub></sub>的默认line-height处理略有差异，混排时可能造成行高不均，建议父容器设line-height: 1.4等固定值缓解
在表单或内联文本中使用的注意事项
<sub></sub> 和 <sup></sup> 是行内容器，可安全放在段落、链接、按钮内，但不能直接作为块级元素的子元素（如 <div> 下直接放 <code><sub></sub> 不违法，但语义不合理）。
- 避免在
<input>或<textarea></textarea>的value中写<sub></sub>—— 它们不解析 HTML，只会显示为纯文本 “<sub>2</sub>” - 若需在富文本编辑器里支持上下标，应监听用户操作后插入对应标签，而非依赖用户手敲 HTML
- 服务端渲染时注意 XSS：若上下标内容来自用户输入，需对
<sub></sub>/<sup></sup>标签做白名单过滤，或转义后仅允许其存在（不能放onclick等属性）
兼容性与现代替代方案
所有现代浏览器都完全支持 <sub></sub> 和 <sup></sup>，包括 IE9+。真正要注意的是数学密集型场景——比如复杂公式（积分、分式、多层指数），这时 <sub></sub>/<sup></sup> 显得力不从心。
- 简单上下标：坚持用原生标签，轻量、可靠、无障碍友好
- 涉及
<math></math>（MathML）的页面，可用<msub></msub>/<msup></msup>，但浏览器支持度不如 HTML 标签稳定（尤其 Safari 对 MathML 渲染较弱） - React/Vue 项目中，别写
<sup>{x}</sup>这种模板字符串拼接，应确保 JSX/模板引擎正确解析为真实标签，而不是被当作文本节点
最常被忽略的一点：上下标内容本身如果有空格或换行，会被浏览器按普通文本处理，导致意外断行或空白——始终把上下标内容写成紧凑无空格的字符串，例如用 <sup>max</sup> 而非 <sup> max </sup>。
