语义化首选和：表内容重要性（如错误提示），表语音重音或术语标识；仅用于纯样式；分别用于内联代码、多行代码块、程序输出；专指附属细则，非字号控制。
<strong></strong> 和 <em></em> 是语义化首选，<b></b> 和 <i></i> 仅用于纯样式需求。浏览器默认渲染效果接近，但语义不同——搜索引擎、屏幕阅读器和协作维护都依赖前者传达“强调”意图。
什么时候该用 <strong></strong> 而不是 <b></b>
当文本需要表达内容重要性提升时，比如错误提示、价格变动、法律条款关键句，必须用 <strong></strong>。它会被屏幕阅读器加重语气朗读，<b></b> 则只改变视觉粗细，无语义权重。
- ✅ 正确：
<strong>密码必须包含至少一个大写字母</strong> - ❌ 避免：
<b>密码必须包含至少一个大写字母</b>（语义丢失） - ⚠️ 注意：
<strong></strong>可嵌套，但连续嵌套三层以上会削弱可读性，建议用 CSS 类替代
<em></em> 和 <i></i> 的核心区别在语义重心
<em></em> 表示语音重音或逻辑强调，比如“你真的确定要删除？”；<i></i> 仅用于非强调类的斜体场景：外文词（<i>et al.</i>）、科技术语（<i>Homo sapiens</i>）、船名（<i>Titanic</i>）。
- ✅ 正确：
<em>请勿关闭此窗口</em>（语气强调） - ✅ 正确：
使用 <i>flexbox</i> 布局更简洁（术语标识） - ❌ 混用：
<i>警告：操作不可逆</i>（应为<strong></strong>或<em></em>）
<code>、<pre class="brush:php;toolbar:false;"></pre>、<samp></samp> 各自适用场景
三者都涉及代码/文本格式，但语义严格区分：<code> 表示一行内联代码片段；<pre class="brush:php;toolbar:false;"></pre> 保留空格与换行，适合多行代码块；<samp></samp> 表示程序输出结果（如终端日志）。
- ✅
<code>document.querySelector()（函数调用） - ✅
fetch('/api/data')<br> .then(res => res.json())（多行脚本） - ✅
<samp>Error: Cannot read property 'name' of undefined</samp>（运行时错误输出） - ⚠️ 注意：
<pre class="brush:php;toolbar:false;"></pre>默认无滚动，长代码需配合 CSSoverflow-x: auto
最容易被忽略的是 <small></small> 标签——它不是“缩小字号”的快捷方式，而是表示附属细则（如版权信息、免责声明），语义上属于次要内容。滥用它做视觉降级，会破坏信息层级和无障碍访问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
