<details>是原生渐进式展开标签，需配合唯一<summary>使用；每个评分维度应独立包裹以实现按需查看；自定义样式需重置::marker和focus轮廓，兼顾无障碍；IE不支持，旧版Safari兼容性有限。
details标签的基本结构和折叠逻辑
<details> 是原生支持渐进式展开的语义化标签，浏览器默认提供折叠/展开状态管理，不需要 JS 就能响应点击。它必须配合 <summary> 使用，后者是唯一可点击触发切换的子元素——如果漏写或写了多个 <summary>，行为不可靠（Chrome 只认第一个，Firefox 可能忽略后续）。
多维度评分细则通常包含标题、维度名称、分值区间、说明文字，这些内容放在 <summary> 外、<details> 内部即可：
<details> <summary>评分维度说明</summary> <p><strong>准确性（40分）：</strong>数据来源可靠，计算无误…</p> <p><strong>完整性（30分）：</strong>覆盖全部必填字段，无遗漏…</p> </details>
让每个评分维度独立展开，而不是全堆在一个details里
把所有维度塞进一个 <details> 会失去“按需查看”的意义。正确做法是为每个维度单独包裹一层 <details>，例如：
<details>
<summary>✅ 准确性（40分）</summary>
<ul>
<li>引用权威数据源：+15分</li>
<li>公式推导无逻辑错误：+15分</li>
<li>小数位数符合规范：+10分</li>
</ul>
</details>
<details>
<summary>✅ 完整性（30分）</summary>
<p>检查项共12项，每缺1项扣2.5分，扣完为止。</p>
</details>
这样用户可以只点开关心的维度，页面不会因一次性加载全部细则而显得臃肿。注意：<summary> 里加 ✅ 或分值能提升可读性，但不要放太多动态内容（比如 JS 插入的实时得分），因为 <summary> 不支持子元素事件冒泡，交互受限。
立即学习“前端免费学习笔记（深入）”；
自定义样式时绕过浏览器默认箭头和聚焦行为
所有现代浏览器会在 <summary> 前自动加一个三角箭头，且默认获得焦点轮廓（outline）。如果要统一 UI 风格，必须显式重置：
- 用
summary::marker移除或替换箭头（注意 Safari 15.4+ 才支持该伪元素） - 用
summary:focus { outline: none; }消除聚焦框，但必须补上替代视觉反馈（如背景色变化），否则不符合无障碍要求 - 避免给
<details>设固定高度或overflow: hidden，否则展开动画会被截断
更稳妥的定制方式是用 open 属性 + CSS 过渡控制高度，但需要 JS 监听 toggle 事件来同步状态，复杂度上升——多数场景直接用原生行为更轻量。
兼容性和可访问性不能只靠标签语义
<details> 在 IE 中完全不支持，在旧版 Safari（open 属性变化。如果目标用户含大量企业内网用户（仍用 IE11），必须降级为 JS 控制的 <div> + ARIA 属性组合。
即使支持，也要补全 ARIA：在 <summary> 上加 aria-expanded 和 aria-controls，指向内部容器 ID；内部容器加 role="region" 并设 aria-labelledby 回指 summary。否则屏幕阅读器可能无法正确播报展开状态。
细节容易被忽略的是：当评分细则含表格或代码块时，<details> 内部的 <table> 或 <pre> 会破坏语义流，建议改用 <dl> 描述列表组织维度与说明，更贴合“细则”本质。
