代码之家 › 专栏 › 技术社区 › Curnelious

html中的基本标记

html

Curnelious · 技术社区 · 6 年前

<nav <div

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

我知道 div 是其他视图的某种容器,但是如何简单地更改标记呢 < 从文件中,待确认 <div ? 如果可以,为什么一个人需要它呢?

3 回复 | 直到 6 年前

Ravi Kumar 6 年前

我希望这能帮助你了解你想知道的事情。

这个 nav div 标记而不是 导航 标签及标签;导航时不必使用导航标签。它只是澄清了这一点 导航 标记用于导航,页眉用于页眉区域,页脚用于页脚区域。它们都是HTML5基本标记,通过它们的名称来明确使用哪个区域,所有HMTL5标记也被称为块标记,与div标记相同。所以你用的都没关系标记而不是标记它也会起同样的作用。

说到失去它们的样式,只有当类是用标记名定义的并且没有空格的时候,它才会失去它们的样式 nav.navbar.navbar-expand-lg ,但在引导过程中,它没有定义标记名 .navbar.navbar-expand-lg .

Itay Gal 6 年前

<nav> <div> . 同样的道理也适用于 article section 等

它只具有语义含义,它可以使代码更具可读性,并且浏览器将呈现相同的内容。

但是

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

*{
  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

*{
填充:0;
保证金:0;
导航{
宽度:100%;
背景色:#bada55;
证明内容:周围的空间;
}

文章{
填充:20px;
}

字体大小:30px;
}

<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>