HTML文档摘要怎么添加_HTML摘要标签使用教程-html教程-PHP中文网

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

蓮花仙者

发布： 2025-09-16 17:28:01

原创

832人浏览过

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

html文档摘要怎么添加_html摘要标签使用教程

主要通过

<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就派上用场了。

AiTxt 文案助手

AiTxt 利用 Ai 帮助你生成您想要的一切文案，提升你的工作效率。

查看详情

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

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标签，合理利用它们能大大提升你的网页内容组织效率和用户体验。只要稍加注意样式和无障碍性，它们就能发挥出巨大的价值。

以上就是HTML文档摘要怎么添加_HTML摘要标签使用教程的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Notion模板一键管理HTML+CSS学习全项目！ html浏览器临时缓存内容如何清理_html浏览器临时缓存内容清理的实用技巧如何实现HTML在线多语言切换_HTML在线多语言切换功能实现与本地化方案 dmenu三秒启动HTML+CSS实时预览终端！ Windows PowerShell如何批量重命名HTML练习文件？

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

为什么选择使用
<details>
登录后复制
和
<summary>
登录后复制
标签而非自定义JavaScript实现？

如何自定义
<details>
登录后复制
和
<summary>
登录后复制
标签的样式，使其更符合设计要求？

使用
<details>
登录后复制
和
<summary>
登录后复制
标签时，有哪些进阶技巧或需要注意的细节？

大家都在看：

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

为什么选择使用<details>登录后复制和<summary>登录后复制标签而非自定义JavaScript实现？

如何自定义<details>登录后复制和<summary>登录后复制标签的样式，使其更符合设计要求？

使用<details>登录后复制和<summary>登录后复制标签时，有哪些进阶技巧或需要注意的细节？

大家都在看：

为什么选择使用
<details>
登录后复制
和
<summary>
登录后复制
标签而非自定义JavaScript实现？

如何自定义
<details>
登录后复制
和
<summary>
登录后复制
标签的样式，使其更符合设计要求？

使用
<details>
登录后复制
和
<summary>
登录后复制
标签时，有哪些进阶技巧或需要注意的细节？