html 中无独立文档摘要元素，应使用 设置seo摘要，页面内摘要则用 加 实现语义化展示。
HTML 里没有 <summary></summary> 元素能直接当文档摘要用
很多人搜“HTML 文档摘要”，其实是想给整个页面加一段简短说明，类似文章导语或 SEO 描述。但 HTML 标准里 <summary></summary> 只能作为 <details></details> 的子元素出现，不能独立用于页面级摘要——强行写成 <summary>这里是摘要</summary>，浏览器不会识别为语义化摘要，SEO 和屏幕阅读器也基本忽略。
<meta name="description"> 才是真正起作用的文档摘要
搜索引擎和大多数浏览器标签页预览，实际依赖的是 里的这个 <meta> 标签。它不渲染在页面上，但决定了你在搜索结果里看到的那行文字。
- 必须放在
内，且建议紧挨<title></title>后面 - 内容长度控制在 155–160 字符内，超长会被截断（Google 常见）
- 不要堆砌关键词，要自然描述页面核心内容，比如：
<meta name="description" content="用 CSS Grid 实现响应式卡片布局，兼容 Chrome 84+、Firefox 75+ 和 Safari 14.1+"> - 每个页面的
content值必须唯一，重复会导致 SEO 降权
<article></article> + <header></header> + <p></p> 是视觉+语义兼顾的替代方案
如果需要在页面上**同时显示**一段摘要（比如博客列表页的每篇文章开头），就不能只靠 <meta>。这时推荐用语义化结构组合，既利于可访问性，也方便 CSS 控制样式。
- 用
<article></article>包裹整篇内容，<header></header>放标题，<p></p>放摘要文字（别用<div> 或 <code><span></span>） - 避免把摘要塞进
<h2></h2>或<h3></h3>—— 它不是标题，而是正文前导 - 如果摘要文字来自后端动态生成，注意提前截断并保留完整句子，别在单词中间砍掉
- 示例结构：
<article> <header> <h2>CSS Grid 布局实战</h2> </header> <p>本文演示如何用 grid-template-areas 快速搭建仪表盘布局，并处理 IE11 的降级方案。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <main>...正文...</main> </article> -
<summary></summary>必须嵌套在<details></details>内部，否则无效 - 它的作用是展开/收起
<details></details>的内容，类似手风琴菜单，和 SEO 或文档概述无关 - 若真要用它做“摘要折叠”，请确保它属于某个具体模块（如“技术细节”“兼容性说明”），而非整页摘要
- 错误写法：
<summary>这是一篇关于 HTML 摘要的教程</summary>（无父<details></details>，无效）
别混淆 <details><summary></summary></details> 和文档摘要
这是最容易踩坑的地方：看到 <summary></summary> 就以为是“摘要”功能，结果加到页面顶部，发现点击没反应、也不被收录。它本质是交互控件，不是语义容器。
<meta name="description"> 和首段 <p></p> 配合用最稳妥。前者管机器怎么看，后者管人怎么看——漏掉任何一个，都可能让页面在搜索结果里失去吸引力，或者在无障碍场景下丢失上下文。
