details标签可默认收起非核心信息（如参数、条款），保持首屏清爽且不丢失细节，原生支持SEO与无障碍；默认收起，加open属性即初始展开；summary内图标宜用CSS ::marker 控制，避免直接写HTML符号；移动端失效需排查pointer-events、display值及浏览器兼容性。

details标签在产品介绍页里能解决什么问题

它能默认收起非核心信息，比如技术参数、兼容性列表、售后条款，避免页面一打开就堆满文字。用户想看再点开，既保持首屏清爽，又不丢失细节——比手写JS折叠逻辑轻量得多，原生语义也更利于SEO和屏幕阅读器。

怎么让details默认展开或关闭

details 默认是关闭的；加 open 属性就能让它初始展开：

<details open><summary>规格参数</summary><p>尺寸：240×180×85mm</p></details>

但别滥用 open：首页主图下方突然弹出大段参数会打断浏览流。常见做法是只对「用户大概率需要」的区块设 open，比如“常见问题”或“包装清单”。

summary里放图标或箭头时要注意什么

直接写 <summary>▶ 规格参数</summary> 在 Safari 里可能被忽略（它会用自带箭头覆盖），导致图标失效。稳妥做法是用 CSS 控制：

details summary::marker { content: "▸ "; }<br>details[open] summary::marker { content: "▼ "; }

或者干脆用 span 包裹文字，再用伪元素控制图标，避免依赖浏览器默认行为。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

移动端点击无响应？检查这几个点

有些安卓 WebView 或老版微信内置浏览器对 details 支持不全，表现为点击没反应。排查顺序如下：

• 确认没用 pointer-events: none 或 touch-action: none 覆盖在 summary 上
• 不要给 summary 设 display: block 以外的值（比如 flex），否则部分内核会失焦
• 真机测试时避开 Chrome 的“桌面站点”模式，它有时会模拟错误的 UA 导致降级

实在不行，就用 details 作为兜底，外层套一层 JS 切换 class 的降级逻辑——但多数现代项目已无需这么麻烦。

立即学习“前端免费学习笔记（深入）”；

细节折叠本身很简单，难的是判断哪些内容该折、折到哪一级。比如“支持快充”后面要不要展开协议版本和功率曲线？这得看目标用户是普通消费者还是极客——后者可能希望点一下就看到 PD3.1 的 EPR 模式说明，前者连 USB-C 都未必分得清。