【前端学习之HTML&CSS】-- HTML第八篇 -- 容器、列表与元素包含

【前端学习之HTML&CSS】-- HTML第八篇 – 容器、列表与元素包含

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章主要介绍了列表元素、容器元素和元素包含关系，其中容器元素和CSS样式联系十分紧密，元素的包含关系则是一个重要知识的补充，涉及到了HTML前后的知识差异，在学习本篇博客后，关于HTML的基本知识学习就完成了。

一、列表元素

1. 有序列表

1) ol: ordered list(father)

下属属性：

• type：1 – 用阿拉伯数字排序；i/I – 用小写/大写罗马数字排序；a/A – 用小/大写字母；
  由于type在之前的html中是不承认的，所以除非序号很重要，否则使用CSS list-style-type替代
• reversed(布尔属性)：反序，语义上这个列表是翻转的；

2) li: list item(son)

列表中的每一项,且ol的子元素只能是li

	<!-- 顶级技巧 -->
	<!-- alt + shift + 下方向键，实现向下多次复制 -->

2. 无序列表：

ul：unordered list(使用方法与ol相同，子元素也是li)，应用：菜单、新闻列表

3. 定义列表

dl：definition list，下有两个子元素, 作用：通常用于一些术语的定义、文献中使用；

• dt：definition title，定义的标题
• dd：definition description，定义的解释

    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>元素</dt>
        <dd>组成HTML文档的单元</dd>
    </dl>

二、容器元素

容器元素：该元素代表一块区域，内部用于放置其他元素；

1. div 元素

• 概念：没有语义，用于划分区域，没有任何显示效果；
• 作用：表示这里有一块区域；；
• 缺点：浏览器不理解这一区域是干什么的；
• 写法：先划分区域，从大到小，分为一个个div，排版格式全靠CSS，具体见index.html

2. 语义化容器元素

• header：通常用于表示页头、文章头部（上）；
• footer：通常用于表示页脚，也可以用于表示文章的尾部；
• article：通常用于表示整篇文章；
• section：通常用于表示文章的章节；
• aside：通常用于表示侧边栏、附加信息；

三、元素包含关系

1. 过期概念

• 块级元素独占一行，行级元素不换行；
• 块级元素可以包含行级元素，反之不行，a元素除外，即只有a元素（a属于行级）可以包含块级元素；
  【实际上这种叫法已经被淘汰】

2. 当前概念

当前说法：元素的包含关系由元素的内容类别决定

例如：查看h1元素中是否可以包含p元素，从语义化出发，标题里不可能包含段落；
查询方法：eg. 搜索h1 MDN，–允许内容：短语内容–，点击进入后可以查看所有短语内容，无P元素；

3. 关键点

• 容器元素中可以包含任何元素；
• a元素中几乎可以包含任何元素；
• 某些元素有固定的子元素；如ul>li、ol>li、dl>dt/dd;
• 标题元素和段落元素不能相互嵌套，并且不能包含容器元素；

总结

本届博客结束后，关于HTML的基本知识就暂时告一段落了，我们将会在之后进行CSS的学习，在学习CSS之前，关于容器元素的学习，毫无疑问是极其重要的一节，元素包含关系等知识，也是在之后理解层叠冲突和继承等概念的关键，敬请期待。