表示内容高重要性（如警告），表示语气强调（如重音），二者是语义标签而非样式快捷键，用错会损害可访问性与seo。
<strong></strong> 和 <em></em> 是语义化强调标签，不是“加粗”和“斜体”的快捷方式；用错会削弱可访问性与 SEO 效果。
标题与段落：结构不能乱
标题必须按层级连续使用：<h1></h1> → <h2></h2> → <h3></h3>，跳级（比如 <h1></h1> 后直接 <h3></h3>）会让屏幕阅读器困惑，也影响搜索引擎对内容主次的判断。
<p></p> 是语义化的段落容器，不是换行工具。强行用多个 <p></p> 去“空行”或“对齐”，不如用 CSS 控制 margin；它默认有上下间距，且是块级元素，天然独占一行。
- 一个页面只应有一个
<h1></h1>（通常是主标题） -
<h2></h2>用于一级内容区块，<h3></h3>用于其子模块，以此类推 - 不要用
<br>替代<p></p>—— 它只是强制换行，不表达任何语义
<strong></strong> 和 <em></em>：不只是视觉效果
这两个标签传达的是语气和重要性，不是样式开关。浏览器默认渲染为加粗/斜体，但那只是表现层；真正关键的是它们会被读屏软件识别为“强调”或“重音”，影响信息传递节奏。
-
<strong></strong>表示内容具有高重要性或紧急性（如警告、必填项说明） -
<em></em>表示语气上的强调（如“我不是说你错了，而是说你可能漏看了”） - 避免用
<b></b>或<i></i>替代——它们纯属视觉标签，无语义，现代 HTML5 中已降级为“另有用途”（比如<i></i>可用于图标字体或外文术语）
删除、插入与高亮：内容变更要可追溯
<del></del>、<ins></ins> 和 <mark></mark> 都带明确语义，适合版本对比、编辑留痕或内容标注场景。
-
<del></del>表示已被移除的内容（常配合datetime属性记录时间） -
<ins></ins>表示新增内容，浏览器通常加下划线，但重点是它告诉辅助技术“这里加了新东西” -
<mark></mark>不是“高亮颜色”工具，而是标记与当前上下文相关的关键片段（如搜索结果中的关键词匹配） - 别用
<u></u>模拟<ins></ins>——<u></u>默认语义是“非标准文本”（如拼写错误、专有名词），滥用会误导
小号文本、上标与代码：别忽略默认语义
像 <small></small>、<sup></sup>、<sub></sub>、<code> 这些标签，浏览器渲染效果有限，但语义固定且不可替代。
-
<small></small>应用于免责声明、版权信息等次要内容，不是“缩小字体”的通用手段 -
<sup></sup>和<sub></sub>专用于数学/化学式（如 H2O、x2），用错会影响可访问性解析 <code>必须包裹真实代码片段，不能用来“让文字变等宽”——那是<pre class="brush:php;toolbar:false;"></pre>+ CSS 的事- 所有这些标签都是内联元素，嵌套在段落或标题中完全合法，无需额外包裹
<span></span>
最常被忽略的一点：语义标签一旦用错，修复成本远高于初期选对。比如把 <strong></strong> 当样式开关用了，后期想加无障碍支持或做内容抽取时，就得逐个手动校验——而这类问题在 DOM 结构里根本看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
