<dfn>标签仅用于标记文档中首次出现且被明确定义的专业术语，必须包裹术语本身并紧邻其定义语句，不可滥用作样式或重复标记；其术语提取优先级为：title属性值＞子元素title＞自身文本内容。

dfn 标签不是“加斜体的快捷键”，它只在术语**首次被明确定义**时才该用；滥用会导致屏幕阅读器误读、SEO 识别错乱，甚至破坏文档结构语义。

什么时候必须用 dfn？

仅当同时满足以下全部条件时才使用：

• 该术语在整篇文档中是第一次出现
• 紧随其后的文字（同一句子或紧邻段落）给出了它的明确定义，而非泛泛提及
• 你希望辅助技术（如屏幕阅读器）或工具（如术语提取脚本）能准确识别“此处正在定义这个词”
• 该词属于专业/领域内需澄清的概念（如 baseline、validator、URI），而非通用词（如 button、click）

dfn 里到底该放什么？——术语提取规则优先级

浏览器和辅助技术不会简单读取 dfn 内的可见文本，而是按固定顺序提取“被定义的术语”：

• 若有 title 属性，则以该属性值为准：<dfn title="HyperText Markup Language">HTML</dfn> → 定义的是 "HyperText Markup Language"
• 若内部只有一个子元素（如 <abbr>）且该子元素有 title，则取子元素的 title
• 否则，才取 dfn 自身的文本内容：<dfn>HTML</dfn> → 定义的是 "HTML"

注意：title 存在时，dfn 内部仍需有可见文本，不能为空。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

常见错误：看起来像定义，其实语义失效

这些写法会让 dfn 失去作用：

• 把 dfn 套在整句解释上：<dfn>HTML 是用于创建网页的标准标记语言。</dfn> —— 这违反规范，dfn 只能包裹术语本身
• 重复标记已定义过的术语：<p>我们之前提到的 <dfn>URI</dfn>…</p> —— 第二次出现不应再用 dfn
• 脱离定义上下文单独使用：<p>详见 <dfn>HTTP</dfn> 协议。</p> —— 前面没给出定义，dfn 就成了无源之水
• 嵌套使用：<dfn><dfn>foo</dfn></dfn> —— 一个 dfn 只对应一个被定义项

想跳转回定义？别只靠 id

给 dfn 加 id 是可行的，但要注意语义合理性：

• 只对真正需要锚点跳转的核心术语加 id，比如 <dfn id="def-baseline">baseline</dfn>
• 后续引用时用普通链接指向它：<a href="#def-baseline">baseline</a>
• 避免在定义句内部自链：<dfn id="x"><a href="#x">x</a></dfn> —— 破坏焦点逻辑，也违背“定义点”本意

最易被忽略的一点：很多人用 dfn 是因为默认斜体好看，结果在段落中间硬插一个空 dfn，或把它当成强调标签——这等于用语义标签干样式活，既没效果，还埋了可访问性雷。