dfn标签是html中用于语义化标记首次明确定义术语的内联元素，必须紧贴定义语境使用，不可仅作视觉装饰；其核心作用是提升可访问性与文档结构清晰度。
dfn 标签不是“加个斜体”或“标亮术语”的视觉装饰工具，它只在真正定义一个术语时才该用——而且必须紧贴定义语境，否则会破坏可访问性、误导搜索引擎和辅助技术。
什么时候该用 dfn？看定义是否真实发生
有效使用 dfn 的前提是：这个词正在被首次明确定义，且定义内容就在同一句或邻近结构中。维基百科类页面里，词条首段常含这种定义句，比如：
<p>一个 <dfn>URI</dfn> 是统一资源标识符，用于唯一标识互联网上的某类资源。</p>
这里 dfn 包裹的是被定义项 URI，后半句是它的定义。如果只是写“URI 是一种地址”，但没说明它“是什么”或“用来做什么”，就不算有效定义。
- ✅ 正确：术语首次出现 + 紧跟解释性谓语（“是…”“指…”“表示…”）
- ❌ 错误：在列表项里单独写
<li><dfn>API</dfn></li>，后面没定义 - ❌ 错误：同一页面多次对“HTTP”套
dfn，第二次起已非首次定义
dfn 和 abbr 混用常见翻车点
百科类站点常同时出现缩写与定义，但 abbr 和 dfn 语义不同，不能互相替代或嵌套滥用：
-
abbr只负责“这是缩写，全称是XXX”，例如<abbr title="Application Programming Interface">API</abbr> -
dfn负责“这个概念本身是什么”，例如<dfn>API</dfn> 是软件组件之间交互的契约接口 - ⚠️ 不要写
<dfn><abbr title="...">API</abbr></dfn>—— 既想定义又想展开，语义冲突；应择一：若重点是解释概念，用dfn+ 定义句；若重点是提示缩写，用abbr+title
跨段落定义怎么处理？别依赖 dfn 自动关联
维基条目有时把术语定义拆到多个段落（比如先提名称，再在下一段详述原理）。这时 dfn 单独存在毫无意义，必须人工建立语义链接：
- 给
dfn加id，并在定义段落用aria-describedby显式指向它：<p>本节讨论 <dfn id="cors">CORS</dfn>。</p> <p aria-describedby="cors">跨域资源共享（CORS）是一种浏览器机制…</p>
- 避免仅靠 CSS 或排版“暗示”关联，屏幕阅读器看不到视觉距离
- 不推荐用
title属性塞定义（如<dfn title="Cross-Origin Resource Sharing">CORS</dfn>），因为title仅触发悬停提示，对键盘/语音用户不可靠
实际渲染和 SEO 影响很弱，别为样式用它
所有现代浏览器都支持 dfn，但默认样式极简（Firefox/Safari 斜体，Chrome 不设样式），且无性能开销。但它对 SEO 几乎无直接加成：
- 搜索引擎可能提取
dfn内容构建知识图谱，但不会因此提升排名；滥用反而稀释关键术语信号 - 若只为让“TCP”看起来像术语，用
em或 CSS 更安全：<span class="term">TCP</span> - 最易忽略的一点：无障碍技术（如 NVDA、VoiceOver）会将
dfn读作“definition”，如果后面没接定义，用户会困惑“定义在哪？”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
