怎样定义术语名称部分_DT标签在定义列表中标识核心词-html教程-PHP中文网

dt标签必须是名词性短语，不能是句子或操作控件；其作用是声明核心术语，如“src”“fetch()”，而非“请设置src属性”或“点击调用fetch”。

怎样定义术语名称部分_dt标签在定义列表中标识核心词

怎样定义术语名称部分：DT 标签必须是名词性短语，不能是句子或操作控件

dt 标签的作用不是“加粗标题”，而是向浏览器和屏幕阅读器声明：“这个词是接下来要解释的核心术语”。它必须是一个简洁、独立的名词性短语，比如 src、fetch()、viewport，而不是 “请设置 src 属性” 或 “点击此处调用 fetch”。

常见错误现象：

在 dt 里塞 <button></button> 或 <a></a> —— 语义冲突，辅助技术会读作“term: 按钮”，完全失真
写成 <dt>如何使用 localStorage？</dt> —— 这是问题，不是术语；应改为 <dt>localStorage</dt>
把整段说明文字放进 dt —— dt 不承担解释职责，那是 dd 的事

实操建议：

多个同义术语可共用一个 dd，例如连续写两个 dt：<dt>data-src</dt> <dt>srcset</dt> <dd>用于响应式图像加载的属性……</dd>
若术语本身是代码，直接用 <dt><code>querySelectorAll()，无需额外包裹 dfn（除非你正在首次定义它）
dt 不支持嵌套 h1–h6，规范禁止；如果设计稿要求视觉层级，用 CSS 控制字体大小/权重即可

DT 和 DFN 的关系：同一术语在不同场景下用不同标签

很多人混淆 dt 和 dfn，其实它们解决的是两类问题：dt 是定义列表里的“条目名”，dfn 是文档中“某处正在定义该词”。同一个词，在词汇表里用 dt，在正文首段引入时用 dfn。

例如 API 文档中：

词汇表章节：<dt><code>body
请求体，通常为 JSON 或表单数据……
正文介绍：<p>发送请求时，<dfn><code>body 字段承载实际传输的数据。

Qwen
Qwen是一款由阿里云推出的大语言模型和多模态模型系列。

下载

关键区别：

dfn 必须紧邻完整定义句，且只能出现在 p、section、dt 等合法块级上下文中；dt 本身就可以是那个上下文
dfn 支持 title 属性（用于缩写展开），dt 不需要也不推荐加 title
一个页面可以有多个 dt 叫 method（分别在不同 API 小节），但 dfn 应只在首次出现时标记一次

DT 内容被截断或错位？检查 CSS 重置是否覆盖了默认行为

浏览器对 dt 默认不设 margin/padding，但所有主流浏览器都会给 dd 加约 40px 左侧缩进。如果没做样式干预，多行 dd 容易与 dt 错行，看起来像“术语消失了”。这不是 HTML 写错了，是视觉反馈断层。

最简修复方式（推荐用 CSS Grid）：

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25em 1em;
}
dt {
  font-weight: 600;
  margin-bottom: 0.25em;
}
dd {
  margin: 0;
  grid-column: 2;
}

注意点：

别用 float 或 inline-block 模拟两栏——dt 换行后 dd 极易错列
grid-column: 2 是关键，它强制每个 dd 都落在第二列，不依赖 dt 的宽度
如果 dt 内容过长（如带路径的参数 /api/v2/users/:id），用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 控制，别让它撑开整列