标签无默认高亮效果，仅具语义功能，必须配合使用并依赖CSS实现视觉强化，现代推荐用grid布局明确术语与解释的视觉分离。
<dt></dt> 标签本身不提供高亮功能，它只负责语义化标记“术语/名称”，视觉样式（包括高亮、缩进、加粗等）必须靠 CSS 控制。
为什么 <dt></dt> 不能直接高亮
<dt></dt> 是纯语义标签，浏览器默认仅设置 display: block，没有任何颜色、背景或字体加粗。所谓“看起来像高亮”，其实是开发者手动加的 CSS，比如 font-weight: bold 或 background-color: #eee。
- 直接写
<dt>API Key</dt>不会自动变粗或变色 - 若没写任何 CSS，
<dt></dt>和<dd></dd>在页面上几乎看不出区别（只有默认换行和轻微缩进） - 依赖默认样式风险高：不同浏览器对
<dt></dt>的margin或padding处理略有差异
<dt></dt> 必须和 <dl></dl>、<dd></dd> 配套使用
单独用 <dt></dt> 是无效 HTML，解析器会尝试修复，但结果不可控 —— 可能被忽略、被移到 顶层，或导致后续 <dd></dd> 错位。
- 正确结构只能是：
<dl> <dt>术语</dt> <dd>解释</dd> </dl> - 一个
<dt></dt>可对应多个<dd></dd>（例如同义词、多语言释义） - 多个
<dt></dt>可连续出现，再统一跟多个<dd></dd>（如“中国城市”后列北京、上海、广州）
排版时容易踩的 CSS 坑
想让 <dt></dt> 看起来“高亮”，常见错误不是写错 HTML，而是 CSS 写法破坏语义或兼容性。
立即学习“前端免费学习笔记（深入）”；
- 别用
float: left+width强制并排：IE 或旧 Safari 下<dd></dd>容易换行错乱 - 避免只给
<dt></dt>设margin-right期望与<dd></dd>并排：语义上它们不是兄弟关系，而是“术语-描述”配对，应优先用display: grid或display: flex在<dl></dl>上布局 - 别在
<dt></dt>里嵌<h2></h2>或<strong></strong>：违反 HTML5 规范，<dt></dt>不允许包含标题级元素 - 移动端需注意：部分安卓 WebView 对
dl dt dd的display: contents支持不全，慎用
真正可控的高亮排版方案
用现代 CSS 显式定义术语区和描述区的视觉分离，比依赖默认行为更可靠：
<style>
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25em 1em;
}
dt {
font-weight: 600;
color: #2c3e50;
}
dd {
margin: 0;
padding: 0;
}
</style>
<dl>
<dt>HTTP Status Code</dt>
<dd>服务器返回的三位数字响应码，如 200、404</dd>
<dt>CORS</dt>
<dd>跨域资源共享机制，由响应头控制</dd>
</dl>
这种写法把“高亮”明确交给 font-weight 和 color，同时用 grid 保证术语左对齐、描述右对齐 —— 不依赖浏览器默认缩进，也不破坏语义层级。
最常被忽略的一点：语义正确的 <dt></dt> 结构，是屏幕阅读器识别术语-定义关系的基础；视觉高亮只是锦上添花，别让它掩盖了这个前提。
