code标签需借助title属性或CSS/JS实现提示框，title最轻量但不支持富文本；data-tip+CSS可定制样式但无交互；应避免语义污染，优先用或<details>保障可访问性。
code 标签本身不支持提示框，必须靠 CSS + title 或 JavaScript 实现
code 是纯语义标签，浏览器不会自动给它加悬浮提示。想让它悬停显示注释，得手动加 title 属性或用 JS 绑定 mouseenter 事件。
-
title最轻量：直接写<code title="这是 fetch 的 AbortSignal 参数">AbortSignal</code>，鼠标悬停就出系统原生 tooltip - 但
title不支持换行、样式、HTML 内容，长说明会截断或显示难看 - 若需富文本提示（比如带代码高亮的参数说明），得用
data-tip自定义属性 + CSS::after伪元素，或引入tippy.js这类库
用 title 属性快速实现基础提示，但要注意转义和长度
很多人直接在 title 里写中文标点或 HTML 字符，结果被解析出错或显示异常。
- 必须对
、<code>>、&做 HTML 实体转义：比如title="x < 5 && y > 0"，否则浏览器误以为是标签开始 - 避免在
title中放大段文字——移动端不触发 hover，部分屏幕阅读器会朗读全部内容，影响可访问性 - 不要用
title替代文档注释：它只是辅助提示，不能替代<!-- -->或代码块内的 JS/CSS 注释
真正可用的“代码+注释”组合结构：pre + code + data-tip
单行代码用 code[title] 足够；但函数调用、配置项这类需要上下文解释的，推荐用 data-tip 配合 pre+code 结构。
- 示例：
<code data-tip="用于取消未完成的 fetch 请求，防止内存泄漏">const controller = new AbortController();</code>
- 再配一段 CSS（无需 JS）：
[data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; top: 120%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 4px 8px; font-size: 12px; border-radius: 3px; white-space: nowrap; } - 注意：这种纯 CSS 提示不支持换行，且无法聚焦/键盘操作，仅适合简单说明
容易被忽略的关键点：语义污染与可访问性风险
把注释塞进 title 或 data-tip 看似方便，但会模糊“什么是代码”“什么是说明”的边界。
立即学习“前端免费学习笔记（深入）”；
- 搜索引擎和代码分析工具（如 ESLint 插件）只认
code内容，title里的文字不算代码文本，不参与语法检查或索引 - 屏幕阅读器默认朗读
title，如果里面写了“点击此处运行”，而实际没交互逻辑，会造成误导 - 更稳妥的做法：把注释放在
code后紧邻的<small>或<details>里，确保所有用户都能以自己习惯的方式获取信息
