dfn 标签用于标记文档中首次出现的被定义术语，仅标识“定义点”而非解释内容；正确用法是包裹术语本身，配合title属性、aria-describedby或自然结构提供解释。
dfn 标签用于标记文档中首次出现的、被定义的术语，它本身不提供解释内容，而是通过语义表明“此处是某个术语的定义位置”，配合上下文或title属性、邻近文本、aria-describedby等方式建立结构化关联。
dfn 的核心作用：标识“定义点”而非“解释内容”
HTML5 规范明确指出：<dfn></dfn> 表示一个术语在此处被定义（the term being defined），不是用来包裹解释文字的容器。它的价值在于语义标记——告诉浏览器、屏幕阅读器和搜索引擎：“这个词是本文档中的关键概念，其含义应从当前上下文中理解”。
- 正确用法：
<dfn title="一种用于描述网页结构的标记语言">HTML</dfn> 是超文本标记语言的缩写。 - 常见误用：把整段解释塞进
<dfn>解释文本...</dfn>—— 这违背语义，也不利于辅助技术识别。 - 推荐做法：让
<dfn></dfn>包裹术语本身，解释紧跟其后（同一句子或紧邻段落），保持自然阅读流。
建立结构化关联的实用方式
仅用 <dfn></dfn> 不足以自动关联术语与解释，需主动设计可访问、可解析的连接：
-
利用
title属性：为<dfn></dfn>添加简明定义，如<dfn title="客户端执行的脚本语言">JavaScript</dfn>。屏幕阅读器通常会读出该提示。 -
配合
id与aria-describedby：给解释性段落设id，再在<dfn></dfn>中引用，例如：<dfn id="semantics" aria-describedby="def-semantics">语义化</dfn><p id="def-semantics">指使用具有明确含义的 HTML 元素（如 <code><article></article>、<nav></nav>）来组织内容。 -
遵循自然文档结构：在说明性段落开头用
<dfn></dfn>引入术语，后接冒号或逗号，再展开解释，例如：<p><dfn>响应式设计</dfn>：一种使网页能适配不同屏幕尺寸的布局方法。</p>
与 dl、dt、dd 的协作关系
当需要集中呈现术语表时，<dfn></dfn> 可与定义列表配合使用，增强语义层次：
- 在
<dt></dt>中使用<dfn></dfn>标记术语，强调这是正式定义入口； -
<dd></dd>提供详细解释，形成清晰的“术语–定义”对； - 示例：
- CSS
- 层叠样式表（Cascading Style Sheets），用于控制网页外观和布局。
可访问性与工具支持要点
正确使用 <dfn></dfn> 能提升内容对辅助技术的友好度，但需注意实际支持情况：
- 主流屏幕阅读器（如 NVDA、VoiceOver）在遇到带
title的<dfn></dfn>时，通常会朗读提示，但不会自动跳转到解释段落； - 搜索引擎可能将
<dfn></dfn>作为关键词加权信号，有助于术语相关性的识别； - 避免嵌套或滥用：不要在
<dfn></dfn>内再放<dfn></dfn>，也不要用它替代<em></em>或<strong></strong>来强调语气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
