时间戳

首页 > 解决方案 > 没有导航栏

html - 没有导航栏

    问题描述

    我对 html/css/js 很陌生，所以如果这是一个新手问题，请提前道歉。每次我看到导航栏时，人们都倾向于使用 ul/li。但是，我认为您可以通过使用和格式化“a”标签来获得完全相同的结果，从而减少 html 代码，如下例所示：

    html:

    <body>
  <header>
    <nav class="top-nav">
      <a href="#about">About me</a>
      <a href="#education">Education</a>
      <a href="#work">Work</a>
      <a href="#interests">Interests &#38; Hobbies</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
</body>

    CSS：

    body {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Header section.*/
header {
  text-align: center;
  color: white;
}

/* Navigation */
.top-nav {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: black;
  padding: 20px 0;
  width: 100%;
}

.top-nav a {
  text-decoration: underline;
  color: white;
}

.top-nav a:hover {
  font-style: italic;
}

    在语义等方面这样做有什么问题吗？如果是这样，使用 ul/li 标签的原因和优势是什么？

    这是小提琴。

    谢谢！

    标签： htmlcsssemantics

    解决方案

    I understand that your question is about semantics.

    There is no explicit precision about the form of the content of the navigation element <nav> (whether it use <li> <ol> or just <a>).

    If you have a peek at the nav element you can see how it relates to the accessibility navigation role. Likewise, you can look at the ul element and how it related to the accessibility list role.

    So the semantic difference would be that a series of <a> is more related to plain text entries that link somewhere. When encapsulated in a <ul> it takes the meaning of a list of links. The latter is probably more explicit to define the concept of a navigation menu.

    推荐阅读