HTML中details和summary标签的使用详解
在HTML5标准引入的语义化标签中，<details>和<summary>是一对用于实现内容折叠展开功能的组合标签，无需依赖JavaScript即可实现原生的内容交互效果，常用于FAQ列表、补充说明、附加信息等场景。
一、标签基础定义
1. <details>标签
<details>是一个可展开/折叠的交互式容器，默认状态下内容处于隐藏状态，用户点击后才会显示内部包含的内容。它是块级元素，可以包裹任意类型的HTML内容，包括文本、图片、表单、其他标签等。
2. <summary>标签
<summary>是<details>的子元素，用于定义展开/折叠区域的标题或触发按钮。如果<details>内部没有<summary>，浏览器会默认显示“详细信息”作为触发文本；如果有<summary>，则点击<summary>的内容即可切换<details>的展开/折叠状态。
二、基础使用语法
两个标签的组合使用非常简洁，基本结构如下：
<details> <summary>点击查看细节内容</summary> <p>这里是隐藏的细节内容，点击上方标题可以展开查看，再次点击会折叠隐藏。</p> <ul> <li>支持嵌套任意HTML内容</li> <li>默认处于折叠状态</li> <li>原生支持交互无需JS</li> </ul> </details>
三、核心属性说明
<details>标签只有一个特有的布尔属性open，用于控制内容的初始状态：
不添加
open属性：默认折叠，内容隐藏添加
open属性：默认展开，内容直接显示
示例代码如下：
<!-- 默认展开的details示例 --> <details open> <summary>默认展开的细节板块</summary> <p>这个区域在页面加载时就会直接显示内容，不需要用户点击触发。</p> </details>
四、常见应用场景
1. FAQ常见问题列表
这是最常见的使用场景，每个问题作为<summary>，答案作为<details>的隐藏内容，用户可以按需展开查看对应问题的解答。
<h3>常见问题解答</h3> <details> <summary>如何重置账号密码？</summary> <p>可以访问https://www.ipipp.com/password-reset页面，输入注册邮箱获取重置链接，按照提示操作即可完成密码重置。</p> </details> <details> <summary>订单支付后多久发货？</summary> <p>普通订单支付成功后24小时内发货，预售商品会在商品详情页标注的发货时间内发出。</p> </details> <details> <summary>如何申请售后退款？</summary> <p>进入https://www.ipipp.com/order页面，找到对应订单点击“申请售后”，填写退款原因并提交，审核通过后1-3个工作日退款到账。</p> </details>
2. 附加信息展示
对于非核心的补充说明内容，可以用<details>折叠，避免页面内容过于冗长，用户可以自行选择是否查看。
<p>本次活动的参与规则如下：</p> <ul> <li>活动时间：2024年1月1日-2024年1月31日</li> <li>参与对象：全平台注册用户</li> </ul> <details> <summary>查看活动详细规则（含例外情况）</summary> <p>1. 新注册用户需在活动开始前完成实名认证才可参与；</p> <p>2. 同一用户（同一身份证/手机号/设备）仅可参与一次；</p> <p>3. 若发现刷单、作弊等违规行为，平台有权取消参与资格。</p> </details>
3. 代码/日志折叠展示
在技术文档中，较长的代码块或运行日志可以用<details>折叠，用户需要查看时再展开，避免占用过多页面空间。
<p>以下是用户登录接口的返回示例：</p>
<details>
<summary>点击查看完整JSON返回数据</summary>
<pre>
{
"code": 200,
"message": "登录成功",
"data": {
"userId": "123456",
"nickname": "测试用户",
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}
}
</pre>
</details>五、注意事项
<summary>必须是<details>的第一个子元素，否则可能无法正常触发折叠/展开交互
不同浏览器的<details>默认样式略有差异，如需统一样式可以通过CSS自定义，比如修改触发箭头样式、内容边距等
如果需要用JavaScript控制<details>的展开/折叠状态，可以直接操作
open属性：document.querySelector('details').open = true即可展开，设置为false即可折叠这两个标签的兼容性覆盖所有现代浏览器，包括Chrome、Firefox、Edge、Safari等，无需担心兼容性问题