HTML <dfn> 标签-代码号

HTML `<dfn>` 标签详解：术语定义标记指南

概述

<dfn> 标签用于在定义短语或句子上下文中标记被定义的术语。浏览器默认将 <dfn> 标签内的内容以斜体显示，使其在视觉上区别于普通文本。

基本语法

<dfn> 标签是双标签，需要在开标签 <dfn> 和闭标签 </dfn> 之间包含术语内容。

<dfn>术语</dfn>

术语定义规则

<dfn> 标签通过以下规则确定被定义的术语：

title属性优先：如果 <dfn> 包含 title 属性，该属性值即为被定义的术语
abbr子元素：如果 <dfn> 只有一个子元素且为带有 title 属性的 <abbr> 元素，则以 <abbr> 的 title 值为准
文本内容：如果不符合上述情况，则 <dfn> 的文本内容即为被定义的术语

代码示例

示例1：基础术语定义

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 编程术语定义</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      line-height: 1.6;
      margin: 20px;
    }
    dfn {
      font-style: italic;
      color: #2c3e50;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>代码号编程学习术语解析</h1>
  <p>在Web开发中，<dfn>HTML</dfn>（超文本标记语言）是构建网页内容的基础语言，用于定义文档的结构和语义。</p>
  
  <p><dfn>CSS</dfn>（层叠样式表）负责网页的视觉表现，包括布局、颜色和字体等样式设计。</p>
  
  <p><dfn title="JavaScript">JS</dfn>是一种广泛应用于Web开发的脚本语言，为网页添加交互功能和动态效果。</p>
</body>
</html>

示例2：结合缩写使用

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 技术缩写定义</title>
</head>
<body>
  <h1>2025年Web开发技术术语</h1>
  
  <p>在现代前端开发中，<dfn><abbr title="Application Programming Interface">API</abbr></dfn> 
     是不同软件组件之间相互通信的接口规范。</p>
  
  <p><dfn><abbr title="Representational State Transfer">REST</abbr></dfn> 
     是一种常用的Web服务架构风格，基于HTTP协议实现资源操作。</p>
  
  <p><dfn><abbr title="JavaScript Object Notation">JSON</abbr></dfn> 
     是轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。</p>
</body>
</html>

属性说明

属性	值类型	描述说明
title	文本	指定术语的完整定义，鼠标悬停时显示

注意：<dfn> 标签还支持所有全局属性和事件属性。

链接到定义

通过为 <dfn> 添加 id 属性，可以创建指向术语定义的链接：

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 术语索引页面</title>
</head>
<body>
  <h1>编程学习术语词典</h1>
  
  <nav>
    <h2>快速导航</h2>
    <ul>
      <li><a href="#html-def">HTML</a></li>
      <li><a href="#css-def">CSS</a></li>
      <li><a href="#js-def">JavaScript</a></li>
    </ul>
  </nav>
  
  <section>
    <h2>术语定义</h2>
    <p id="html-def"><dfn>HTML</dfn> - 超文本标记语言，用于创建网页结构和内容。</p>
    <p id="css-def"><dfn>CSS</dfn> - 层叠样式表，用于定义网页的视觉样式。</p>
    <p id="js-def"><dfn>JavaScript</dfn> - 脚本编程语言，实现网页交互功能。</p>
  </section>
</body>
</html>

CSS样式设置

基础样式定制

dfn {
  font-style: italic;
  color: #2980b9;
  background-color: #ecf0f1;
  padding: 2px 6px;
  border-radius: 3px;
  border-bottom: 2px solid #3498db;
}

dfn:hover {
  background-color: #d6eaf8;
  cursor: help;
}

高级样式效果

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 术语样式设计</title>
  <style>
    .glossary dfn {
      font-family: 'Consolas', monospace;
      font-size: 16px;
      font-weight: 600;
      text-transform: none;
      text-decoration: underline dotted #e74c3c;
      color: #34495e;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      padding: 4px 8px;
      border: 1px solid #dee2e6;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .glossary dfn::after {
      content: "?";
      margin-left: 4px;
      font-size: 12px;
      color: #27ae60;
    }
  </style>
</head>
<body>
  <div class="glossary">
    <h1>代码号编程概念解析</h1>
    <p>在2025年的Web开发中，<dfn title="Document Object Model">DOM</dfn> 
       仍然是操作网页内容的核心API，而<dfn title="Cascading Style Sheets">CSS</dfn> 
       则负责页面的视觉呈现。</p>
  </div>
</body>
</html>

本节课程知识要点

语义化标记：<dfn> 标签提供语义化的方式标识术语定义
多重定义方式：支持通过title属性、abbr子元素或文本内容定义术语
可链接性：通过id属性支持术语定义的直接链接访问
样式灵活性：可以通过CSS自定义术语的显示样式

实际应用场景

场景1：技术文档术语表

<!DOCTYPE html>
<html>
<head>
  <title>代码号API文档术语</title>
</head>
<body>
  <h1>RESTful API 开发术语</h1>
  
  <article>
    <h2>核心概念</h2>
    <p>在构建<dfn title="Representational State Transfer">REST</dfn> API时，
       <dfn>端点（Endpoint）</dfn>是指API的特定URL路径，每个端点对应一个资源操作。</p>
    
    <p><dfn title="Hypertext Transfer Protocol">HTTP</dfn>方法如GET、POST、PUT、DELETE
       用于定义对资源的操作类型，这是REST架构的重要特征。</p>
  </article>
</body>
</html>

场景2：教育课程内容

<!DOCTYPE html>
<html>
<head>
  <title>代码号编程基础课程</title>
  <style>
    .course-content {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .term-highlight {
      background-color: #fff3cd;
      border-left: 4px solid #ffc107;
      padding: 15px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="course-content">
    <h1>前端开发基础概念</h1>
    
    <div class="term-highlight">
      <p><dfn>响应式设计</dfn>是指网页能够自动适应不同设备屏幕尺寸的设计方法，
         确保在手机、平板和桌面设备上都有良好的显示效果。</p>
    </div>
    
    <div class="term-highlight">
      <p><dfn title="Document Object Model">DOM</dfn>操作是JavaScript的核心功能之一，
         允许动态修改网页内容、结构和样式。</p>
    </div>
  </div>
</body>
</html>

浏览器兼容性

所有主流浏览器（Chrome、Edge、Firefox、Safari、Opera）都支持 <dfn> 标签。

注意事项

语义正确性：仅在真正定义术语时使用 <dfn> 标签
可访问性：确保术语定义对屏幕阅读器友好
内容完整性：重要的术语定义应该包含在可见文本中，而非仅依赖title属性

<dfn> 标签是HTML语义化标签家族中的重要成员，专门用于标记文档中正在被定义的术语。通过合理使用title属性和 <abbr> 子元素，可以创建出既机器可读又用户友好的术语定义系统。

本文标签：

HTML <dfn> 标签

HTML <dfn> 标签详解：术语定义标记指南

概述