Question

这是基本的。如果我使用的是Bootstrap之类的框架，文档会说将此标签<nav用作导航器（例如），但是大多数人会使用<div：

<div class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</div>

我知道div是其他视图的一种容器，但是如何简单地将文档中的标签<nav更改为<div呢？如果可以的话，为什么一个人都需要它？

Answer 1

我希望这可以帮助您了解您想了解的内容。

nav标签是HTML5的标签，可以使用div标签代替nav标签，也不必使用nav标签进行导航。它只是说明nav标签用于导航，页眉用于页眉区域，页脚用于页脚区域。它们都是HTML5基本标签，它们通过其名称来阐明用于哪个区域的名称，所有HMTL5标签也称为div标签，与div标签一样。因此，无论您使用的是div标记而不是nav标记，它都一样。

谈论松散他们的样式时，只有在类使用标签名定义并且没有空格的情况下，nav.navbar.navbar-expand-lg才会松开其样式，但是在引导中，它定义时没有标签名.navbar.navbar-expand-lg。 / p>

Answer 2

<nav>的行为与<div>完全相同。 article，section等也是如此...

它仅具有语义含义，它可以使您的代码更具可读性，并且浏览器将使它变得相同。

但可能会以不同的方式影响-一些搜索引擎会尝试读取您的页面并从页面中提取相关数据，组织代码并使用正确的语义元素可能会帮助您获得更高的排名或页面效果更好。

此外，如果使用框架，它可能会为特定元素设置不同的样式。

考虑以下代码，如果将所有标签更改为div，则样式将不同：

*{
  padding: 0;
  margin: 0;
}
nav{
  width: 100%;
  height: 30px;
  background-color: #bada55;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

article{
  background-color: #efefef;
  padding: 20px;
}

h1{
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}

<nav>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</nav>
<section>
  <article>
    <h1>Article title</h1>
    <p>article content here</p>
    <p>article content here</p>
    <p>article content here</p>
  </article>
</section>

这是具有相同HTML结构的相同CSS代码，但所有标签均为divs

*{
  padding: 0;
  margin: 0;
}
nav{
  width: 100%;
  height: 30px;
  background-color: #bada55;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

article{
  background-color: #efefef;
  padding: 20px;
}

h1{
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div>
  <div>
    <h1>Article title</h1>
    <p>article content here</p>
    <p>article content here</p>
    <p>article content here</p>
  </div>
</div>

Answer 3

您可以在网站中使用引导程序模板。 https://getbootstrap.com/docs/3.3/components/#nav

HTML说明中的基本标签

3 个答案: