dfn 标签仅用于术语首次出现且紧邻完整定义语句时;必须嵌套在语义化块级元素中,优先通过 title 属性指定被定义内容,否则导致语义断裂与无障碍失效。

dfn 标签不是加斜体的快捷键,也不是用来“突出显示术语”的视觉工具;它只在术语**首次出现且紧邻明确定义语句**时才该用,否则语义断裂、辅助技术无法识别。
必须紧邻完整定义语句,不能单独存在
浏览器和屏幕阅读器只认“dfn + 紧跟其后的自然语言解释”这一组合。单独写 <dfn>fetch()</dfn> 而不接任何说明,等于没定义——知识图谱抽取失败,无障碍提示静默。
- ✅ 正确:
<p><dfn>DOM</dfn> 是文档对象模型的缩写,表示 HTML 文档的编程接口。</p> - ❌ 错误:
<ul><li><dfn>viewport</dfn></li></ul>(后面没解释) - ❌ 错误:
<h2><dfn>Accessibility</dfn></h2>(定义在下一段才出现)
title 属性决定“被定义的是什么”,顺序不能错
dfn 提取术语值有严格优先级:先看 title 属性,再看子元素的 title,最后才取自身文本。这个顺序直接影响语义是否准确,尤其对缩写和函数名。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- ✅ 缩写场景:
<dfn title="Document Object Model">DOM</dfn>→ 定义的是 “Document Object Model” - ❌ 反向写法:
<dfn title="DOM">Document Object Model</dfn>→ 实际定义的是字符串 "DOM",语义反转 - ✅ 函数名无需展开:
<dfn>querySelectorAll()</dfn>,不加title更干净 - ⚠️ 注意:
<dfn title="HTTP"></dfn>内部为空 → 辅助技术读不出可见词,违反可访问性底线
父容器必须是语义化块级元素
dfn 不是孤立标签,它的定义上下文依赖祖先节点是否构成“可承载定义的环境”。规范明确要求最近的块级祖先应为 <p></p>、<section></section>、<dt></dt> 或 <figcaption></figcaption>。
- ❌ 错误:
<div> <dfn>baseline</dfn> 是 CSS 中行内对齐的参考线。</div>→<div> 无定义语义,<code>dfn断连 - ❌ 错误:
<td><dfn>viewport</dfn></td>→ 表格单元格不是定义容器 - ✅ 正确:整句用
<p></p>包裹,或显式声明<div role="definition"> <p>最容易被忽略的一点:你写的 <code>dfn是否真正在文档中「首次出现」?如果同一术语已在前文某处定义过(哪怕没套dfn),这次再用就属于滥用——语义污染比不用更糟。










