details标签默认收起，添加open布尔属性即可默认展开；写open="true"等值属错误用法，因open只认存在与否，不解析值。
details 标签本身不支持默认展开？用 open 属性解决
直接写 <details><summary>参数</summary>...</details> 默认是收起的，用户得点一下才展开——但商品页常需默认展示关键参数（比如“屏幕尺寸”“电池容量”），又不想堆满页面。加 open 属性就行：<details open>。注意它是个布尔属性，写上就生效，不用赋值 open="true"，否则反而可能被某些解析器误读。
summary 里放图标或小箭头？用 ::marker 或 inline SVG 更稳
很多人想在 <summary> 前加个向下箭头，然后展开时旋转。别用伪元素 ::before 直接插字符（比如 ▼），因为部分浏览器对 <summary> 的样式支持有限。推荐两种可靠方式：
- 用 CSS
details[open] summary::marker { content: "▼"; }控制展开/收起状态下的符号（注意：::marker在 Safari 15.4+ 才稳定支持） - 更兼容的做法：在
<summary>内直接写<svg>，用 class 切换 transform，例如：<summary><svg class="toggle-icon">...</svg> 参数详情</summary>，再配 CSSdetails[open] .toggle-icon { transform: rotate(180deg); }
多个 details 并排显示错乱？用 display: inline-grid 或 flex 包裹
商品页常把“外观”“性能”“接口”等参数分组放进不同 <details>，若直接并列写，它们会垂直堆叠占满整行。想横向排列（比如三栏）、又保持响应式，不要给 <details> 设 display: inline-block（容易因换行符产生间隙）。推荐外层包一层容器：
<div style="display: inline-grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;"> <details open><summary>屏幕</summary>6.7 英寸 OLED</details> <details><summary>处理器</summary>骁龙 8 Gen 3</details> </div>
这样既自适应宽度，又避免手动写媒体查询。
立即学习“前端免费学习笔记（深入）”；
SEO 和屏幕阅读器友好吗？summary 文本必须准确描述内容
<summary> 不只是标题，它是整个 <details> 的可访问入口。搜索引擎和读屏软件都依赖它理解折叠内容主题。常见错误是写“点击查看”“展开了解”——这等于没说。应该写实质信息，比如 <summary>电池与充电：5000mAh + 100W 有线快充</summary>。另外，<details> 内容仍会被爬虫索引，无需额外处理；但若参数含大量重复模板文本（如“本产品符合国标 GB/T XXXX-2022”），建议用 aria-hidden="true" 标记非关键说明，避免干扰主信息流。
细节上最易忽略的是：iOS Safari 对 <details> 的 open 属性变更监听不触发 toggle 事件，如果靠 JS 动态控制展开状态（比如点击按钮同步打开多个），得手动 dispatch new Event('toggle') 或改用 class 切换模拟行为。
