我要使用<nav> </nav>
创建一个导航栏。但我不知道该使用<Li></Li>
并在其中制作商品,还是<a></a>
很好?这两者有什么区别?哪个更好?
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Buy">Buy</a></li>
</ul></nav>
或
<nav>
<a href="#home">Home</a>
<a href="#About">About</a>
<a href="#Contact">Contact</a>
<a href="#Buy">Buy</a> </nav>
答案 0 :(得分:0)
如果您确实需要做的事情都可以,但是正如合作伙伴所说,从语义上讲,第一个是正确的选项,如果您选择此选项,浏览器和用户将感谢您:)。< / p>
此链接是正确使用语义html及其所有标签的良好参考:
答案 1 :(得分:0)
您可以同时使用它们,这取决于要获得的结果。标签ul
用于创建“无序列表”,默认情况下,其内部格式为li
标签。我认为您可能要搜索的主要区别之一是,如果将display: flex;
应用于元素,则会使li
元素在另一个元素之后出现。在这里,我为您举例说明如何应用它:
<div>
<ul style="display=flex;">
<li>
<a href="xxx"></a>
</li>
<li>
<a href="xxx"></a>
</li>
<li>
<a href="xxx"></a>
</li>
</ul>
</div>
查看https://www.w3schools.com/css/css_navbar.asp以获得更直观的示例。
答案 2 :(得分:0)
导航栏是网站的主要组成部分之一,在我看来,导航栏是最重要的组成部分,实际上,它是用户进入网站后看到的第一部分,并链接到其他主要部分。
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><body>
<div class="w3-container">
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">About</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Services</a>
<div class="w3-dropdown-hover w3-mobile">
<button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">India</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">USA</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">UK</a>
</div>
</div>
</div>
</div>
</body>
</html>