怎么在HTML网页中用details标签制作网站地图展示-html教程-PHP中文网

details标签仅适用于单层分类容器，不可用于导航菜单或嵌套树形结构；summary内禁止放置链接等交互元素；多级折叠需javascript手动控制，且须兼顾seo与可访问性规范。

怎么在html网页中用details标签制作网站地图展示

details 标签本身不支持嵌套导航结构，别硬套

直接用 <details></details> 展开/收起一堆 <a></a> 链接，看似能做“网站地图”，但实际会出问题：搜索引擎不识别这种结构为导航，辅助技术（如屏幕阅读器）也很难正确解析层级关系。它本质是「单个可折叠的摘要-详情区块」，不是菜单组件。

真正可用的方案是把它当「分类容器」用，只包裹语义上属于同一组的链接，比如按栏目分组：

<details><summary>产品中心</summary><p><a href="/product/a">A系列</a></p>
  <p><a href="/product/b">B系列</a></p>
</details>

summary 里不能放或交互元素

这是浏览器强制限制——<summary></summary> 内部如果出现 <a></a>、<button></button> 等可聚焦或可点击元素，多数浏览器会忽略点击展开行为，或者触发两次事件（一次跳转，一次展开），导致不可用。

常见错误写法：

<details><summary><a href="/about">关于我们</a></summary><p>公司介绍、团队、联系方式…</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>

正确做法是把链接移出 <summary></summary>，或改用纯文本标题：

<summary></summary> 只放文字，比如 “联系我们”
联系方式信息放在 <details></details> 内容区，再放 <a href="mailto:..."></a>
若真需要入口链接，放在 <summary></summary> 外面，另起一行

多级折叠必须手动实现，details 不支持原生嵌套展开控制

想做出「首页 > 产品 > A系列 > 参数页」这样的树形地图？<details></details> 没有父子联动机制。嵌套写法（<details></details> 里再套 <details></details>）虽然能渲染，但每个都是独立开关，点父级不会自动收起子级，也不提供当前展开路径高亮能力。

如果真要多层，得配合 JS 控制状态：

给每层 <details></details> 加 id 和统一 class，比如 class="sitemap-section"
监听 toggle 事件，手动关闭同级其他 <details></details>
用 localStorage 记住用户上次展开的节点，刷新后还原
注意移动端点击穿透问题：iOS Safari 对嵌套 <details></details> 的 touch 事件处理不稳定，建议加 cursor: pointer 和最小高度防误触