应使用语义化标签+++构建导航栏，而非；属表格数据结构，误用会导致可访问性差、seo弱、响应式难实现。
用 <tr> 做导航栏违背语义，别硬套表格结构
<p>HTML 表格的 <code><tr> 是为行数据设计的，不是布局容器。强行用 <code><tr> + <code><td> 排链接，会导致屏幕阅读器误读为“表格数据”，SEO 权重分散，响应式也难做——这不是技巧，是反模式。
<h3>真正该用的标签：<code><nav></nav> + <ul></ul> + <a></a>
语义清晰、可访问性强、样式控制自由。导航本质是“一组链接”，<ul></ul> 天然表达这一关系：
<nav><ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul></nav>
关键点：
-
<nav></nav>明确告诉浏览器和辅助工具“这是主导航” - 每个
<a></a>必须有href属性（哪怕用#占位），否则会被忽略为可点击项 -
<li>不只是装饰，它让列表项具备默认间距和可聚焦行为
如果非要用表格（比如老系统无法改结构），必须补救可访问性
真遇到 legacy HTML 被锁死的情况，至少得把语义拉回来：
- 给
<table> 加 <code>role="navigation"和aria-label="主导航" - 每个
<td> 里的 <code><a></a>要加tabindex="0"确保键盘可聚焦 - 绝对不要省略
<th> 或 <code><caption></caption>—— 即便只写<caption>导航菜单</caption>也能提升识别率 - 用 CSS 强制移除表格边框、padding、cell-spacing，否则视觉上仍像数据表
- 移动端 viewport 缩小后，
<td> 不会自动堆叠成竖排——而 <code><li>配合flex或grid可一键响应式真要水平对齐链接，用
display: flex在<ul></ul>上就行，比折腾表格可靠十倍。
<tr> 水平<a style="color:#f60; text-decoration:underline;" title="排列" href="https://m.php.cn/zt/56129.html" target="_blank">排列</a>链接时最常踩的坑
<p>开发者常以为 “一行 <code><tr> 就是导航横条”，结果掉进三个坑：
<ul><li><code><tr> 必须嵌套在 <code><tbody> 或 <code><thead> 里，直接放 <code><table> 下会触发浏览器自动补全，DOM 结构失控
<li><code><td> 默认有 <code>display: table-cell，但宽度由内容撑开，不设 width 或 white-space: nowrap 容易换行错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
