制作导航栏的项目html

Question

我将使用<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>

Answer 1

如果你做你真正需要做的事情，两者都可以，但正如伙伴所说，从语义上讲，第一个是正确的选项，如果你选择这个选项，浏览器和用户会感谢你:) .

此 link 是正确使用语义 html 及其所有标签的良好参考：

https://www.w3schools.com/html/html5_semantic_elements.asp

Answer 2

两者都可以，看你想得到什么结果。标签 ul 用于创建 "unordered lists"，默认情况下格式化其中的 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 以获得更直观的示例。

Answer 3

导航栏是网站的主要组成部分之一，在我看来是最重要的一个，它实际上是用户在 he/she 输入时看到的第一个部分网站，它链接到其他主要部分。

<!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>

制作导航栏的项目html

Making navigation Bar's items html

html

css

html-lists

navigationbar