html语义标签各司其职：表段落边界，表重要性，表暂态突出，表附属性内容；滥用将损害可访问性、seo及维护性。
<p></p> 和 <strong></strong> 不是“换行+加粗”的快捷写法，它们各自承担明确的语义角色：前者定义段落边界，后者表达内容重要性。滥用会破坏可访问性和 SEO。
为什么 <p></p> 不能用 <br> 替代段落分隔
浏览器对 <p></p> 自动添加上下外边距（margin），且语义上表示一个完整思想单元；而 <br> 仅强制换行，无结构含义。
- 屏幕阅读器遇到
<p></p>会停顿并提示“段落”，遇到<br>则直接连读，影响理解 - CSS 中想统一调整段落间距？改
p { margin: 1em 0; }就行；若全用<br>，只能靠 JS 或冗余样式 hack - 在邮件模板或 CMS 富文本编辑器中，用户按回车通常输出
<p></p>，不是<br>—— 混用会导致渲染不一致
<strong></strong> 和 <b></b> 的关键区别在哪
<strong></strong> 表示内容有强重要性（语义），<b></b> 仅表示视觉加粗（表现）。现代标准里，二者默认都加粗，但行为完全不同。
- 辅助技术（如读屏软件）会加重朗读
<strong></strong>内容；<b></b>无此行为 - 搜索引擎把
<strong></strong>内文字视作关键词强化信号；<b></b>几乎无权重影响 - 如果只是想让品牌名变粗而不带强调意味（比如 logo 文字），用
<b></b>更准确；如果是警告信息“请立即保存”，必须用<strong></strong>
<mark></mark> 不是高亮笔，它的语义很具体
<mark></mark> 表示“在引用或上下文中暂态突出的内容”，比如搜索结果中的关键词、文档中标记的待审段落。它不是通用的视觉强调工具。
- 浏览器默认给
<mark></mark>加黄色背景，但颜色可被 CSS 覆盖；重点在于语义是否匹配场景 - 别用它替代
<span style="background: #ffeb3b"></span>做装饰性高亮 —— 那属于表现层，应交由 CSS 处理 - 在可访问性测试中，
<mark></mark>若包裹大段文字或嵌套在<strong></strong>里，会被视为语义冲突
<small></small> 的用途常被误读
<small></small> 不是“调小字号”的样式标签，而是专用于法律声明、版权信息、免责声明等附属性内容，HTML5 明确定义其语义为“细小印刷”（fine print）。
- 它会影响 outline（大纲）结构：某些阅读器会降级处理
<small></small>内容的层级优先级 - CSS 中重置
font-size不影响其语义，但若用它包裹主标题副标（如“v2.1.0 Beta”），就违背了规范意图 - 真正需要缩放文字？用
<span></span>+ class 更稳妥；<small></small>应只出现在页脚、表单提示、许可条款等位置
所有这些标签的底层逻辑是一致的：先决定「这段内容在文档中扮演什么角色」，再选对应标签。视觉效果永远是第二位的，CSS 才负责呈现。忽略这点，后期维护和无障碍适配成本会指数级上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
