优先使用语义化标签：表重要性，表重音强调；和仅视觉修饰；/用于内容变更，/有特定语义；样式应由css统一控制以保障可访问性、seo与维护性。
HTML里调整文字格式，优先用语义化标签而非纯样式标签——<strong></strong> 比 <b></b> 更合适，<em></em> 比 <i></i> 更准确。浏览器渲染效果可能一致，但语义错误会影响可访问性、SEO 和未来维护。
什么时候该用 <strong></strong> 而不是 <b></b>
当文字需要传达「重要性」或「强强调」时，必须用 <strong></strong>。比如错误提示、操作警告、关键参数说明。
-
<strong></strong>会被屏幕阅读器加重语气读出，<b></b>只是视觉加粗，无语义 - 搜索引擎会把
<strong></strong>内容视作权重更高的关键词 - CSS 可以统一覆盖样式（如取消加粗），但语义保留；而
<b></b>一旦写死，后期无法区分“强调”和“仅需加粗”的场景 - 示例：
<p>请确认邮箱地址正确，<strong>否则无法接收验证邮件</strong>。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
<em></em> 和 <i></i> 的实际差异在哪
<em></em> 表示「重音强调」，用于改变句意的词或短语；<i></i> 仅表示「不同语调或类型」，比如外语词、术语、船名、生物分类名。
- 错用
<i></i>替代<em></em>会让语音辅助工具读错节奏，例如把「你*必须*保存」读成平调 - W3C 明确建议：斜体效果 ≠
<i></i>，而是由 CSS 的font-style: italic控制 - 常见误用：
<i>注意</i>应为<em>注意</em>；但<i>Homo sapiens</i>或<i>The New York Times</i>是正确用法
删除线和下划线标签的语义陷阱
<del></del> 和 <ins></ins> 不是「画条线」的工具，它们专用于标记内容变更历史；<s></s> 和 <u></u> 才是纯视觉替代方案，但仍有风险。
-
<del></del>表示已被移除的内容（如价格从 ¥199<del>¥199</del> <ins>¥149</ins>），应配合<ins></ins>使用 -
<s></s>仅表示「不再准确/不推荐」，比如过期优惠、已停用功能，不能用于价格对比 -
<u></u>在 HTML5 中语义变为「非文本标注」（如拼写错误下划线），默认被 UA 样式禁用；若只为装饰性下划线，应改用text-decoration: underline - 避免用
<u></u>做链接样式——它不提供任何交互暗示，且与默认链接下划线混淆
CSS 替代方案比内联标签更可控
即使用了语义标签，最终样式仍要靠 CSS 统一管理。硬编码 style="font-weight: bold" 或混用 <b></b> + CSS，会破坏样式层与结构层的分离原则。
- 全局控制加粗强度：
strong { font-weight: 700; }，比逐个改标签更高效 - 响应式强调：可用
@media调整小屏下<em></em>的字体倾斜度或颜色，<i></i>无法做到 - 可访问性开关：用户启用「高对比度模式」时，CSS 可自动强化
<strong></strong>的颜色差，而<b></b>无此能力 - 真正容易被忽略的是：所有这些标签默认都继承父元素的
font-size和line-height，如果父容器用了rem基准但未设font-size，内部<em></em>可能意外缩放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
