当前位置：首页 > 文章列表 > 文章 > 前端 > HTML文档摘要怎么添加？摘要标签使用教程

HTML文档摘要怎么添加？摘要标签使用教程

2026-02-06 09:23:29 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《HTML文档摘要怎么添加？摘要标签使用教程》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

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

HTML文档摘要怎么添加_HTML摘要标签使用教程

主要通过

和

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

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

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

和

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

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

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

时，

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

举个例子：

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

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

我个人经验是，不要滥用 open 属性。如果大部分内容都默认展开，那还不如直接显示出来，省去用户的点击操作。

再来，嵌套

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

内部再包含另一个

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

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

标签的展开/折叠动画效果通常比较生硬，浏览器默认的动画可能不那么流畅。如果你需要非常平滑的展开动画，比如高度渐变，仅仅依靠CSS的 transition 属性直接作用于 details 内部元素的高度可能会遇到挑战，因为 details 内部元素在折叠时 display 属性会变为 none，无法直接过渡。这时候，你可能需要结合一些JavaScript来测量高度，然后动态设置 max-height 并配合 transition，或者使用一些成熟的JavaScript库来处理。不过，对于大多数简单的应用场景，默认效果已经足够了。

总的来说，

和

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

HTML文档