changelog 页面可用纯 html 实现清晰可读：用 + 划分版本，时间倒序；日期用 ；变更项用 ；代码用 并加响应式样式；id 必须小写短横线格式且唯一。
Changelog 页面不需要框架也能做得清晰可读，关键在结构语义化、时间倒序、版本锚点和轻量样式。
用 <section></section> + <h2></h2> 划分每个版本
别用一堆 <div> 堆砌，每个版本块必须是独立语义单元。浏览器和屏幕阅读器靠这个识别内容层级。
<ul>
<li>
<code><section></section> 包裹单个版本全部内容（含标题、日期、变更列表）
<h2></h2> 作为版本号标题，例如 <h2 id="v2.1.0">v2.1.0</h2> —— id 必须唯一且可被 URL 直接跳转<h2></h2> 后紧跟 <p class="date">2024-05-20</p>，不用 <time></time> 除非你真需要 datetime 属性做机器解析<ul></ul>，每条以 <li> 开头，避免混用段落或换行符模拟列表变更类型用 class 区分，不依赖颜色传达信息
加功能、修 Bug、破坏性改动，光靠颜色（比如红色标 BREAKING）对色觉障碍用户无效。必须辅以文字标识和 class 便于 CSS 和 JS 控制。
- 每条
<li>加 class：feat/fix/breaking/docs - 示例：
<li class="breaking">移除 <code>legacyConfig配置项 - 对应 CSS 可设
.breaking::before { content: "⚠️ "; }或图标字体，但文字“BREAKING”必须保留在标签内（不可仅靠伪元素） - 避免用
<strong></strong>或大写全称替代语义 class，那只是视觉强化，不是结构表达
支持锚点跳转和浏览器原生搜索
用户常会 Ctrl+F 搜 “v2.0”，或点击文档里 #v1.9.3 直达某版。这要求 HTML 原生支持，不依赖 JS。
- 每个版本
<h2></h2>的id必须与版本号严格一致（如v1.9.3，不含空格、括号、中文），小写、短横线分隔 - URL 示例：
changelog.html#v2.1.0—— 点击即滚动定位，无需监听hashchange - 不要把版本号塞进
<span></span>里再加id，那样<h2></h2>自身就失去锚点能力 - 如果生成工具输出了带括号的 id（如
v2.1.0 (stable)），手动清理，只留v2.1.0
纯 HTML 也能响应式，但得管好预格式化内容
日志里常有代码片段（如配置项、命令行），<pre class="brush:php;toolbar:false;"><code></code> 是唯一正确方式，但默认会撑破窄屏。</pre>
- 给
<pre class="brush:php;toolbar:false;"></pre>加 CSS：overflow-x: auto; max-width: 100%;，否则手机上横向滚动失效或内容截断 - 别用
<code>单独包裹多行代码——它只适合行内代码，多行必须套<pre class="brush:php;toolbar:false;"><code></code></pre> - 避免在
<li>里写超长无空格字符串（如 base64、哈希值），加word-break: break-all;防溢出 - 不引入任何 CSS 框架，几行媒体查询足矣：小屏下
<h2></h2>字号调小，margin收紧，列表缩进减半
最易被忽略的是版本 id 的命名一致性——哪怕只有一处写成 V2.1.0 或 v2_1_0，所有外部链接和自动化脚本都会失效。Changelog 是契约，HTML 结构就是它的第一份契约文本。
