词汇表组件需以语义化结构实现术语可识别、可关联、可复用，核心是用<dfn>绑定title全称，并嵌套于<dt>与<dd>构成的<dl>中，配合<abbr>处理缩写，辅以CSS增强可见性及JS交互功能。
词汇表组件不是简单罗列术语，而是让每个术语具备可识别、可关联、可复用的语义结构。它依赖 标签作为核心语义锚点，但必须配合上下文容器与交互逻辑，才能真正“组件化”。
术语定义必须绑定到完整语句中
单独写 API 不构成有效定义，更无法支撑组件逻辑。组件内部每条术语都应出现在自然定义句中，例如：
<p><dfn title="Application Programming Interface">API</dfn> 是程序间通信的接口规范。</p>- 解释文字需紧随 后出现，不能跨
或被其他标签（如
<span>）隔开 - 若组件支持折叠/展开，默认只显示 部分，点击后才呈现整句——此时仍需确保 DOM 中定义句完整存在，不可仅靠 JS 动态插入解释
组件需统一管理术语与定义关系
词汇表组件不是一堆 的堆砌，而应建立术语到解释的映射。推荐用 <dl> 结构组织：
<dl><dt><dfn title="Document Object Model">DOM</dfn></dt><dd>网页内容的编程接口，以树状结构表示 HTML 文档。</dd></dl>-
<dt>和<dd>的语义天然表达“术语–定义”对，比纯<div>更利于 SEO 和读屏软件解析 - 组件初始化时，可遍历所有
<dt><dfn>提取title值构建索引，支持搜索跳转或术语高亮
缩写词需嵌套 abbr + dfn，不可省略任一环节
遇到像 “CSS”“HTTP” 这类缩写术语，组件必须同时满足两个条件：
- 标记为缩写：
<abbr title="Cascading Style Sheets">CSS</abbr> - 且首次定义：
<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - 不加
title，否则会覆盖 的全称； 必须带自然语言全称，不能写 “样式表” 或 “参见附录” - 组件渲染时，可额外加 CSS 让 的
title可见（如abbr[title]:after { content: " (" attr(title) ")"; }），弥补 Safari 移动端不显示 tooltip 的缺陷
视觉与交互需补足语义缺位
默认斜体，但 Safari 不渲染，纯靠样式区分易失效。组件应主动增强可见性：
- 统一重置 样式，添加轻量视觉标记：如上标小字号、浅灰底纹、左侧竖线等
- 支持键盘聚焦时自动展开对应定义，或悬停显示 tooltip（用 JS 拦截原生 行为，避免依赖浏览器默认）
- 提供“全部展开”“按首字母筛选”“复制术语”等实用操作，这些功能依赖 的
title值和父级<dt>结构，而非单纯文本匹配
