html5的<details>和<summary>标签能实现原生折叠内容功能。1. 核心用法是将隐藏内容包裹在<details>中，标题放在其内的<summary>里；2. 应用场景包括faq列表、高级设置折叠、法律条款收纳、教程补充说明等；3. 可通过css自定义样式，如移除默认箭头、添加图标及动画，并用javascript监听toggle事件实现复杂交互；4. 兼容主流浏览器，但需注意老旧浏览器支持问题，同时它们具备良好无障碍支持和seo友好性。
HTML5的<details>和<summary>标签，它们就像是网页上的一个“小抽屉”，你点击一下，内容就展开了；再点一下，内容就收起来了。它们是原生的可折叠内容组件，不需要JavaScript就能实现基本的交互效果，非常方便。
解决方案
要实现折叠内容，核心就是将你需要隐藏或显示的内容包裹在<details>标签里，而作为“抽屉把手”的标题则放在<summary>标签里，<summary>必须是<details>的第一个子元素。
一个最简单的例子是这样的：
立即学习“前端免费学习笔记（深入）”；
<details>
<summary>点我查看更多信息</summary>
<p>这里是隐藏起来的内容，只有点击了上面的标题才会显示出来。你可以放文字、图片，甚至其他HTML元素。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</details>
<details open>
<summary>这个抽屉默认是打开的</summary>
<p>通过在`details`标签上添加`open`属性，可以控制它在页面加载时就是展开状态。</p>
</details>你看，就这么几行代码，一个可交互的折叠区域就出来了。浏览器会很聪明地给<summary>前面加一个小箭头或三角形，指示它是一个可点击的开关。我觉得这真的是HTML5带来的一个很实用的进步，省去了我们写一堆JS来模拟这种效果的麻烦。
在实际开发中，<details>和<summary>标签有哪些应用场景？
在我看来，<details>和<summary>标签的用武之地非常广，而且很多时候它们能大大简化我们的开发工作。最直观的，就是FAQ（常见问题解答）列表。你不需要为每个问题单独写JS来控制展开收起，直接用这套标签，结构清晰，维护起来也方便。用户点击问题，答案就出来了，再点就收回去，体验非常流畅。
再比如，在一些表单里，需要显示一些不常用的高级选项或者说明。你可以把这些内容放在<details>里，标题写成“高级设置”或者“详细说明”，这样既不占用页面空间，又能让需要这些信息的用户轻松找到。我之前做过一个复杂的配置页面，用这个就让界面清爽了不少。
还有，一些冗长的法律条款、隐私政策或者用户协议，如果全部铺开会显得页面很长很压抑。用<details>把不那么核心的条款折叠起来，只展示标题，用户可以根据需要展开阅读，这无疑提升了用户的阅读体验，也让页面布局更合理。甚至在文章或者教程中，对一些补充说明、代码示例或者引用内容，也可以考虑用它来组织，让主线内容更聚焦，细节部分按需展开。
它也为无障碍性提供了很好的原生支持，屏幕阅读器能够很好地识别和朗读这些折叠内容的状态，我觉得这比我们自己写JS实现的折叠组件在无障碍方面要省心得多。
如何自定义<details>和<summary>的样式和行为？
虽然<details>和<summary>提供了原生的交互，但默认的样式可能不符合你的设计需求。这时候，CSS就派上用场了。
要自定义样式，最常见的就是那个小箭头。默认的箭头样式在不同浏览器里可能有些差异，而且很多时候我们想用自己的图标。你可以通过设置summary元素的list-style: none;来移除默认的箭头，然后利用::before或::after伪元素来添加自定义的图标或者动画效果。
details summary {
list-style: none; /* 移除默认的箭头 */
cursor: pointer;
padding: 10px;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
position: relative; /* 为伪元素定位 */
}
details summary::before {
content: '+'; /* 默认显示加号 */
position: absolute;
right: 10px;
font-size: 1.2em;
transition: transform 0.3s ease;
}
details[open] summary::before {
content: '-'; /* 打开时显示减号 */
transform: rotate(0deg); /* 也可以是旋转效果 */
}
/* 当details打开时，可以给summary或者内部内容添加样式 */
details[open] summary {
background-color: #e0e0e0;
}
details[open] p {
padding: 10px;
border: 1px solid #eee;
border-top: none;
}通过details[open]这个属性选择器，你可以针对内容展开时的状态进行样式调整，比如改变背景色，或者让展开的内容有一个特定的边框。
至于行为，虽然它们原生支持折叠，但如果你需要更复杂的联动，比如点击一个<details>，其他的<details>自动关闭，或者在展开/收起时触发其他动画，那就需要引入JavaScript了。你可以监听details元素的toggle事件，这个事件在内容展开或收起时都会触发。
document.querySelectorAll('details').forEach(detail => {
detail.addEventListener('toggle', () => {
if (detail.open) {
console.log('这个details现在是打开的！');
// 可以在这里添加动画类名，或者关闭其他details
} else {
console.log('这个details现在是关闭的！');
}
});
});我觉得，这种原生与JS结合的方式，既利用了HTML的语义化和原生能力，又保留了我们对复杂交互的控制力，是一个很不错的平衡点。
使用<details>和<summary>时需要注意哪些兼容性或无障碍性问题？
在使用<details>和<summary>时，有一些点是值得我们留意的，这关乎用户体验和网站的健壮性。
首先是浏览器兼容性。目前主流的现代浏览器对这两个标签的支持都非常好，包括Chrome、Firefox、Safari、Edge等。所以，在大多数情况下，你不用太担心它们无法工作。但如果你需要支持一些非常老的浏览器版本（比如IE11或更早），那它们可能就无法正常显示了，需要提供Polyfill或者使用JS/CSS的替代方案。不过，现在这种情况越来越少了，通常我们能放心地使用它们。
其次是无障碍性（Accessibility）。这是我觉得这两个标签最棒的地方之一。它们天生就具有良好的语义，并且浏览器会自动处理键盘导航（Tab键聚焦，空格或回车键切换状态）和屏幕阅读器的支持。屏幕阅读器会正确地告知用户这是一个可展开/折叠的区域，以及它的当前状态。这意味着，我们不需要额外添加ARIA属性来增强其无障碍性，这大大减轻了开发者的负担。当然，前提是你的<summary>内容要足够清晰，让用户知道点击它会看到什么。
关于SEO，内容被包裹在<details>标签里，并不会影响搜索引擎对内容的抓取和索引。搜索引擎仍然能够“看到”并理解折叠起来的内容。不过，有观点认为，折叠起来的内容在搜索引擎的权重上可能会略低于直接展示的内容，但这通常不是一个大问题，尤其对于非核心信息而言。
一个小的使用陷阱可能是嵌套。虽然你可以嵌套<details>，但如果层级过多，可能会让用户感到困惑。另外，如果你用JS去完全覆盖了它们的默认行为，比如阻止了toggle事件的默认动作，那么你可能就需要自己去处理键盘交互和无障碍性，这会抵消它们原生带来的便利性。所以在加JS的时候，我通常会倾向于在不破坏原生行为的基础上进行增强，而不是完全重写。
总的来说，<details>和<summary>是一对非常实用的HTML5标签，它们提供了一种简单、语义化且无障碍的折叠内容解决方案。在日常开发中，只要合理运用，就能让我们的页面更整洁，用户体验更佳。
