Question

<header class="header">
  <div class="logo_place_header></div>
  <div class="header__title-text>Learning how to learn</div>
  <div class="header__subtitle-text><a href="#" class="header__subtitle-link>about 20 words here</a></div>
  <div class="header__main-illustration></div>
  <div class="header__square-pic></div>
</header>

标头类是Flex容器，并且具有相对位置。大多数弹性物品都需要绝对定位。我的问题来自我的一位讲师，他说除了包含header_square图片的人以外，不要在其标题中放置div。我不知道该怎么办。我非常新秀，对于初学者的问题我深表歉意。我知道这个论坛充满了专家。

Answer 1

您的讲师可能希望您找到更合适的HTML元素来描述文档的含义，因为<div>元素是非语义的，我们可以使用：

表示主要标题的<h1>元素
副标题的<p>元素
以及用于插图或徽标的<img>元素

由于class属性是全局属性，因此我们可以更改HTML元素的开始和结束标记，并保留代码的BEM命名约定。

<header class="header">
  <img class="header__logo"></img>
  <h1 class="header__title-text>Learning how to learn</h1>
  <p class="header__subtitle-text><a href="#" class="header__subtitle-link>about 20 words here</a></p>
  <img class="header__main-illustration></img>
  <div class="header__square-pic></div>
</header>

我建议您翻阅basic concepts of HTML并查找elements和attributes的MDN HTML参考手册。

有没有一种BEM方法论，我可以仅使用一个div来构建包含许多元素的标头？

1 个答案: