摘要

  • details 和 summary 把内容折叠成浏览器原生的展开控件；读者触碰标题，浏览器负责开合。
  • 同一 name 可以把几个控件连成互斥手风琴：打开这一格，另一格会关上。

长网页常像被人一把掀翻的文件柜：操作说明、附加选项、技术细节挤在眼前。开发者早就能写脚本把其中几层折起来。HTML 后来给了更小、更朴素的办法：用 <details> 装内容，先放一个 <summary> 当门牌。浏览器做好铰链，读者决定开门。它没有炫技，却解决了一个每天都要碰到的问题：谁来动手，谁来决定何时看见里面的东西。

W3C 2010 年 3 月首次公开的 HTML 标记草案把 details 与 summary 都标成新元素。草案说，details 提供按需取得额外信息的控件，并写明布尔属性 open。这份文件留下的关键设计，是内容仍留在文档里，显示它的动作却被写进 HTML 自身。门后并非另一个世界，只是读者暂时没打开的这一页。

2011 年的 W3C 标记参考延续了这个语法：summary 在前，open 决定内容是否展示。折叠区的意义因此不必全靠某段藏在脚本文件里的点击程序解释。作者仍决定门后放什么、门牌写什么。“更多”两个字很省位置，也让读者多猜一次谜；“查看传输设置”则把房间名字告诉了来客。好门牌比花哨门锁有用。

现行 HTML 标准把动作说得很细。第一个 summary 子元素是门的说明；作者若没写，浏览器应自行提供一个。没有 open，只显示门牌；有 open，连里面的内容一起显示。读者要求展开或收起，浏览器就添加或移除这个属性。标准还定义 toggle 事件，让页面能知道门刚刚动过。页面结构、可见状态、读者操作，在这里接成了一条短而清楚的链。

连门边的小三角也有规矩。HTML 渲染章节分别规定关闭和打开时的标记样式。它的工作像灯的开关：你看到它，就知道可按，也看得出当前状态。进度报告、少用的设置、长篇参考资料，都能用这套熟悉动作收纳细节。互联网史里最耐用的东西，往往不是最响亮的按钮，而是不用讲解就会用的那个。

后来，小门之间开始互相管闲事。同一 name 的多个 details 组成互斥组；读者打开一格，原先开的那格会关上。网页无需另外写脚本，就能排出手风琴式目录。现行标准也直说，这种互斥会让需要同时看几格内容的人烦躁。版面整齐了，读者却可能得来回开门。节省的是页面的空间，花掉的是人的注意力。

这套小机关把权力分得很具体：作者摆放房间、写门牌，还能决定邻居的门是否自动关上；浏览器执行开合；读者决定要不要进去。设计好时，它把拥挤的页面变成能自己探索的柜子。设计坏时，它让人像在旅馆走廊找错房间。HTML 负责铰链，真正考验作者的，是门牌和门后的东西。