使用 <details> 和 <summary> 标签可实现语义化、无障碍、无需JavaScript的HTML折叠摘要功能，支持默认展开、自定义样式与图标，并提升可访问性和SEO。

主要通过

<details>

和

<summary>

这对组合标签来实现HTML文档摘要功能。它能让你在页面上创建一个可折叠的区域，其中

<summary>

就是那个默认可见的标题或摘要，用户点击它就能展开或折叠内部的详细内容。

在HTML中，如果你想为文档的一部分内容提供一个可折叠的摘要，最直接且语义化的方式就是使用

<details>

和

<summary>

标签。这就像给你的内容加了个“折叠菜单”，用户点击一下，就能看到或隐藏详细信息。

<details>

标签是整个可折叠区域的容器，而

<summary>

标签则是这个区域的“标题”或者说“摘要文本”，它是默认可见的部分。当用户点击

<summary>

时，

<details>

标签内的其他内容就会显示出来，再次点击则会隐藏。

举个例子：

立即学习“前端免费学习笔记（深入）”；

<details>   <summary>点击这里查看更多关于HTML摘要标签的用法</summary>   <p>HTML的摘要标签，即<code><summary></code>，必须作为<code><details></code>元素的第一个子元素出现。它定义了<code><details></code>元素中可见的标题。</p>   <p>如果没有<code><summary></code>标签，浏览器会提供一个默认的“详细信息”或“Details”文本作为摘要。</p>   <ul>     <li>它非常适合FAQ（常见问题）列表。</li>     <li>或者用于折叠较长的内容块，保持页面整洁。</li>     <li>甚至可以用于构建简单的手风琴效果。</li>   </ul> </details>

这段代码会渲染出一个带有“点击这里查看更多关于HTML摘要标签的用法”文本的标题。点击这个标题，下面的段落和列表就会展开。这比起用JavaScript去控制

display: none/block

要简洁和语义化得多。我个人觉得，这种原生支持真是太棒了，省去了不少写JS的麻烦。

为什么选择使用

<details>

和

<summary>

标签而非自定义JavaScript实现？

我经常看到一些开发者为了实现内容的展开/折叠效果，会倾向于自己写JavaScript来控制元素的

display

属性，或者切换CSS类。这当然可行，但说实话，当HTML原生提供了

<details>

和

<summary>

这对组合时，我真的建议优先考虑它们。

首先，也是最重要的一点，是语义化。

details

和

summary

明确告诉浏览器和辅助技术（如屏幕阅读器）这块内容是“可折叠的详细信息”，

summary

是其“摘要”。这比一个

div

加上

onclick

事件要清晰得多，对SEO和无障碍访问都有直接的好处。搜索引擎能更好地理解你的内容结构，屏幕阅读器也能正确地向用户传达这是一个可交互的、可展开/折叠的区域。

其次，减少JavaScript依赖。这意味着更少的代码量，更快的页面加载速度，以及更低的维护成本。你不需要担心各种事件监听、状态管理，浏览器已经帮你处理了这些。对于那些不需要复杂交互的场景，原生标签简直是福音。想想看，如果用户的浏览器禁用了JavaScript，或者JS加载失败了，你自定义的折叠功能可能就废了，但

<details>

依然能正常工作，虽然样式可能不那么精致，但基本功能还在，这是一种渐进增强的体现。

再来，浏览器兼容性其实已经相当不错了。现代浏览器对这组标签的支持度非常高，你基本不用担心兼容性问题。如果真的要考虑旧版IE，那可能需要一些polyfill，但那也是少数情况了。

所以，在我看来，除非你需要非常定制化的展开/折叠动画或复杂逻辑，否则

<details>

和

<summary>

绝对是首选。它不仅让你的HTML更干净、更具语义，还提升了用户体验和网站的可访问性。

如何自定义

<details>

和

<summary>

标签的样式，使其更符合设计要求？

原生

<details>

和

<summary>

标签在不同浏览器下会自带一些默认样式，比如那个小小的展开/折叠箭头。虽然功能上没问题，但在实际项目中，我们往往需要它们与整体设计风格保持一致。这时候，CSS就派上用场了。

LLaMA

Meta公司发布的下一代开源大型语言模型

179

查看详情

最常见的一个需求就是去除或替换默认的箭头图标。你可以通过

summary::-webkit-details-marker

(针对WebKit内核浏览器，如Chrome、Safari) 和

summary::marker

(标准写法，Firefox支持) 来控制它。

/* 隐藏默认箭头 */ summary::-webkit-details-marker {   display: none; /* 或者 visibility: hidden; */ } summary::marker {   display: none; }  /* 隐藏IE/Edge的默认图标（如果存在） */ details > summary {   list-style: none; /* 移除列表样式，可能对某些浏览器有效 */ }

隐藏了默认箭头后，你就可以自定义自己的指示图标了。通常，我们会利用伪元素

::before

或

::after

来添加自定义的图标，并根据

<details>

的

open

属性来切换图标状态。

details {   border: 1px solid #eee;   padding: 10px;   margin-bottom: 10px;   border-radius: 4px; }  summary {   font-weight: bold;   cursor: pointer;   padding: 5px 0;   outline: none; /* 移除点击时的焦点框 */   position: relative;   list-style: none; /* 再次强调移除默认列表样式 */ }  /* 自定义展开/折叠图标 */ summary::before {   content: '▶'; /* 默认是向右的箭头 */   display: inline-block;   margin-right: 8px;   transition: transform 0.2s ease; }  details[open] summary::before {   content: '▼'; /* 展开时变为向下的箭头 */   transform: rotate(0deg); /* 确保旋转归零，或者直接用新字符 */ }  /* 更多样式，比如hover效果 */ summary:hover {   color: #007bff; }  details p {   padding-top: 10px;   line-height: 1.6;   color: #555; }

通过这些CSS，你可以完全掌控

<details>

和

<summary>

的外观，让它们完美融入你的设计。比如，我个人就喜欢用这种方式来做FAQ列表，每个问题一个

<details>

，答案放在里面，既整洁又方便用户查找。

使用

<details>

和

<summary>

标签时，有哪些进阶技巧或需要注意的细节？

虽然

<details>

和

<summary>

用起来很方便，但在实际项目中，还有一些细节值得我们留意，以确保最佳的用户体验和代码质量。

一个很重要的点是无障碍性（Accessibility）。正如前面提到的，这对标签本身就具有良好的语义，这为辅助技术提供了基础。但我们作为开发者，还可以做得更好。确保

summary

的内容简洁明了，能够清晰地概括其内部信息。用户应该能够仅通过

summary

的文本就大致判断出展开后会看到什么。此外，浏览器会默认处理键盘导航（Tab键聚焦，Enter/Space键切换），所以这方面通常无需额外处理。

其次，是

open

属性的使用。

<details>

标签有一个布尔属性

open

。如果存在，表示内容默认是展开的；如果不存在，则默认是折叠的。这在某些场景下非常有用，比如你希望某个FAQ条目默认就展开，或者在页面加载时就显示某些重要信息。

<details open>   <summary>这个部分默认是展开的</summary>   <p>用户无需点击即可看到这段内容。</p> </details>

我个人经验是，不要滥用

open

属性。如果大部分内容都默认展开，那还不如直接显示出来，省去用户的点击操作。

再来，嵌套

<details>

标签是完全允许的。这意味着你可以在一个

<details>

内部再包含另一个

<details>

，实现多层级的折叠效果。这在构建复杂的导航菜单或多级内容结构时非常有用，但也要注意层级不要太深，否则用户可能会迷失。

最后，一个潜在的“坑”在于动画效果。原生

<details>

标签的展开/折叠动画效果通常比较生硬，浏览器默认的动画可能不那么流畅。如果你需要非常平滑的展开动画，比如高度渐变，仅仅依靠CSS的

transition

属性直接作用于

details

内部元素的高度可能会遇到挑战，因为

details

内部元素在折叠时

display

属性会变为

none

，无法直接过渡。这时候，你可能需要结合一些JavaScript来测量高度，然后动态设置

max-height

并配合

transition

，或者使用一些成熟的JavaScript库来处理。不过，对于大多数简单的应用场景，默认效果已经足够了。

总的来说，

<details>

和

<summary>

是一对强大且语义化的HTML标签，合理利用它们能大大提升你的网页内容组织效率和用户体验。只要稍加注意样式和无障碍性，它们就能发挥出巨大的价值。