应按语义选择html文本标签：表示内容强重要性，仅视觉加粗；表达语气强调，标识术语或不同语调；错用不影响显示但损害可访问性、seo与维护。
HTML 文本标签不是“用哪个好看就用哪个”，而是按语义选——<strong></strong> 表示内容重要，<b></b> 只是视觉加粗；<em></em> 表示强调语气，<i></i> 仅表示不同语调或术语。选错标签不影响页面显示，但会影响可访问性、SEO 和后期维护。
什么时候该用 <strong></strong> 而不是 <b></b>
两者都默认渲染为加粗文字，但语义完全不同：
-
<strong></strong>是语义标签，告诉浏览器和屏幕阅读器“这段内容具有强重要性”，比如警告、关键操作提示、价格变动 -
<b></b>是纯样式标签，仅用于“需要加粗但无特殊语义”的场景，比如产品名、关键词高亮、中文古籍中的人名（传统排版习惯） - 搜索引擎和辅助技术会忽略
<b></b>的语义权重，但会识别<strong></strong>的强调意图 - 现代 CSS 中，
b { font-weight: bold; }是默认样式，但你可以安全地重写它；而修改strong的样式不会削弱其语义
<em></em> 和 <i></i> 的区别常被忽略
它们都默认斜体，但用途不可互换：
-
<em></em>表示“语音强调”或“逻辑重音”，比如“我没说你错了”中的“没”——读出来时会加重语气 -
<i></i>表示“非默认语调”的文本，包括：外文词（<i>café</i>）、科技术语（<i>E. coli</i>）、船名（<i>Titanic</i>）、思想流（<i>What if…?</i>） - 某些 CMS 或 Markdown 解析器会把
*渲染成<em></em>，但若原文本只是术语而非强调，应手动替换为<i></i> - 屏幕阅读器对
<em></em>通常会改变语调，对<i></i>则可能仅略作停顿或不作处理
<small></small> 不是“缩小字号”的快捷方式
它的语义是“附属细则”，比如版权信息、免责声明、法律条款脚注：
-
<small>© 2026 All rights reserved.</small>合规且语义清晰 - 不要用它替代 CSS 的
font-size来做标题副标或按钮文字——那是样式问题，应交由 class 或 CSS 自定义 - 浏览器默认给
<small></small>设置font-size: small，但这个值是相对的（约 80% 父级字体），不是固定像素；在响应式设计中它会随父级缩放，反而比硬写12px更可靠 - 它不适用于“次要导航栏文字”或“列表项说明”这类 UI 元素——那些该用
<span class="text-sm"></span>+ CSS
<sub></sub> 和 <sup></sup> 必须配合语义使用
它们不是排版玩具，而是有明确数学/化学/语言学含义的内联元素：
-
<sub></sub>用于下标：化学式（H<sub>2</sub>O）、数学变量（x<sub>i</sub>）、脚注编号（但更推荐<footer></footer>+<aside></aside>结构） -
<sup></sup>用于上标：幂运算（a<sup>2</sup> + b<sup>2</sup>）、温度单位（25<sup>o</sup>C）、注册商标（HTML<sup>®</sup>） - 避免用它们实现“伪角标”效果（如价格旁的“NEW”标签）——那属于装饰性内容，应使用伪元素
::before或带 ARIA 的<span></span> - 它们本身不带任何 margin/padding，垂直偏移由浏览器内置样式控制；若需微调，优先用
vertical-align而非transform，后者会破坏基线对齐
真正容易出错的不是记不住标签名，而是把语义当样式用——比如用 <strong></strong> 实现按钮高亮，或用 <small></small> 做卡片摘要。HTML 标签的语义一旦写进源码，就成为结构的一部分，后续想改就得动 DOM 逻辑，而不是只改一行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
