html澄清中的基本标记
html澄清中的基本标记
提问于 2018-12-11 05:56:52
这是最基本的。如果我使用一个框架，比如Bootstrap，那么docs说使用这个标记<nav作为导航器(例如)，但是大多数人使用的是<div：
<div class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</div>我知道div是其他视图的某种容器，但是如何简单地将标记<nav从文档中更改为<div呢？如果可以的话，为什么会有人需要它呢？
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53718199
复制相关文章
相似问题
腾讯云开发者
