错题列表用<details>实现可折叠章节分组，需确保<summary>为首个子元素且内嵌<h3>，错题项用<ul>/<ol>列出；通过data-chapter属性支持跨章节检索；代码须用<code>或<pre><code>包裹；打印时用@media print强制展开。
错题列表用 <details> 实现可折叠章节分组
HTML 本身没有“错题归类”语义标签，但 <details> + <summary> 是最轻量、原生支持、无需 JS 就能实现按章节目录折叠/展开错题的方案。比手写 div + CSS + JS 更可靠，兼容性从 Chrome 12、Firefox 49、Safari 6 开始就稳定支持（Edge 79+），连 iOS Safari 都没问题。
常见错误是把 <summary> 写成独立标签，或在 <details> 外套 div 导致嵌套失效——<details> 必须直接包含且仅包含一个 <summary> 和任意后续内容。
-
<summary>必须是<details>的第一个子元素，否则不触发折叠逻辑 - 章节标题建议用
<h3>包裹在<summary>内，既保持语义又不影响交互 - 错题项统一用
<ol>或<ul>列出，避免用多个<p>堆砌，方便后续加样式或筛选
<details open>
<summary><h3>第二章：CSS 盒模型</h3></summary>
<ul>
<li>题目：<code>margin: 0 auto</code> 失效的原因？</li>
<li>错误选项：<code>display: inline</code></li>
<li>知识点：<code>margin: 0 auto</code> 要求元素有明确宽度且 <code>display</code> 为 <code>block</code> 或 <code>flex</code></li>
</ul>
</details>
用 data-chapter 属性做错题跨章节检索
纯 HTML 无法搜索，但加 data-chapter 这类自定义属性，后续用几行 JS 就能筛出“所有第三章的错题”或“含‘flex’关键词的错题”。这个属性不干扰渲染，也不影响 SEO，是静态错题页最实用的元数据载体。
容易踩的坑是把章节名写死成中文（如 data-chapter="第三章"），导致 JS 字符串匹配脆弱；或者漏写属性值，让 querySelectorAll('[data-chapter]') 返回空集合。
立即学习“前端免费学习笔记（深入）”；
- 推荐用简短英文或数字标识章节，例如
data-chapter="ch2"、data-chapter="layout" - 每个错题
<li>或包裹它的<section>上加该属性，别只加在<details>根上（否则无法单独定位某道题） - 如果错题涉及多个知识点，可用空格分隔多个值：
data-tags="flex margin box-sizing"
错题里嵌代码片段必须用 <code> 和 <pre> 组合
错题常含代码片段（比如 display: flex、event.preventDefault()），直接写在段落里会被浏览器当作普通文本渲染，丢失格式、无法选中、也没语义。正确做法是：单行用 <code>，多行用 <pre><code> 嵌套。
典型错误是只用 <pre> 不套 <code>，导致屏幕阅读器无法识别这是代码；或把整个错题描述塞进 <pre>，破坏段落流和换行控制。
- 属性名、CSS 值、JS 方法名、HTML 标签名一律用
<code>，例如：class、textContent、<input> - 代码块必须用
<pre><code>，并在<code>上加class="css"等便于后续加语法高亮 - 避免在
<pre>里写解释性文字，描述放外面，代码放里面
打印错题页时 <details> 默认全部展开
用户想打印整份错题集，但默认状态下 <details> 在打印预览里是收起的——这会让一半内容消失。解决方法不是 JS 模拟点击，而是用媒体查询强制展开：
@media print {
details {
display: block;
}
details[open] {
display: block;
}
summary {
display: list-item;
}
}
注意：不能只写 details { open: true }（无效），也不能依赖 :not([open]) 反向隐藏（打印时状态不可靠）。真正起作用的是重置 display 并确保 summary 显示为列表项，这样标题和内容才都会输出。
这个细节极容易被忽略——开发时只看屏幕，忘了打印场景；等真要交纸质版才发现缺了一半题。
