details 标签用于创建可折叠内容块，默认折叠，需配合 summary 标签使用。1. 可通过 css 自定义样式，如修改指示器、背景颜色等；2. 使用 open 属性控制初始状态，存在则默认展开；3. 可结合 javascript 实现动态展开与折叠；4. 常见应用场景包括 faq 页面、文章摘要、表单选项和代码示例展示。
details 标签在 HTML 中用于创建一个可折叠的内容块，默认情况下是折叠的，用户可以通过点击展开查看详细信息。它提供了一种简单的方式来隐藏或显示页面上的额外内容，从而提高页面的可读性和用户体验。
使用 details 标签，你需要配合使用 summary 标签定义了 details 标签的标题，也就是用户点击展开的那个部分。
如何自定义 details 标签的样式？
details 标签本身提供了一些默认样式，但你可以使用 CSS 来完全自定义它的外观。例如，你可以修改展开/折叠指示器的样式，或者改变背景颜色、字体等等。
一种常见的做法是修改展开/折叠指示器（通常是一个小三角形）。你可以使用 summary::-webkit-details-marker 来针对 WebKit 浏览器（Chrome, Safari）修改这个指示器。
details > summary {
list-style: none; /* 移除默认的指示器 */
}
details > summary::before {
content: '▶'; /* 使用 Unicode 字符作为指示器 */
display: inline-block;
margin-right: 5px;
transition: transform 0.2s ease-in-out; /* 添加过渡效果 */
}
details[open] > summary::before {
transform: rotate(90deg); /* 展开时旋转指示器 */
}
summary {
cursor: pointer; /* 鼠标悬停时显示手型 */
}注意，不同浏览器对 details 标签的默认样式可能略有不同，因此最好进行一些跨浏览器的测试。
details 标签的 open 属性有什么用？
details 标签有一个 open 属性，用于控制内容块的初始状态。如果 open 属性存在，则内容块默认是展开的；如果不存在，则默认是折叠的。
你可以通过 JavaScript 来动态控制 open 属性，从而实现更复杂的交互效果。例如，你可以添加一个按钮，点击按钮来展开或折叠 details 标签。
点击展开
更多内容...
这个例子展示了如何通过 JavaScript 来切换 details 标签的 open 属性，从而实现展开和折叠的切换。
details 标签在实际项目中有什么应用场景？
details 标签在很多场景下都非常有用，比如：
-
FAQ 页面：可以使用
details标签来展示常见问题及其答案，用户可以根据需要展开查看。 -
文章摘要：在文章列表中，可以使用
details标签来展示文章摘要，用户点击展开查看完整内容。 -
表单选项：在表单中，可以使用
details标签来隐藏一些不常用的选项，从而简化表单界面。 -
代码示例：在技术文档中，可以使用
details标签来展示代码示例，用户可以点击展开查看完整代码。
总之，details 标签提供了一种简单而有效的方式来组织和展示页面上的内容，可以显著提高用户体验。它本身很简单，但结合 CSS 和 JavaScript，可以实现非常灵活和强大的功能。
