是原生渐进式展开标签，需配合唯一使用；每个评分维度应独立包裹以实现按需查看；自定义样式需重置::marker和focus轮廓，兼顾无障碍；ie不支持，旧版safari兼容性有限。
details标签的基本结构和折叠逻辑
<details></details> 是原生支持渐进式展开的语义化标签，浏览器默认提供折叠/展开状态管理，不需要 JS 就能响应点击。它必须配合 <summary></summary> 使用，后者是唯一可点击触发切换的子元素——如果漏写或写了多个 <summary></summary>，行为不可靠（Chrome 只认第一个，Firefox 可能忽略后续）。
多维度评分细则通常包含标题、维度名称、分值区间、说明文字，这些内容放在 <summary></summary> 外、<details></details> 内部即可：
<details><summary>评分维度说明</summary><p><strong>准确性（40分）：</strong>数据来源可靠，计算无误…</p> <p><strong>完整性（30分）：</strong>覆盖全部必填字段，无遗漏…</p> </details>
让每个评分维度独立展开，而不是全堆在一个details里
把所有维度塞进一个 <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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</details>
这样用户可以只点开关心的维度，页面不会因一次性加载全部细则而显得臃肿。注意：<summary></summary> 里加 ✅ 或分值能提升可读性，但不要放太多动态内容（比如 JS 插入的实时得分），因为 <summary></summary> 不支持子元素事件冒泡，交互受限。
自定义样式时绕过浏览器默认箭头和聚焦行为
所有现代浏览器会在 <summary></summary> 前自动加一个三角箭头，且默认获得焦点轮廓（outline）。如果要统一 UI 风格，必须显式重置：
- 用
summary::marker移除或替换箭头（注意 Safari 15.4+ 才支持该伪元素） - 用
summary:focus { outline: none; }消除聚焦框，但必须补上替代视觉反馈（如背景色变化），否则不符合无障碍要求 - 避免给
<details></details>设固定高度或overflow: hidden，否则展开动画会被截断
更稳妥的定制方式是用 open 属性 + CSS 过渡控制高度，但需要 JS 监听 toggle 事件来同步状态，复杂度上升——多数场景直接用原生行为更轻量。
兼容性和可访问性不能只靠标签语义
<details></details> 在 IE 中完全不支持，在旧版 Safari（open 属性变化。如果目标用户含大量企业内网用户（仍用 IE11），必须降级为 JS 控制的 <div> + ARIA 属性组合。
<p>即使支持，也要补全 ARIA：在 <code><summary></summary> 上加 aria-expanded 和 aria-controls，指向内部容器 ID；内部容器加 role="region" 并设 aria-labelledby 回指 summary。否则屏幕阅读器可能无法正确播报展开状态。
细节容易被忽略的是：当评分细则含表格或代码块时，<details></details> 内部的 <table> 或 <code><pre class="brush:php;toolbar:false;"></pre> 会破坏语义流，建议改用 <dl></dl> 描述列表组织维度与说明，更贴合“细则”本质。
