HTML元素(二)
本文继续记载HTML的主要元素:再次重申,记载的都是核心元素,有些元素并没有记录
列表元素
有序列表
在有序列表中一共涉及到以下两个元素:
- ol:ordered list(排序列表)——父元素
- 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>
无序列表
在无序列表中共涉及两个元素:
- ul:unordered list(排序列表)——父元素
- li:list item(列表项)——子元素
<ul>
<li></li>
<li></li>
<li></li>
</ul>
无序列表在使用过程中经常用于制作菜单
定义列表——通常用于一些术语的定义
在定义列表元素中,一共涉及三个元素:
- dl:definition list——定义列表(父元素)
- dt:definition title——标题(子元素)
- dd:definition description描述(子元素)
容器元素——重要
该元素代表一块区域,内部用于放置其他元素。
容器仅用于划分区域,具体样式由CSS解决
<!--该元素没有语义-->
<div>
</div>
HTML5提出了语义化容器元素,用来通知浏览器该容器的具体含义,如下所示:
- header:通常用于表示页头,也可以用于表示文章的头部。
- footer:通常用于表示页脚,也可以用于表示文章的尾部。
- article:通常用于表示整篇文章。
- section:通常用于表示文章的章节。
- aside:通常用于表示附加信息(一般表示侧边栏)。
元素包含关系
以前:块级元素可以包含行级元素;元素不能包含块级元素。a元素除外。块级元素独占一行,行级元素不换行;
实际上,现在不会存在这种叫法。
现在:元素的包含关系由元素的内容类别决定。
每一个元素的分类并不需要完全记住,如果需要了解可以在MDN中查询
【注】:
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素
- 表土元素和段落元素不能出现嵌套,并且不能包含容器元素。
总结
本篇笔记中记录了HTML中的最后几个基础元素**(不是所有元素都已经记录完,后续还会整理出其他元素。别问我为啥不整理完,我听的视频就是这个套路,而且我觉得这个套路很好)**。
主要说明了列表元素的相关属性及类型,并在最后说明了容器元素以及元素包含关系。以后的笔记会出现单独说明HTML元素的笔记,同时也会整理CSS与HTML一起使用的笔记。