应优先使用语义化标签：表强重要性，表强调，/带时间语义的删改，标上下文相关词，专用于边注等次要信息。
<strong></strong> 和 <em></em> 应该优先于 <b></b> 与 <i></i> 使用——这不是“更酷”的选择，而是语义正确性的硬性要求。
为什么不能直接用 <b></b> 和 <i></i> 加粗或斜体？
浏览器确实会把 <b></b> 渲染为加粗、<i></i> 渲染为斜体，但它们不传达任何语义。屏幕阅读器不会特别强调这些内容，搜索引擎也不认为它们比普通文本更重要。
-
<strong></strong>表示内容有强重要性，会被读屏软件加重语气朗读 -
<em></em>表示强调（类似口语中重读某个词），有明确的语音节奏含义 -
<b></b>仅用于“视觉上突出但无额外权重”的场景，比如产品名、关键词、翻译中的术语（W3C 明确举例） -
<i></i>同样是纯样式用途：外文短语、船名、生物分类学名等
<del></del> 和 <ins></ins> 比 <s></s> 和 <u></u> 更值得习惯性使用
<s></s> 只是划掉文字，不说明“为什么删”；<u></u> 默认是下划线，但现代浏览器已默认禁用其下划线样式（需 CSS 强制），且易与链接混淆。
-
<del></del>带语义：表示内容被删除，可配合datetime属性记录删除时间 -
<ins></ins>表示插入，同样支持datetime，适合版本对比、编辑留痕 - 实际写法：
<p>原价<del datetime="2026-09-28">¥199</del>，现价<ins datetime="2026-09-29">¥149</ins></p>
别忽略 <mark></mark> 和 <small></small> 的真实用途
很多人把 <mark></mark> 当作“高亮笔”，把 <small></small> 当作“调小字号”，但它们的语义远比这具体：
-
<mark></mark>表示“在当前上下文中相关但非原文重点的内容”，典型场景：搜索结果页中匹配到的关键词 -
<small></small>不是通用缩放工具，而是专用于“边注、版权、法律条款等次要信息”，语义上属于“附属但需保留的文本” - 滥用
<small></small>会导致辅助技术降低其可访问性权重，甚至跳过朗读
真正难的不是记住哪些标签能变样式，而是每次敲下 时，先问一句：“我这段文字，对人和机器来说，到底意味着什么？”——格式化标签的坑，九成出在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
