-容器元素

容器元素

容器元素:该元素代表一个区域，内部用于放置其他元素
[重要，一定要划分好容器，关联css学习]

1. 容器元素中可以包含任何元素；
2. a元素中几乎可以包含任何元素；
3. 某些元素有固定的子元素(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)