html标签怎么表示详情摘要_details和summary标签【介绍】-html教程-PHP中文网

中必须是第一个直接子元素，不可嵌套或包裹在其他标签内；支持默认展开（open 布尔属性）、js 控制（el.open = false）、toggle 事件监听；兼容性需注意 ie 不支持，无障碍需保留原生语义，避免覆盖 role 或隐藏 summary。

html标签怎么表示详情摘要_details和summary标签【介绍】

details 和 summary 标签怎么写才不塌陷

直接用 <details></details> 包 <summary></summary>，但浏览器默认样式会让 <summary></summary> 前出现小三角，且点击后展开内容——这没问题；问题常出在内容塌陷、点击无反应或样式错乱。根本原因是：<summary></summary> 必须是 <details></details> 的第一个子元素，且不能嵌套另一个 <details></details> 或 <summary></summary>。

错误写法：<details><p><summary>标题</summary></p> <p>正文</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details>（<summary></summary> 不是直接子元素）
正确结构：<details><summary>标题</summary><p>正文</p></details>
如果用了 CSS 重置了 outline 或 list-style，可能让小三角消失，但交互仍存在——建议用 appearance: none + 自定义伪元素控制，而非直接删光

summary 里能放按钮或链接吗

能，但要注意焦点和语义。原生 <summary></summary> 是可聚焦、可键盘操作（Space/Enter）的交互元素，如果在里面塞 <button></button> 或 @#@#@#@#@#@#@#@#@#@0

更稳妥的做法：把链接放在展开后的内容区，而不是 summary 行内

details 默认展开和 JS 控制开关状态

<details open></details> 可以默认展开，但别以为加个 open="false" 就能关闭——HTML 属性 open 是布尔属性，只看是否存在，不看值。JS 操作要用 open 属性（不是 getAttribute）。

默认展开：<details open><summary>说明</summary><p>内容</p></details>
JS 关闭：document.querySelector('details').open = false
监听切换：el.addEventListener('toggle', () => console.log(el.open)) —— 注意只有用户手动触发才会触发 toggle 事件，JS 赋值不会触发
兼容性提示：IE 完全不支持，Safari 12.1+、Chrome 12+、Firefox 49+ 支持良好；如需兼容旧环境，得降级为手写 aria-expanded + class 切换

无障碍（a11y）容易漏掉的三件事

屏幕阅读器靠 <details></details> 的隐式 ARIA 角色（role="group"）和 <summary></summary> 的 role="button" 来识别，但实际项目中常因以下操作破坏语义：

给 <summary></summary> 加 role="heading" 或 aria-label：覆盖原生角色，导致“可点击但读不出是开关”
用 display: none 隐藏 <summary></summary>：应改用 visibility: hidden 或 clip-path，否则屏幕阅读器完全忽略它
展开内容里有 <form></form> 或 <input> 却没设 autofocus：用户展开后焦点不在可操作区域，得手动 Tab 寻找——尤其移动端体验差