HTML5结构标签summary怎么用_details展开标题设置【指南】

标签必须嵌套在内才有效，作为其首个子元素定义可折叠标题，点击触发展开/收起；单独使用无效，且需注意Safari兼容性及手风琴等复杂交互应改用ARIA方案。

summary 标签必须嵌套在 details 里才能生效

不是独立可用的标签，它只在

内部起作用，用来定义可折叠区域的标题行。浏览器会自动为

添加展开/收起逻辑，而

就是那个能被点击、带小三角箭头的触发器。

常见错误是单独写

点我展开

，这样完全没效果——它会被当成普通内联元素渲染，无交互、无样式、不联动。

• 是块级容器，支持 open 属性（默认收起，加 open 则初始展开）
• 必须是
  的第一个子元素，否则部分浏览器可能忽略或报错
• 一个
  只能有一个
  ；多写第二个会被当作普通内容，失去标题功能

summary 里的内容可以是任意 HTML，但慎用交互元素

虽然规范允许在

中写 、、甚至 ，但要注意：点击

整体都会触发展开/收起，如果里面嵌了 或 ，反而让屏幕阅读器困惑

原生 ::before 的价值在于简单、免 JS、开箱即用——用在 FAQ 条目、调试信息折叠、表单高级选项这类场景刚好；一上来就塞进动态表单、嵌套列表或实时搜索结果，很快就会卡住。

  
配置说明（点击展开）
  
这里放详细内容……