通常，在书籍、教程和一些实际网页中，我看到导航栏标记为<li>a 中的 s 元素<ul>中的元素<nav>元素，像这样：
.site-nav {
display: flex;
justify-content: space-around;
list-style-type: none;
padding-left: 0;
}
.site-nav > li > a {
border: 1px solid black;
padding: 1em;
text-decoration: none;
}
li { padding: 1em; } /* just for better appearance here on SO */
<nav>
<ul class="site-nav">
<li><a href="x">first</a></li>
<li><a href="y">second</a></li>
<li><a href="z">third</a></li>
</ul>
</nav>
但是，为什么我不应该更喜欢像下面这样的解决方案，其中<nav>直接包含了所有内容<li>是上面例子中的吗？
.site-nav {
display: flex;
justify-content: space-around;
list-style-type: none;
}
.site-nav > a {
border: 1px solid black;
padding: 1em;
text-decoration: none;
}
<nav class="site-nav">
<a href="x">first</a>
<a href="y">second</a>
<a href="z">third</a>
</nav>
我看到的一个优点是针对目标所需的特异性较低<a>链接（或者我放置在其位置的任何内容，例如<button>s)，但我对 HTML 的了解仍然太少，无法理解一种或另一种解决方案的含义，尤其是在可访问性方面。
答案很简单，语义和可访问性。
如果我到达你的第二个例子时没有<ul>使用屏幕阅读器，我不知道有多少链接。
如果我使用屏幕阅读器到达第一个正确标记的示例，我会听到类似“导航地标，3 项列表”的内容。
这让我知道列表中有 3 个链接，这样当我在它们之间移动时，我就可以直观地看到我在导航中的位置。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
