创建导航栏的最佳方法

Question

我已经看到了创建一个nagivation栏的三种主要方式，并且想知道哪种方式最好或更有效。他们都做了同样的事情。

1：使用nav HTML标记。

＃1的例子：

<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Blog</a> |
<a href="#">Sign in</a>
</nav>

2：只需使用无序列表。

＃2的例子

<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">About</a> |</li>
<li><a href="#">Blog</a> |</li>
<li><a href="#">Sign in</a> |</li>
</ul>

在此之后，你会使用css 显示它内联，或者你可以使用浮点数。

3：仅使用标签。

＃3的例子：

  <a href="#">Home</a> |
  <a href="#">About</a> |
  <a href="#">Blog</a> |
  <a href="#">Sign in</a>

这种方式基本上就像使用导航一样，但是您必须插入一些类似于示例＃2的CSS来使其浮动：向左或显示：内联。

我已经看过制作导航栏的三种方法，我想知道你们建议我创建导航栏的方式。

我也想听听你们的演讲。关于使用float的想法：左对比显示：内联。

谢谢，祝你有个美好的一天。

Answer 1

这究竟是什么问题？这应该是知识库，而不是公共投票站点。

  

他们都做了同样的事情。

正如你所说，所有三个例子都做同样的事情：

• No.1是最年轻的方法，具有HTML5导航元素
• No.2曾经是之前的标准
• 如果您不需要为导航项的容器元素添加其他样式，则No.3也可以。

所有这些都可以通过一些CSS规则完全像其他人一样工作......所以你的问题的答案是：它只是关于语义，没有区别的效率

#m2 ul {padding: 0}
#m2 li {display: inline-block}

<div id="m1">
  <nav>
    <a href="#">Menu 1</a> |
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Blog</a> |
    <a href="#">Sign in</a>
  </nav>
</div>

<div id="m2">
  <ul>
    <li><a href="#">Menu 2</a> |</li>
    <li><a href="#">Home</a> |</li>
    <li><a href="#">About</a> |</li>
    <li><a href="#">Blog</a> |</li>
    <li><a href="#">Sign in</a></li>
  </ul>
</div>

<div id="m3">
  <a href="#">Menu 3</a> |
  <a href="#">Home</a> |
  <a href="#">About</a> |
  <a href="#">Blog</a> |
  <a href="#">Sign in</a>
</div>

Answer 2

通过使用标记，您的代码将更易于阅读和维护。请记住，有时您编写的代码可能会被另一个代码读取。所以，如果有人读取您的HTML，他们应该是能够理解它在最短的时间内所做的事情。你也会更容易阅读，我相信它需要比你的第三种方法更少的css规则。