html语义化标签须按内容含义选用：表强重要性，仅视觉强调；表非文本注释，非下划线样式；用于高亮定位，用于语音重读；上下标、代码、小字标签均有严格适用场景。
HTML格式化标签不是“怎么好看怎么来”，而是“什么语义用什么标签”——选错标签，视觉可能一样，但对SEO、屏幕阅读器、后续维护全是隐患。
什么时候该用 <strong></strong> 而不是 <b></b>
两者都加粗，但浏览器和辅助技术处理方式完全不同：<strong></strong> 表示内容有强烈重要性（如安全警告、关键参数），会被屏幕阅读器加重语气读出；<b></b> 仅表示“要引起注意”，无语义权重，适合产品名、品牌词这类纯视觉强调。
- ✅ 正确：
<strong>密码错误超过5次将锁定账户</strong>（含严重后果） - ❌ 错误：
<strong>iPhone 16 Pro</strong>（品牌名无需语义强调，用<b></b>更准确） - ⚠️ 注意：
<b></b>和<i></i>在 HTML5 中已保留，但仅限“不带语义的视觉变体”，别把它当<strong></strong>的简写
<u></u> 标签现在到底能不能用
能用，但必须清楚它在 HTML5 中的语义已彻底改变：<u></u> 不再是“下划线样式”，而是“非文本注释”，比如拼写错误、中文专名号、校对标记。直接用它给普通关键词加下划线，会误导辅助技术，也违反语义规范。
- ✅ 合理：
<u> recieved </u>（标拼写错误）或<u>张三</u>（中文人名专名号） - ❌ 危险：
<u>立即购买</u>（用户会误以为是链接，且无语义支撑） - ? 替代方案：纯视觉下划线请用 CSS：
text-decoration: underline，配合自定义 class 控制范围
<mark></mark> 和 <em></em> 容易混淆的边界
<mark></mark> 是“高亮背景”，用于标识文档中需要被快速定位的片段（如搜索结果匹配词、法律条文重点句）；<em></em> 是“语音重读”，影响的是句子节奏和语气，不是视觉样式。
- ✅
<p>根据<mark>第27条</mark>规定……</p>（突出具体条款编号） - ✅
<p>你<em>真的</em>确定要删除所有数据？</p>（强调“真的”，语气转折） - ⚠️ 别混用：
<mark><em>危险</em></mark>没必要——<mark></mark>已含视觉提示，嵌套<em></em>反而干扰语义层级
上下标、代码、小字这些“小标签”的硬约束
<sup></sup> / <sub></sub>、<code>、<small></small> 都有明确不可替代的用途，滥用会导致结构混乱或渲染异常。
-
<sup></sup>和<sub></sub>必须用于数学/化学等有标准含义的上下文：如H<sub>2</sub>O、x<sup>2</sup>；别用来做“上角标价格”或“版本号”，那属于视觉装饰，应交由 CSS 处理 <code>只包裹真正的代码片段（如console.log()、git commit），不能包裹命令行输出或伪代码；整块代码用<pre class="brush:php;toolbar:false;"><code></code> 嵌套</pre>-
<small></small>专指法律声明、版权信息、免责声明等次要但需保留的正式内容，不是“字体调小”的快捷方式；想缩放文字请用 CSSfont-size
最常被忽略的一点：所有这些标签的语义价值，只在它们被正确嵌套、不与 CSS 强行覆盖时才成立。比如给 <strong></strong> 加 font-weight: normal，等于白写——既丢了语义，又没达成视觉目标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
