容器元素
容器元素:该元素代表一个区域,内部用于放置其他元素
[重要,一定要划分好容器,关联css学习]
- 容器元素中可以包含任何元素;
- a元素中几乎可以包含任何元素;
- 某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
div元素
无语义,只起到划分区域的作用,本身不带任何显示,显示靠css
<!-- 字节跳动官网最上面一个容器的代码样例 -->
<div class="jsx-3738640256 header zh ">
<a class="logo" href="/zh/">
<img src=" " alt="ByteDance">
</a>
<div class="jsx-3738640256 right">
<div class="jsx-3738640256 menu-toggle">
<div class="jsx-3738640256 toggle-bar toggle-bar-1"></div>
<div class="jsx-3738640256 toggle-bar toggle-bar-2"></div>
<div class="jsx-3738640256 toggle-bar toggle-bar-3"></div>
<div class="jsx-3738640256 toggle-bar toggle-bar-4"></div>
</div>
</div>
</div>
语义化容器元素
有语义,本身不带任何显示,显示靠css,不必过分纠结于语义
- header:通常用于表示页头,也可以用于表示文章的头部
- footer:通常用于表示页脚,也可以用于表示文章的尾部
- article:通常用于表示整篇文章
- section:通常用于表示文章的章节
- aside:通常用于表示附加信息,例如侧边栏
元素包含关系
以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外
现在:元素的包含关系由元素的内容类别决定
(不用了解太详细的细则,可以通过搜索实时了解,例如:h1元素是否可以包含p元素;elements belonging to this catagory)