使用 和 标签可实现语义化、无障碍、无需JavaScript的HTML折叠摘要功能，支持默认展开、自定义样式与图标，并提升可访问性和SEO。
主要通过
和
这对组合标签来实现HTML文档摘要功能。它能让你在页面上创建一个可折叠的区域，其中
就是那个默认可见的标题或摘要，用户点击它就能展开或折叠内部的详细内容。
在HTML中，如果你想为文档的一部分内容提供一个可折叠的摘要，最直接且语义化的方式就是使用
和
标签。这就像给你的内容加了个“折叠菜单”，用户点击一下，就能看到或隐藏详细信息。
标签是整个可折叠区域的容器，而
标签则是这个区域的“标题”或者说“摘要文本”，它是默认可见的部分。当用户点击
时，
标签内的其他内容就会显示出来，再次点击则会隐藏。
举个例子：
立即学习“前端免费学习笔记（深入）”；
点击这里查看更多关于HTML摘要标签的用法
HTML的摘要标签，即
zuojiankuohaophpcnsummaryyoujiankuohaophpcn，必须作为zuojiankuohaophpcndetailsyoujiankuohaophpcn元素的第一个子元素出现。它定义了zuojiankuohaophpcndetailsyoujiankuohaophpcn元素中可见的标题。如果没有
zuojiankuohaophpcnsummaryyoujiankuohaophpcn标签，浏览器会提供一个默认的“详细信息”或“Details”文本作为摘要。
- 它非常适合FAQ（常见问题）列表。
- 或者用于折叠较长的内容块，保持页面整洁。
- 甚至可以用于构建简单的手风琴效果。
这段代码会渲染出一个带有“点击这里查看更多关于HTML摘要标签的用法”文本的标题。点击这个标题，下面的段落和列表就会展开。这比起用JavaScript去控制
display: none/block要简洁和语义化得多。我个人觉得，这种原生支持真是太棒了，省去了不少写JS的麻烦。
为什么选择使用
和
标签而非自定义JavaScript实现？
我经常看到一些开发者为了实现内容的展开/折叠效果，会倾向于自己写JavaScript来控制元素的
display属性，或者切换CSS类。这当然可行，但说实话，当HTML原生提供了
和
这对组合时，我真的建议优先考虑它们。
首先，也是最重要的一点，是语义化。
details和
summary明确告诉浏览器和辅助技术（如屏幕阅读器）这块内容是“可折叠的详细信息”，
summary是其“摘要”。这比一个
div加上
onclick事件要清晰得多，对SEO和无障碍访问都有直接的好处。搜索引擎能更好地理解你的内容结构，屏幕阅读器也能正确地向用户传达这是一个可交互的、可展开/折叠的区域。
其次，减少JavaScript依赖。这意味着更少的代码量，更快的页面加载速度，以及更低的维护成本。你不需要担心各种事件监听、状态管理，浏览器已经帮你处理了这些。对于那些不需要复杂交互的场景，原生标签简直是福音。想想看，如果用户的浏览器禁用了JavaScript，或者JS加载失败了，你自定义的折叠功能可能就废了，但
依然能正常工作，虽然样式可能不那么精致，但基本功能还在，这是一种渐进增强的体现。
再来，浏览器兼容性其实已经相当不错了。现代浏览器对这组标签的支持度非常高，你基本不用担心兼容性问题。如果真的要考虑旧版IE，那可能需要一些polyfill，但那也是少数情况了。
所以，在我看来，除非你需要非常定制化的展开/折叠动画或复杂逻辑，否则
和
绝对是首选。它不仅让你的HTML更干净、更具语义，还提升了用户体验和网站的可访问性。
如何自定义
和
标签的样式，使其更符合设计要求？
原生
和
标签在不同浏览器下会自带一些默认样式，比如那个小小的展开/折叠箭头。虽然功能上没问题，但在实际项目中，我们往往需要它们与整体设计风格保持一致。这时候，CSS就派上用场了。
最常见的一个需求就是去除或替换默认的箭头图标。你可以通过
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来添加自定义的图标，并根据
的
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，你可以完全掌控
和
的外观，让它们完美融入你的设计。比如，我个人就喜欢用这种方式来做FAQ列表，每个问题一个
，答案放在里面，既整洁又方便用户查找。
使用
和
标签时，有哪些进阶技巧或需要注意的细节？
虽然
和
用起来很方便，但在实际项目中，还有一些细节值得我们留意，以确保最佳的用户体验和代码质量。
一个很重要的点是无障碍性（Accessibility）。正如前面提到的，这对标签本身就具有良好的语义，这为辅助技术提供了基础。但我们作为开发者，还可以做得更好。确保
summary的内容简洁明了，能够清晰地概括其内部信息。用户应该能够仅通过
summary的文本就大致判断出展开后会看到什么。此外，浏览器会默认处理键盘导航（Tab键聚焦，Enter/Space键切换），所以这方面通常无需额外处理。
其次，是open
属性的使用。
标签有一个布尔属性
open。如果存在，表示内容默认是展开的；如果不存在，则默认是折叠的。这在某些场景下非常有用，比如你希望某个FAQ条目默认就展开，或者在页面加载时就显示某些重要信息。
这个部分默认是展开的
用户无需点击即可看到这段内容。
我个人经验是，不要滥用
open属性。如果大部分内容都默认展开，那还不如直接显示出来，省去用户的点击操作。
再来，嵌套
标签是完全允许的。这意味着你可以在一个
内部再包含另一个
，实现多层级的折叠效果。这在构建复杂的导航菜单或多级内容结构时非常有用，但也要注意层级不要太深，否则用户可能会迷失。
最后，一个潜在的“坑”在于动画效果。原生
标签的展开/折叠动画效果通常比较生硬，浏览器默认的动画可能不那么流畅。如果你需要非常平滑的展开动画，比如高度渐变，仅仅依靠CSS的
transition属性直接作用于
details内部元素的高度可能会遇到挑战，因为
details内部元素在折叠时
display属性会变为
none，无法直接过渡。这时候，你可能需要结合一些JavaScript来测量高度，然后动态设置
max-height并配合
transition，或者使用一些成熟的JavaScript库来处理。不过，对于大多数简单的应用场景，默认效果已经足够了。
总的来说，
和
是一对强大且语义化的HTML标签，合理利用它们能大大提升你的网页内容组织效率和用户体验。只要稍加注意样式和无障碍性，它们就能发挥出巨大的价值。
