使用 和 标签可实现语义化、无障碍、无需JavaScript的HTML折叠摘要功能，支持默认展开、自定义样式与图标，并提升可访问性和SEO。
主要通过
和
这对组合标签来实现HTML文档摘要功能。它能让你在页面上创建一个可折叠的区域，其中
就是那个默认可见的标题或摘要，用户点击它就能展开或折叠内部的详细内容。
在HTML中，如果你想为文档的一部分内容提供一个可折叠的摘要，最直接且语义化的方式就是使用
和
标签。这就像给你的内容加了个“折叠菜单”，用户点击一下，就能看到或隐藏详细信息。
标签是整个可折叠区域的容器，而
标签则是这个区域的“标题”或者说“摘要文本”，它是默认可见的部分。当用户点击
时，
标签内的其他内容就会显示出来，再次点击则会隐藏。
举个例子：
立即学习“前端免费学习笔记（深入）”；
点击这里查看更多关于HTML摘要标签的用法
HTML的摘要标签，即
，必须作为元素的第一个子元素出现。它定义了元素中可见的标题。如果没有
它非常适合FAQ（常见问题）列表。 或者用于折叠较长的内容块，保持页面整洁。 甚至可以用于构建简单的手风琴效果。标签，浏览器会提供一个默认的“详细信息”或“Details”文本作为摘要。
这段代码会渲染出一个带有“点击这里查看更多关于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标签，合理利用它们能大大提升你的网页内容组织效率和用户体验。只要稍加注意样式和无障碍性，它们就能发挥出巨大的价值。
以上就是HTML文档摘要怎么添加_HTML摘要标签使用教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1576235.html
微信扫一扫 
支付宝扫一扫 
