HTML——列表标签

使用场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等。

特点：按照行的方式，整齐显示内容。

种类：无序列表、有序列表、自定义列表。

1.无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

语法格式：

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

网页显示效果：

 

注意事项：<ul></ul> 中只能嵌套 <li></li>，<li> 与 </li> 之间相当于一个容器，可以容纳所有元素

2.有序列表

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项

语法格式：

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

网页显示效果：

 

3.自定义列表

在 HTML 标签中， <dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。

使用场景：在网页的底部导航中通常会使用自定义列表实现，常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

语法格式：

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

 注意事项：<dl></dl> 里面只能包含 <dt> 和 <dd>，<dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>，且列表项前没有任何项目符号。

网页显示效果：