HTML零基础自学笔记（下）篇二 -8.10

参考：pink老师

篇二、列表标签是什么？

作用：列表标签可以方便我们对页面进行布局，让阅读更加快捷
分类：列表分为三类：无序列表、有序列表、自定义列表

一、无序列表（重点）

基本语法

无序列表中的各个列表项间无顺序之分，互为并列关系

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	...
</ul>

标签释义

<ul> 标签表示HTML页面中某一个的无序列表，列表项会以项目符号程序如小圆点●、圆圈○、正方形啊■开头（下文中的示例就是以圆点开头一个列表项的）；
<li> 定义列表项内容

形象示例（无序列表的应用场景）

以下菜鸟教程的排版就用到了无序列表，无序列表的各个列表项之间无顺序之分，是并列存在的。

细节注意

• <ul> 标签里只能放<li> 标签，不可以放其他文字或者标签
• <li> 标签可以放任何元素，<li>标签本身相当于一个容器

二、有序列表（理解）

基本语法

有序列表中的各个列表项按照一定顺序去排列

<ol>
	<li> 列表项1 </li>
	<li> 列表项2 </li>
	<li> 列表项3 </li>
	...
</ol>

标签释义

<ol> 该标签用于定义有序列表，列表内部排序以数序来显示；
<li> 用于定义列表项

形象示例

细节注意

• <ol> 中只能嵌套<li>，直接在<ol> 中输入文字或者标签都不可以
• <li> 标签相当于一个容器，可以容纳所有的元素

三、自定义列表（重点）

基本语法

自定义列表常用于对术语或名词进行解释和描述，且定义列表的列表项前没有任何符号

<dl>
	<dt> 名词1 </dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
</dl>

标签释义

<dl> 该标签用于定义自定义列表
<dt> 定义需要解释的名词/项目
<dd> 用于解释描述先前定义的项目，或者对先前项目内容做以扩展（可以结合示例来理解）

形象示例

小米官网的指南板块就是使用自定义列表来书写的

细节注意

• <dl> 里面只能包含<dt>和<dd>；
• <dt>和<dd>的个数没有限制，经常是一个<dt>对应多个<dd>