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