PHP小码农

Appearance

dfn 定义术语 ​

<dfn> 标签用于标记术语的定义实例。当某个术语在文本中首次被定义时，用 <dfn> 包裹该术语，表示这里是该术语的定义处。

前置知识

阅读本节前，建议先了解：cite 引用来源

基础概念 ​

<dfn>（definition）是 HTML5 中的语义标签，用于标记一个术语的定义实例。当读者需要了解某个术语的含义时，<dfn> 所在位置就是该含义的解释之处。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>dfn 示例</title>
</head>
<body>
  <!-- 基本用法：定义术语 -->
  <p><dfn>API</dfn>（Application Programming Interface，应用程序编程接口）是一组定义了软件组件之间交互的协议和工具。</p>

  <!-- 在句子中定义 -->
  <p><dfn>DOM</dfn>（文档对象模型）是一种编程接口，允许程序动态访问和修改文档的内容、结构和样式。</p>
</body>
</html>

详细说明 ​

dfn 的语义规则 ​

  • <dfn> 应包含被定义的术语本身
  • 术语的定义应该在 <dfn> 附近的文本中
  • 每个术语只在首次出现时使用 <dfn> 标记
  • <dfn> 的内容即为术语的准确形式

dfn 与 title 属性 ​

如果 <dfn> 中的文本与实际术语有细微差异（如缩写形式），可以通过 title 属性提供精确的术语：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>dfn title 属性</title>
</head>
<body>
  <!-- title 提供精确术语 -->
  <p><dfn title="HyperText Markup Language">HTML</dfn> 是构建网页的标准标记语言。</p>

  <!-- 无 title：dfn 内容即为术语 -->
  <p><dfn>CSS</dfn> 是层叠样式表的缩写。</p>
</body>
</html>

dfn 的默认样式 ​

属性默认值（Chrome）
displayinline
font-styleitalic

dfn 与 abbr 配合 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>dfn 与 abbr 配合</title>
</head>
<body>
  <p><dfn><abbr title="Document Object Model">DOM</abbr></dfn> 是一种编程接口，用于动态访问和修改 HTML 文档。</p>
</body>
</html>

实战示例 ​

技术文档术语表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>术语定义</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; line-height: 1.7; }
    dfn { font-style: italic; font-weight: bold; background: #f0f8ff; padding: 0 0.2em; }
  </style>
</head>
<body>
  <h1>Web 开发核心术语</h1>

  <p><dfn>语义化</dfn>是指在编写 HTML 时，使用能够准确表达内容含义的标签，而非仅仅关注视觉表现。</p>

  <p><dfn>响应式设计</dfn>是一种网页设计方法，使网页能够根据不同的设备和屏幕尺寸自动调整布局和内容展示。</p>

  <p><dfn>无障碍访问</dfn>（Accessibility，简称 a11y）是指确保所有用户，包括残障人士，都能正常使用网页内容和功能。</p>
</body>
</html>

注意事项 ​

  • 不要将 <dfn> 用于术语的每一次出现，只在定义处使用
  • 定义内容应在 <dfn> 附近的文本中
  • 如果需要为缩写术语提供全称，配合 <abbr> 使用

最佳实践 ​

  1. 首次出现时定义：在术语第一次出现时使用 <dfn>
  2. 就近定义：定义内容紧跟在 <dfn> 之后
  3. 自定义样式：通过 CSS 让术语定义更醒目

下一节

继续学习：q 行内引用

参考链接 ​