用 + + 语义化结构实现可维护更新日志页，每个版本用带 id 的 包裹，日期用 ，纯 css 支持深色模式与锚点跳转，无需 js 即可交互且兼容性好。

怎么用纯 HTML + CSS 实现可维护的更新日志页

直接用 <section></section> + <details></details> 就能做出折叠/展开的版本条目，不用 JS 也能交互。关键不是“怎么排版好看”，而是“以后加新版本时改几行就生效”。

常见错误是把所有内容写死在 HTML 里，结果每次发版都要手动改结构、调样式、补日期——其实只要按语义分层，后续维护就是追加一个 <article></article> 块的事。

• 每个版本用 <article></article> 包裹，加 id="v2-1-0" 方便锚点跳转
• 日期统一用 <time datetime="2024-05-20">2024年5月20日</time>，既语义清晰又方便爬虫或自动化提取
• 用 <details><summary>v2.1.0（2024-05-20）</summary>...</details> 实现默认收起，用户点开才看详情
• 避免用 <div class="version-item"> 这类无语义容器，搜索引擎和屏幕阅读器都认不出这是“版本记录” <h3>为什么别用 JavaScript 控制日志折叠状态</h3> <p>多数人一上来就想用 JS 绑定 click 事件、存 localStorage 记录展开状态——但更新日志页本质是静态内容，JS 不仅增加首屏加载负担，还会在禁用 JS 时完全不可用（比如某些企业内网环境）。</p> <p><code><details></details> 是原生支持的 HTML5 元素，自带状态记忆（刷新后保持展开/收起），CSS 也能精准控制 details[open] > summary::after 来换图标，兼容性到 Chrome 12 / Firefox 49 / Safari 6 都没问题。
  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载
  • IE 不支持 <details></details>？那就加个简单降级：用 <h3></h3> + <div>，配合 CSS <code>display: block/none，不依赖 JS 也能实现基础展示
  • 如果真要存用户偏好（比如“默认全部展开”），用 localStorage 配合 details 的 toggle 事件就够了，不用重写整套逻辑
  • 注意 Safari 旧版对 details 内部动画支持弱，别给 <summary></summary> 加 transition，容易卡顿

  怎么让日志页自动适配深色模式

  不用 JS 检测 prefers-color-scheme，纯靠 CSS 变量 + @media (prefers-color-scheme: dark) 就够了。重点是把颜色值抽成变量，而不是写死 #333 或 white。

  :root {
    --log-bg: #fff;
    --log-text: #333;
    --log-border: #e0e0e0;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --log-bg: #1e1e1e;
      --log-text: #e0e0e0;
      --log-border: #333;
    }
  }
  article { background: var(--log-bg); color: var(--log-text); border-bottom: 1px solid var(--log-border); }
  

  • 日期、版本号、变更类型（如 新增 修复）建议用 <span class="tag tag-feature"></span> 这类语义化 class，方便统一配色和响应式缩放
  • 别用图片做分割线或图标，纯 CSS 画竖线、小箭头更轻量，也避免暗色模式下白底图标看不见
  • 测试时打开浏览器开发者工具的「Rendering」面板，勾选 “Emulate CSS media feature prefers-color-scheme” 快速切模式

  部署后发现链接打不开？检查这三处锚点细节

  日志页常被其他页面通过 #v2-1-0 链接到具体版本，但实际点进去没滚动或 404，大概率是锚点没对上。

  • <article id="v2-1-0"></article> 的 id 值必须全小写、无空格、无中文，URL 中 #V2.1.0 和 #v2-1-0 是不同锚点
  • 别在 <details></details> 外层再套一层 <div id="v2-1-0">，锚点应直接落在 <code><article></article> 上，否则 Safari 可能无法平滑滚动到目标位置
  • 如果用了 URL hash 跳转但页面还没加载完，加一行 window.scrollRestoration = 'manual'; 防止浏览器自动滚动覆盖你的逻辑

  最麻烦的其实是团队协作时命名不一致：有人写 v2.1，有人写 2.1.0，有人带括号 v2.1.0 (2024)——建议在项目 README 里明确约定格式，并用 CI 脚本校验 HTML 中所有 id 是否符合 ^v\d+\.\d+\.\d+$ 正则。