p 标签内直接使用 sub 和 sup 合法且语义正确，浏览器默认渲染为下标/上标；显示不明显主因是默认 font-size 和 vertical-align 偏移过小，可通过内联 style 微调 font-size（0.65–0.8em）和 vertical-align（负 em 值）优化。

HTML 中 p 标签里用 sub 和 sup 的基本写法

直接在 p 里放 sub 或 sup 是完全合法的，浏览器默认渲染为下标或上标，无需额外 CSS。比如化学式 Hsub2O、平方单位 msup2，都可直接写：

<p>水的化学式是 H<sub>2</sub&gt>O。</p>
<p>面积单位常用 m<sup>2</sup>。</p>

为什么有时下标/上标显示不明显？

不是语义或结构问题，而是默认字体尺寸和垂直偏移太小，尤其在移动端或某些字体下容易看不清。常见表现是数字几乎和正文齐平，只是略小一点。

• sub 和 sup 默认 vertical-align 是 sub / super，但具体像素偏移由浏览器决定，不统一
• 若父元素用了 line-height 过大，会进一步弱化视觉差异
• 部分字体（如等宽字体或无衬线体）本身缺乏上下标字形优化

需要更稳的显示效果时怎么微调？

加轻量级内联样式即可，不破坏语义，也避免全局污染。重点控制两个属性：font-size 和 vertical-align：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<p>反应式：CO<sub style="font-size: 0.75em; vertical-align: -0.25em;">2</sub> + H<sub style="font-size: 0.75em; vertical-align: -0.25em;">2</sub>O ⇌ H<sub style="font-size: 0.75em; vertical-align: -0.25em;">2</sub>CO<sub style="font-size: 0.75em; vertical-align: -0.25em;">3</sub></p>

注意：vertical-align 值用负 em 更安全，比 px 更适配缩放；font-size 推荐 0.65–0.8em 区间，太小易误读，太大失真。

立即学习“前端免费学习笔记（深入）”；

别踩这些坑

实际项目中容易忽略的细节：

• 不要用 span + class 模拟上下标——丢失语义，影响可访问性（屏幕阅读器无法识别）
• 避免嵌套 sub 里面再套 sup（如 x_i²），多数浏览器支持但渲染不可控，建议改用 MathML 或图片
• sub/sup 不能包含块级元素（如另一个 p 或 div），否则 HTML 验证失败，部分浏览器会自动闭合标签
• 如果整段文本都需要上下标风格（比如脚注编号列表），优先考虑 CSS 伪元素 + data- 属性，而不是滥用 sub

实际用的时候，先按原生标签写，再根据视觉反馈决定是否加那两行 style。语义和可访问性永远比“看起来像”重要。