html澄清中的基本标记
这是最基本的。如果我使用一个框架，比如Bootstrap，那么docs说使用这个标记<nav作为导航器(例如)，但是大多数人使用的是<div：
<div class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</div>我知道div是其他视图的某种容器，但是如何简单地将标记<nav从文档中更改为<div呢？如果可以的话，为什么会有人需要它呢？
回答 3
Stack Overflow用户
发布于 2018-12-11 06:46:30
<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>
下面的CSS代码具有相同的HTML结构，但是所有的标记都是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;
}<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>
Stack Overflow用户
发布于 2018-12-11 07:03:38
我希望这能帮助你理解你想知道的事情.
nav标记是HTML5的标记，可以使用div标记代替nav标记&导航并不强制使用nav标记。它只是澄清了nav标签用于导航，页眉用于页眉区域，页脚用于页脚区域。它们都是HTML5基本标记，通过它们的名称来说明用于哪个区域，所有HMTL5标记也称为块标记，与div标记相同。因此，不管您使用的是div标记，还是nav标记，它的工作原理都是一样的。
谈到放松它们的样式，只有当类使用标记名定义并且没有像nav.navbar.navbar-expand-lg这样的空格时，它才会失去它们的样式，但是在引导程序中，它定义的是没有标记名的.navbar.navbar-expand-lg。
Stack Overflow用户
发布于 2018-12-11 06:28:02
您可以在您的网站中使用引导模板。https://getbootstrap.com/docs/3.3/components/#nav
https://stackoverflow.com/questions/53718199
复制相似问题
腾讯云开发者
