语义化标签如、、、、、等，比、、等纯样式标签更可靠，能确保浏览器渲染一致、搜索引擎正确识别权重、屏幕阅读器准确传达含义，且语义独立于css样式存在。
直接用语义化标签比纯靠 <b></b> 或 <i></i> 更可靠，浏览器渲染一致，无障碍阅读器也能正确识别重点。
用 <strong></strong> 和 <em></em> 替代 <b></b> 与 <i></i>
前者表达“重要性”和“强调”，后者只控制粗体/斜体外观，无语义。搜索引擎、读屏软件依赖语义标签理解内容权重。
-
<strong></strong>默认加粗，但若未来 CSS 改变样式，语义仍保留；<b></b>一旦样式被覆盖，就只剩空壳 -
<em></em>支持嵌套，第二层会变成斜体+斜体（部分读屏器会重读），<i></i>不具备这种行为 - 旧项目里看到
<b></b>，别急着删——先确认它是否真只是视觉需求（比如品牌名固定加粗）；若是强调含义，必须换为<strong></strong>
用 <mark></mark> 高亮关键片段，而非 <u></u>
<u></u> 在 HTML5 中已不推荐：下划线长期被用户视为可点击链接，滥用会导致误操作。而 <mark></mark> 专为“需要引起注意的文本”设计，自带黄色背景，语义清晰。
- 搜索结果页高亮关键词、文档中标记修订内容，都该用
<mark></mark> - 若需自定义颜色，直接写 CSS：
mark { background-color: #ffeb3b; }，无需改标签 - 避免给
<mark></mark>套链接——它不是交互元素，也不该监听 click 事件
上标、下标必须用 <sup></sup> 和 <sub></sub>，别用字符实体
像 ²（²）这类数字上标，仅限极少数固定符号；数学公式、化学式（如 H2O）、单位（m3）必须用标签，否则行高错乱、缩放失真、无法选中完整内容。
-
<sup></sup>会自动调整上下间距，<sub></sub>同理；字符实体只是普通字符，挤在基线上 - 复合内容支持良好，例如：
<sup>第<em>n</em>次</sup>可正常嵌套 - 注意：不要在
<sup></sup>里塞块级元素（如<p></p>），会触发浏览器纠错，结构可能被破坏
代码块必须包裹在 <pre class="brush:php;toolbar:false;"></pre> + <code> 里
单用 <code> 只能保字体和基本样式，空格、换行全丢失；<pre class="brush:php;toolbar:false;"></pre> 才真正保留原始格式——这是展示函数签名、错误栈、JSON 响应的底线要求。
- 标准写法是
<pre class="brush:php;toolbar:false;"><code>...</code></pre>，顺序不能颠倒 - 如果代码含尖括号（如 JSX 或 XML），必须先对
和 <code>>做 HTML 实体转义，否则会被浏览器解析为标签 - 长代码建议加
tab-sizeCSS 属性控制缩进宽度，否则不同浏览器默认值不一致（Chrome 是 8，Firefox 是 4）
最易被忽略的是语义与样式的边界：一个 <strong></strong> 标签不该承担“让文字变红”的任务，那该交给 CSS；反过来，CSS 也不该强行把 <mark></mark> 的背景改成透明——它失去存在意义。格式化标签不是画笔，是说明书。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
