title属性决定dfn所定义的术语，其值优先级最高且覆盖内部文本；dfn必须紧邻完整定义语句，不可孤悬或嵌套错位；缩略词需用全称作title，函数名等可省略；仅靠title无法保障可访问性，须配合语义上下文与ARIA补充。
title属性决定“被定义的是什么”，不是可选装饰
浏览器和屏幕阅读器提取dfn所定义的术语时，只认title属性值——它优先级最高，且一旦存在（哪怕为空），就不会 fallback 到内部文本。这意味着：<dfn title="Cascading Style Sheets">CSS</dfn> 定义的是 “Cascading Style Sheets”，不是 “CSS”；而 <dfn title="">fetch()</dfn> 定义的是空字符串，辅助技术可能直接跳过。
常见错误包括：
-
<dfn title="DOM">Document Object Model</dfn>—— 实际定义的是字符串 "DOM"，语义反转 -
<dfn title="see section 2.1">API</dfn>——title不是跳转提示，而是术语释义锚点 -
<dfn title="HTML">HTML</dfn>—— 值与文本重复，没提供新信息，等于没定义
必须紧邻完整定义语句，不能孤悬或嵌套错位
dfn不是视觉强调工具，也不是占位符。它只在“术语首次出现 + 紧接解释性语句”的上下文中生效。单独写 <dfn>DOM</dfn> 而无后续说明，浏览器会忽略其定义语义。
正确结构应为一句自洽定义，例如：
立即学习“前端免费学习笔记（深入）”；
<p><dfn title="Document Object Model">DOM</dfn> 是网页内容的编程接口，以树状结构表示 HTML 文档。</p>
失效场景包括：
- 放在
<h2></h2>里，定义却在下一段 - 塞进
<pre>或<code>块中——违反内联元素嵌套规则 - 父容器是
<div>或<td>，缺乏语义定义环境（需<p>、<section>、<dt>等） -
<dfn><dfn>term</dfn></dfn>—— 外层dfn的title被忽略
缩略词、函数名、符号的title用法差异很大
不同术语类型对 title 的依赖程度不同，不能一概而论：
- 缩略词（如
WHO、CORS）必须用全称作title：<dfn title="World Health Organization">WHO</dfn> - 函数名、语法符号（如
querySelectorAll()、fetch()）无需展开，可省略title：<dfn>fetch()</dfn> - 中英文混排术语（如
DID）靠title明确绑定含义，避免读屏误读 - 数字类状态码（如
403）不适合用dfn+title，因为403本身不是术语，而是实例值
注意内部文本前后空格会被计入——<dfn> fetch() </dfn> 提取出的是 " fetch() "，应写作 <dfn>fetch()</dfn>。
移动端和键盘用户几乎感知不到title，必须搭配语义上下文
iOS Safari 和 Android Chrome 默认不响应长按触发 title，键盘用户 Tab 进入 dfn 元素时，title 也不会自动朗读。单靠 <dfn title="...">...</dfn>，视障用户大概率听不到解释。
真正起作用的是整页语义结构：
-
dfn必须出现在定义句开头，且该句要自然连贯 - 若需确保可访问性，得额外加
aria-describedby指向隐藏解释段落 - 更稳妥的替代方案是
<details><summary>JWT</summary>JSON Web Token...</details>，支持聚焦、展开、移动端长按
容易被忽略的一点：即使写了 <dfn title="..."></dfn>，若页面没做任何 ARIA 补充，或者定义句断裂、父容器语义缺失，那这个 dfn 就只是个空标签。
