正确构建术语表需严格遵循语义结构：内禁用等块级元素，支持等行内元素；一个可对应多个连续；css grid布局需显式定义列定位并响应式适配；动态渲染时须确保与父子关系完整、顺序正确。
直接用 <dl></dl>、<dt></dt>、<dd></dd> 就能正确构建术语表，不需要额外 wrapper 或 hack —— 但结构错一个层级，读屏器就可能完全读丢术语。
为什么 <dt></dt> 里不能套 <p></p>
浏览器允许，但读屏器会把 <dt><p>API</p></dt> 识别为“段落”，而不是“API”这个术语。它本就该是短语级内容，天然独占一行。<dt></dt> 支持 <code>、<em></em>、<span></span> 这类行内元素，加 <p></p> 反而多一层语义干扰。如果需要换行或强调，用 CSS 控制更安全。
一个 <dt></dt> 对应多个 <dd></dd> 的实际写法
这是 API 文档、参数说明中最常见的场景：字段名一次定义，后面跟类型、默认值、是否必填三段描述。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- timeout
- number
- 3000
- required
- 必须连续写，中间不能插其他标签（比如
<p></p>或<div>） <li>读屏器会按顺序朗读：“timeout，类型：number，默认值：3000，是否必填：required”</li> <li>别为了视觉对齐拆成三个 <code><dt></dt>—— 那就丢失了语义关联 -
dl { display: grid; grid-template-columns: auto 1fr; }—— 显式声明两列，不依赖文档流 -
dt { grid-column: 1; }和dd { grid-column: 2; margin: 0; }—— 清除默认缩进，防止叠加 - 窄屏下必须还原为单列：
@media (max-width: 480px) { dl { grid-template-columns: 1fr; } dt, dd { grid-column: 1; } } - 孤立的
<dd></dd>（前面没<dt></dt>）—— 浏览器不报错，但无障碍测试工具直接标红 -
<dt></dt>和<dd></dd>被<div> 或 <code><p></p>包裹在中间 ——<dl></dl>的子元素必须全是<dt></dt>或<dd></dd> - 多个
<dt></dt>共用一个<dd></dd>时，顺序写反（<dd></dd>在前）—— 语义失效，读屏器无法建立映射
CSS Grid 布局时 dl 必须显式控制列定位
默认的 margin-left 缩进在响应式或嵌套容器中极易错位。用 Grid 能精准绑定术语与描述的关系，但关键点在于：
动态渲染时最容易被忽略的结构陷阱
从 JSON 渲染术语表时，程序常犯的错误不是样式问题，而是 DOM 结构断裂：
真正难调试的是这些结构问题：不报 JS 错误，页面看着也正常，但对屏幕阅读器用户来说，整张术语表等于不存在。
