应优先使用语义化标签：表关键强调，仅视觉加粗；表重读语气，表术语等中性斜体；表内容弃用，表拼写错误或专名；表旁注类内容，/专用于化学式、幂次等严格场景。

什么时候该用 <strong></strong> 而不是 <b></b>

语义清晰比视觉效果优先。如果一段文字需要向屏幕阅读器传达“这是关键警告”或“必须注意”，就用 <strong></strong>；如果只是想让某个词在视觉上更醒目（比如商品名、栏目标题），且不带语义权重，<b></b> 更合适。

常见错误现象：<b></b> 被滥用在所有加粗场景，导致无障碍支持弱、SEO 权重稀释。例如把导航菜单项全用 <b></b> 包裹，其实它们既不重要也不需强调。

• 表单错误提示：用 <strong></strong> —— <strong>邮箱格式不正确</strong>
• 品牌 slogan 中的关键词：用 <b></b> —— <p>我们提供<b>极速响应</b>与专业支持</p>
• 兼容性影响：所有现代浏览器对两者渲染一致，但旧版读屏软件可能忽略 <b></b> 的语音提示

<em></em> 和 <i></i> 的实际分工怎么划

<em></em> 表示语义上的重读，比如“我**没**说你要改代码”里的“没”；<i></i> 是中性斜体，用于外语词、术语、船名、生物分类等——它不暗示语气变化。

容易踩的坑：把“Python 是 <i></i>解释型语言”写成 <em></em>，其实“解释型”只是技术属性，无需重读；反过来，把“你**真的**确定要删除？”中的“真的”写成 <i></i>，就丢失了语气强度。

• 正确用法：<p>这个函数返回<em>布尔值</em>，不是字符串</p>（强调判断性质）
• 正确用法：<p>请参考<i>RFC 7231</i> 中关于状态码的定义</p>（标准文档名，非强调）
• 性能无差异，但语义错位会影响可访问性和内容复用（如 API 提取时误判重点）

删除线和下划线别再混用 <s></s> 与 <u></u>

<s></s> 表示内容已失效、不准确或被弃用（如原价、过期政策）；<u></u> 在 HTML5 中语义已重定义为“非文本注释”，典型用途是标拼写错误、中文专名号、或人工标注的语义边界——它不再是“单纯加下划线”的样式工具。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

错误现象：用 <u></u> 给超链接加下划线（应该用 CSS 的 text-decoration），或用 <s></s> 标记用户输入错误（应交由 JS + ARIA 处理）。

• 价格对比：<p><s>$199</s> $149</p>
• 拼写标注：<p>他写了<u>recieve</u>，正确拼写是 receive</p>
• 中文专名号（如古籍整理）：<p>《<u>论语</u>》曰：“学而时习之”</p>

为什么 <small></small> 不只是“字号小”，而 <sub></sub>/<sup></sup> 必须严格按场景用

<small></small> 的语义是“旁注类内容”，比如版权信息、法律条款、免责声明——浏览器默认缩小字号只是实现方式，不能把它当 CSS 的 font-size: smaller 替代品；<sub></sub> 和 <sup></sup> 则专用于化学式（H₂O）、数学幂（x²）、脚注编号等，语义不可替换。

最容易被忽略的一点：搜索引擎和结构化数据提取工具会识别这些标签的语义。把页脚版权写成 <span style="font-size: 0.8em"></span> 就丢失了机器可读的“这是 legal text”信号；把 H₂O 写成 <span class="sub">2</span> 可能导致学术数据聚合失败。

• 合规写法：<small>© 2026 Lobster AI. 保留所有权利。</small>
• 化学式必须用：<p>水的分子式是 H<sub>2</sub>O</p>
• 避免嵌套滥用：<sup><sub>x</sub></sup> 这种写法既无语义支撑，也无浏览器保障

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！