<details>标签原生支持折叠展开，需以<summary>为首个子元素，支持open属性默认展开；更新日志应按时间倒序排列于HTML源码中，确保可访问性与SEO；兼容现代浏览器，可通过CSS自定义箭头样式。
details标签的基本用法和默认行为
直接用 <details> 包裹内容，浏览器会自动添加可折叠的交互逻辑，不需要额外 JS。它原生支持 open 属性控制初始展开状态，但不支持多级嵌套展开（子 <details> 会独立响应点击）。
常见错误是把标题写在 <details> 外面，导致点击区域失效——<summary> 必须是它的第一个子元素，否则折叠功能不工作。
- 正确结构：
<details><summary>v2.1.0</summary><p>修复登录页样式错位</p></details></li> <li>错误写法：<code><h3>v2.1.0</h3><details><p>...</p></details></li> <li>想默认展开？加 <code>open
属性：<details open>
让更新日志按时间倒序排列并保持语义清晰
更新日志通常从最新版往前排，但 <details> 本身不提供排序能力，得靠 HTML 结构顺序控制。把最新版本放在最前面，不仅符合阅读习惯，也避免用户滚动到底部才能看到最近改动。
注意：不要用 CSS 的 flex-direction: column-reverse 或 order 反转顺序——这会破坏屏幕阅读器的阅读流，且键盘 Tab 焦点顺序也会错乱。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：最新版在 HTML 源码最上方，依次向下排旧版本
- 每个
<summary>里建议包含明确版本号 + 发布日期，例如：<summary>v2.3.0 (2024-06-15)</summary></li> <li>如果日志条目很多，可在外层加 <code><section aria-label="更新日志">
提升可访问性
兼容性与样式微调的关键点
Chrome、Firefox、Safari、Edge 均已支持 <details>，但 IE 完全不支持，iOS Safari 12.2+ 才修复了部分 focus 样式 bug。如果你必须兼容老系统，得用 JS 回退方案，但纯静态日志页通常无需考虑 IE。
默认的三角箭头样式无法用 CSS 直接替换（::marker 支持有限），但可以隐藏原生箭头再自定义：
details summary {
list-style: none;
}
details summary::before {
content: "▶ ";
margin-right: 4px;
}
details[open] summary::before {
content: "▼ ";
}
- 禁用原生箭头：
summary { list-style: none; } - 用
::before添加自定义符号，注意details[open]选择器判断展开态 - 别给
<summary>设display: block—— 它默认是display: list-item，改了可能影响点击热区
避免把 changelog 做成“不可搜索”的折叠块
搜索引擎和浏览器 Ctrl+F 能搜到 <details> 内所有文本，包括折叠状态下的内容。这点常被误认为“隐藏后就搜不到”，其实完全不必担心 SEO 或用户查找。
真正的问题是：如果日志里有关键词（比如 “导出 PDF”、“OAuth2 登录”），但用户没点开对应版本块，就容易忽略改动。这时候加个顶部索引链接能显著提升体验：
- 在页面开头列几个高频功能关键词：
<a href="#pdf-export">PDF 导出</a>｜<a href="#oauth">OAuth2</a> - 给对应
<details>加id="pdf-export"，点击即滚动定位 - 不要用 JS 模拟滚动，原生
<a href="#id">最可靠，也支持前进/后退
细节上，<summary> 里的文字会被读屏器当作控件名播报，所以别写“点击查看”，直接写版本信息更实用。折叠状态本身对性能无影响，但别在 <details> 里塞大量图片或 iframe——展开时才会加载，但首次渲染仍可能触发布局抖动。
