dfn 和 abbr 是 html5 中语义明确的标签，分别用于标记首次定义的术语和需解释的缩略语；dfn 应仅包裹术语本身并配合 title 或自然句式给出定义，abbr 则通过 title 属性提供缩写全称，二者正确使用可提升可访问性、seo 与专业性。
dfn 和 abbr 是 HTML5 中两个语义明确、用途清晰的标签，分别用于标记“首次定义的术语”和“需解释的缩略语”。用对了，能提升可访问性、搜索引擎理解力与内容专业性；用错了，反而造成混乱或被辅助技术忽略。
dfn 标签：标记“正在被定义”的术语本身
dfn 不是解释容器，而是语义锚点——它告诉浏览器：“这个词，就在这里被正式定义”。解释必须紧随其后，不能塞进标签里。
- 正确写法：用
<dfn title="完整定义">术语</dfn>，title 提供简明释义，适合屏幕阅读器朗读 - 自然结构更推荐：把 放在句首，后接冒号或逗号，再写解释，例如：
<p><dfn>响应式设计</dfn>：一种使网页适配不同屏幕尺寸的布局方法。</p> - 集中管理术语时，可配合
<dl> <dt><dfn>...</dfn></dt> <dd>解释</dd> </dl>，强化“术语–定义”关系 - 避免错误：不要写成
<dfn>HTML 是超文本标记语言</dfn>—— 这样把解释包进去了，语义失效
abbr 标签：为缩略语提供可访问的全称
专为缩写服务，核心是通过 title 属性暴露完整形式。用户悬停可见，读屏软件可朗读全称，搜索引擎也能更好识别上下文。
- 只在首次出现时使用 ，比如
<abbr title="Cascading Style Sheets">CSS</abbr>；后续直接写 CSS 即可 - title 必须准确完整，不能简写：“JavaScript” 不该写成 “JS”，而应写 “JavaScript” 或 “JavaScript programming language”
- 适用场景包括：技术术语（API、DOM）、标准协议（HTTP、HTTPS）、机构名称（W3C、WHO）等专业缩写
- 不适用情况：日常敬称（Mr.、Dr.）、已完全词汇化的词（laser、scuba）、纯口语缩略（gonna、wanna）
两者搭配使用的典型场景
一篇前端入门文档中，可能同时出现术语定义与技术缩写：
- 先用 HTML 引入概念，紧接着说明“它常与 CSS 和 JavaScript 配合使用”
- 若某处要强调“语义化HTML”这个新术语，且其中含缩写，可嵌套：
<dfn>语义化<abbr title="HyperText Markup Language">HTML</abbr></dfn>（注意：abbr 可在 dfn 内，但不可反过来） - 避免滥用：同一页面中，不应对同一个缩写反复加 ；也不应在非定义位置对术语误用
浏览器支持与实用提醒
两个标签在所有现代浏览器中均原生支持，包括 Chrome、Firefox、Safari、Edge。IE8 及更早版本对 的提示支持不稳定，建议首次出现缩写时，辅以括号内文字说明（如“CSS（层叠样式表）”），兼顾兼容性。
它们对 SEO 没有直接排名作用，但通过改善可读性、降低跳出率、增强内容可信度，间接有利于搜索表现。更重要的是，这是面向所有人——包括视障用户、非母语读者、自动化工具——的基本内容责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
