HTML如何设置细节内容？details和summary标签的作用是什么？-html教程-PHP中文网

HTML如何设置细节内容？details和summary标签的作用是什么？

畫卷琴夢

发布： 2025-08-15 20:08:01

原创

364人浏览过

使用details和summary标签可创建原生可折叠内容，提升信息组织与用户体验。

html如何设置细节内容？details和summary标签的作用是什么？

在HTML中设置细节内容，我们主要依赖

details

登录后复制

和

summary

登录后复制

这两个语义化标签。

summary

登录后复制

标签作为

details

登录后复制

的标题或可见部分，点击它就能展开或收起

details

登录后复制

标签内部的隐藏内容。这提供了一种原生、无需JavaScript即可实现的交互式内容展示方式，非常适合那些需要按需显示信息的场景。

解决方案

要实现可折叠的细节内容，你只需要将需要隐藏的内容包裹在

<details>

登录后复制

标签中，然后将可见的标题或摘要放在

<summary>

登录后复制

标签内，作为

<details>

登录后复制

的第一个子元素。

一个基本的结构会是这样：

<details>
  <summary>点击这里查看更多详情</summary>
  <p>这是被隐藏的详细内容。当用户点击上面的摘要时，这段内容就会显示出来。</p>
  <ul>
    <li>项目一</li>
    <li>项目二</li>
  </ul>
  <p>你可以放任何HTML元素在这里面，比如图片、表格甚至其他嵌套的details。</p>
</details>

<details open>
  <summary>这个详情默认是展开的</summary>
  <p>通过添加`open`属性，你可以让details元素在页面加载时就处于展开状态。</p>
</details>

登录后复制

默认情况下，

details

登录后复制

元素是折叠的，只显示

summary

登录后复制

的内容，旁边会有一个小箭头指示其可展开。当用户点击

summary

登录后复制

时，

details

登录后复制

会展开，显示所有内部内容，箭头也会相应旋转。如果需要默认展开，只需在

<details>

登录后复制

标签上添加

open

登录后复制

属性即可。

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

details

登录后复制

和

summary

登录后复制

标签在用户体验设计中有何独特优势？

从我个人的经验来看，

details

登录后复制

和

summary

登录后复制

标签在提升用户体验方面，简直是化繁为简的利器。它们最显著的优势在于能够有效管理信息密度，避免页面内容过于冗长或杂乱。想象一下，一个FAQ页面，如果所有问题和答案都平铺直叙，用户可能需要滚动很久才能找到自己关心的点。但如果使用

details

登录后复制

，就能将答案隐藏起来，只展示问题，页面瞬间清爽许多。

这种按需加载信息的模式，不仅减少了用户的认知负担，也让页面加载初期显得更轻巧。用户可以主动选择是否深入了解某个细节，这种控制感本身就是一种很好的体验。而且，由于它是原生HTML特性，无需JavaScript就能实现基础功能，这意味着更好的可访问性和更快的渲染速度。对于那些对性能和无障碍设计有严格要求的项目，这几乎是首选。它提供了一种语义化的方式来表示“这是可选的详细信息”，而不是简单地通过CSS

display: none

登录后复制

来隐藏。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

如何通过CSS自定义

details

登录后复制

和

summary

登录后复制

的外观与交互？

虽然

details

登录后复制

和

summary

登录后复制

提供了原生的交互，但其默认外观可能并不总是符合设计需求。幸运的是，它们对CSS非常友好。

最常见的需求之一就是自定义那个默认的展开/折叠箭头。你可以通过设置

summary

登录后复制

元素的

list-style: none;

登录后复制

来移除它，然后用伪元素（

::before

登录后复制

或

::after

登录后复制

）或者背景图片来替换成你自己的图标。

/* 移除默认箭头 */
summary {
  list-style: none; /* 针对WebKit/Blink浏览器 */
  /* Firefox的默认箭头可能需要-moz-list-bullet或类似的属性，但list-style通常足够 */
  cursor: pointer; /* 提示用户这是一个可点击的元素 */
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  display: block; /* 确保它独占一行 */
}

/* 针对Firefox，可能需要额外处理伪元素 */
summary::-webkit-details-marker {
  display: none; /* 针对Chrome/Safari等 */
}
summary::marker { /* 针对Firefox */
  display: none;
}

/* 自定义展开/折叠图标 */
summary::after {
  content: '▶'; /* 默认是向右的箭头 */
  float: right;
  transition: transform 0.2s ease-in-out;
}

details[open] summary::after {
  content: '▼'; /* 展开时向下 */
  transform: rotate(90deg); /* 也可以是旋转90度 */
}

/* 样式化details内部内容 */
details p {
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-top: none;
}

登录后复制

你可以自由地为

summary

登录后复制

添加背景色、边框、字体样式等，让它看起来更像一个按钮或标题。当

details

登录后复制

处于展开状态时，它会有一个

open

登录后复制

属性，你可以利用

details[open]

登录后复制

选择器来为展开状态下的

summary

登录后复制

或内部内容添加特定的样式，比如改变背景色，或者让自定义的图标旋转。这给了我们极大的灵活性去匹配整体的UI设计风格。

在实际项目中，

details

登录后复制

和

summary

登录后复制

标签有哪些常见的应用场景和注意事项？

在实际开发中，

details

登录后复制

和

summary

登录后复制

标签的应用场景非常广泛，我个人最常用的就是：

常见问题解答（FAQ）：这是最经典的用法。每个问题作为
```
summary
```
登录后复制
，答案作为
```
details
```
登录后复制
内容，页面既简洁又易于导航。
可折叠的导航菜单或子菜单：对于层级较深的导航，可以用
```
details
```
登录后复制
来隐藏子菜单，点击父级菜单展开。不过，对于复杂的导航，可能还需要JavaScript来处理多层展开或关闭其他菜单项的逻辑。
显示/隐藏可选表单字段：在一些复杂的表单中，某些字段可能是可选的，或者只有在特定条件下才需要填写。将这些字段放在
```
details
```
登录后复制
中，可以减少表单的视觉压力。
“阅读更多”或“查看更多信息”：当文章或产品描述过长时，可以将部分内容隐藏在
```
details
```
登录后复制
中，只显示摘要，让用户选择是否展开。
技术文档或代码示例：对于冗长的代码块或详细的技术解释，将其折叠起来可以提升文档的可读性。

至于注意事项，有几点是值得留意的：

无障碍性（Accessibility）：原生
```
details
```
登录后复制
和
```
summary
```
登录后复制
在无障碍性方面表现良好，它们自带键盘导航（Tab键聚焦，Enter/Space键切换），并且屏幕阅读器也能很好地识别其语义。尽量避免使用JavaScript过度干预其默认行为，除非你完全理解并能妥善处理无障碍性问题。
SEO影响：虽然
```
details
```
登录后复制
内部的内容默认是隐藏的，但搜索引擎通常能够抓取并索引这些内容。所以，不用担心隐藏内容不被SEO收录。然而，对于最重要的关键词和核心信息，最好还是放在默认可见的部分，以确保其权重。
JavaScript的介入：尽管它们是原生的，但在某些高级场景下，你可能仍然需要JavaScript。比如，你可能想在用户展开
```
details
```
登录后复制
时发送一个分析事件，或者实现一个“手风琴”效果，即展开一个
```
details
```
登录后复制
时自动关闭其他所有
```
details
```
登录后复制
。这时，JavaScript就派上用场了，你可以监听
```
toggle
```
登录后复制
事件。
浏览器兼容性：现代浏览器对
```
details
```
登录后复制
和
```
summary
```
登录后复制
的支持都非常好，但在一些非常老的浏览器（如IE）中可能不被支持。如果需要兼容这些老旧环境，可能需要提供Polyfill或者回退方案。
内容适度：不要把所有内容都塞进
```
details
```
登录后复制
。关键信息、核心功能和用户必须看到的内容，应该始终保持可见。
```
details
```
登录后复制
是用来隐藏“细节”的，不是用来隐藏“必需品”的。过度使用反而会让用户感到困惑或沮丧。