HTML元素（二）

HTML元素（二）

本文继续记载HTML的主要元素：再次重申，记载的都是核心元素，有些元素并没有记录

列表元素

有序列表

在有序列表中一共涉及到以下两个元素：

1. ol：ordered list（排序列表）——父元素
2. li：list item（列表项）——子元素

把大象装进冰箱共需要几步？
<ol>
    <li>打开冰箱</li>
    <li>把大象装进去</li>
    <li>关上冰箱门</li>
</ol>

遵从第一篇笔记中对HTML和CSS的区分克制：不应该为了实现文字前显示数字序号而使用列表，而应该想使用列表而使用——即，按照列表元素的含义去使用

属性

type——序号属性

type属性的值包括：’a‘（小写字母）、’A‘（大写字母）、’i‘（小写罗马数字）、’I‘（大写罗马字母）、’1‘（默认为数字）

<!--ol元素中的type属性值标注为什么，那么内部的列表项前就会显示什么样的序号-->
<ol type="1">
    <li></li>
</ol>

**W3C标准中记载：type属性在HTML4中被弃用，在HTML5中被启用。根据官方建议可以得知：除非列表中序号很重要——（例如，在法律或者技术文件中条目通常被引用），否则使用CSS中的list-style-type属性所替代。

resversed属性——倒序

【注】：该倒序指的是逻辑中的倒序，并不是显示上的倒序。即序号倒序

<ol resversed>
    <li></li>
</ol>

无序列表

在无序列表中共涉及两个元素：

1. ul：unordered list（排序列表）——父元素
2. li：list item（列表项）——子元素

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

无序列表在使用过程中经常用于制作菜单

定义列表——通常用于一些术语的定义

在定义列表元素中，一共涉及三个元素：

1. dl：definition list——定义列表（父元素）
2. dt：definition title——标题（子元素）
3. dd：definition description描述（子元素）

容器元素——重要

该元素代表一块区域，内部用于放置其他元素。

容器仅用于划分区域，具体样式由CSS解决

<!--该元素没有语义-->
<div>
    
</div>

HTML5提出了语义化容器元素，用来通知浏览器该容器的具体含义，如下所示：

1. header：通常用于表示页头，也可以用于表示文章的头部。
2. footer：通常用于表示页脚，也可以用于表示文章的尾部。
3. article：通常用于表示整篇文章。
4. section：通常用于表示文章的章节。
5. aside：通常用于表示附加信息（一般表示侧边栏）。

---

---

元素包含关系

以前：块级元素可以包含行级元素；元素不能包含块级元素。a元素除外。块级元素独占一行，行级元素不换行；

实际上，现在不会存在这种叫法。

现在：元素的包含关系由元素的内容类别决定。

每一个元素的分类并不需要完全记住，如果需要了解可以在MDN中查询

【注】：

1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素
4. 表土元素和段落元素不能出现嵌套，并且不能包含容器元素。

总结

本篇笔记中记录了HTML中的最后几个基础元素**（不是所有元素都已经记录完，后续还会整理出其他元素。别问我为啥不整理完，我听的视频就是这个套路，而且我觉得这个套路很好）**。

主要说明了列表元素的相关属性及类型，并在最后说明了容器元素以及元素包含关系。以后的笔记会出现单独说明HTML元素的笔记，同时也会整理CSS与HTML一起使用的笔记。