<details> 默认收起，需添加 open 属性实现默认展开；<summary> 是其唯一合法首子元素，定义开关文字；后续任意 HTML 均属可展开内容；多公告需 CSS 控制间距与样式；Safari 12.0 存在 open 动态设置延迟问题。
details 标签本身不支持默认展开，但可以用 open 属性控制
直接写 <details> 默认是收起状态，用户必须点击才能展开。如果想让公告一进来就可见，得加 open 属性：<details open>。注意这不是布尔值赋值，不用写 open="true" —— 浏览器只认属性是否存在。
summary 里放标题，正文内容直接跟在后面就行
<summary> 是唯一允许作为 <details> 第一个子元素的标签，它定义了折叠区域的“开关文字”。后面的任意 HTML（比如 <p>、<ul>、甚至 <time>）都会被自动纳入可展开区域：
<details open> <summary>? 系统维护通知（2024-06-15）</summary> <p>今晚 23:00–23:30 将进行数据库升级，期间部分功能可能短暂不可用。</p> <p>如有疑问，请联系运维组邮箱：ops@example.com</p> </details>
多个公告堆叠时，别忘了加点垂直间距和基础样式
原生 <details> 没有默认外边距，连续多个会挤在一起。用 CSS 控制间距更稳妥：
- 给
<details>加margin-bottom: 1rem，比依赖<p>的 margin 更可靠 - 去掉
<summary>默认的 list-style（小箭头）可用list-style: none，再手动加个 emoji 或 icon 更直观 - 移动端下
<summary>点击热区太小？可以加padding并设cursor: pointer
兼容性没问题，但 Safari 旧版本对 open 属性响应有延迟
所有现代浏览器（Chrome 12+、Firefox 49+、Edge 79+、Safari 12.1+）都支持 <details> 和 open。不过 Safari 12.0 存在 bug：JS 动态设置 open 属性后，视觉不会立即更新，得触发一次重排（比如读取 offsetHeight）。如果你要通过 JS 控制开关，优先用 toggle() 方法而不是直接改属性。
立即学习“前端免费学习笔记（深入）”；
真正在意 IE 或老安卓 WebView？那就得 fallback 到 <div> + JS，但纯公告栏场景，基本不用操心。
细节在于：open 属性是否生效，取决于它是否出现在初始 HTML 中；服务端渲染或静态 HTML 里写死 open 最稳，别指望 JS 插入后立刻展开。
