HTML 中的 Details 标签

什么是 Details 标签？

details 标签是 HTML5 元素，被网页开发者用作内容容器，用于在页面上创建交互式和可折叠的部分。它由在用户选择显示之前隐藏的内容、一个用于可点击摘要的嵌套 <summary> 标签以及一个起始 <details> 标签组成。

HTML <details> 标签用于指定网页上的附加详细信息，用户可以根据需要查看或隐藏这些信息。

根据 W3C HTML 规范，它用作一个披露小部件，用户可以从中检索附加信息或控制。

它与一个相关的标签 <summary> 一起使用。从技术上讲，并不需要 summary 标签，但如果您忽略它，浏览器将使用一些默认文本。

<details> 标签包裹着所有您想要显示或隐藏的内容，而 <summary> 标签包含着该部分的摘要和标题。

此标签对于改善用户体验、分组信息以及为用户提供一种交互式方式来切换内容尤其有用。在现代网页开发中，details 标签是生成更有趣和用户友好界面的有用工具。

语法

details 标签的语法如下：

为什么我们使用 Details 标签？

details 标签常用有以下几个原因。

1. 内容组织

该标签通过以结构化形式呈现信息来促进内容组织。开发者可以使用它创建用户可以根据兴趣展开或折叠的部分，从而使界面更具整体用户友好性。

2. 用户友好界面

Details 标签极大地帮助改善用户体验。通过允许用户显示或隐藏特定内容，网站可以减少混乱，并让访问者更容易关注他们认为最相关的信息。

3. 动态交互

该标签使网页的动态交互成为可能。借助 details 标签，我们可以通过点击摘要来增强用户查看更多内容的能力，从而改善和提升浏览体验。

4. 可访问性设计

Details 标签可以帮助使网页设计更具可访问性和便利性。在 HTML 中，当我们正确实现该标签时，它会增强功能，以便内容创建者可以轻松生成材料，并使用屏幕阅读器和其他技术进行阅读和导航。

5. 空间效率

借助 HTML 中的 details 标签，当处理与所有用户不相关的内容时，我们可以节省网页空间。此标签允许我们为用户提供显示或隐藏特定区域的选项，从而避免信息过载。

总而言之，网页开发者可以使用 details 标签来创建更具结构化、交互式和用户友好的网站。这对于可以有选择地隐藏或显示的内容尤其有用。

Details 标签的属性

在 details 标签中，我们有一些属性可以帮助我们管理元素在 HTML 网页上的行为和外观。

1. Open 属性

Open 属性属于 HTML 的布尔类别。借助 details 标签，我们可以帮助用户轻松查看详细信息，而无需执行任何操作。

示例

2. Ontoggle 属性

"ontoggle" 属性是一个事件处理程序属性。它使程序员能够定义一个 JavaScript 函数，该函数将在用户打开或关闭 details 标签时被调用，从而切换其可见性。

示例

借助这些属性，开发者可以使用 JavaScript 为 details 标签添加动态行为并更改其默认状态。虽然 "ontoggle" 属性允许响应用户与 details 标签的交互执行特定操作，但 "open" 属性对于希望特定内容立即可见的开发者特别有用。

示例 1

输出