Web前端入门（七）列表

原创已于 2022-05-15 22:06:39 修改 · 639 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #开发语言

于 2022-05-15 22:05:34 首次发布

Web前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了HTML中的三种列表类型：无序列表、有序列表和自定义列表。无序列表使用<ul>标签，有序列表使用<ol>标签，自定义列表使用<dl>标签。每个列表项由<li>或<dd>标签包裹，并可包含任意元素。有序列表可通过type属性设置排序方式，使用start属性设定起始序号，reversed属性实现倒序。自定义列表常用于术语解释，由<dt>定义名词，<dd>描述相关内容。

总目录

1.无序列表

无序列表各个列表项之间没有顺序
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素

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

2.有序列表

<ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
常用的type属性值分别为是1，a，A，i，I
<ol reversed=“reversed”>中的reversed属性能够让有序列表中的序列倒序排列。
<ol start=“3”>中的start属性值为3，有序列表中的第一个序列号将从type的第三位开始排列。
<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素

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

3.自定义列表

定义列表常用于对术语或名词进行解释和描述（也可以是与名词相关的一些功能等），定义列表的列表项前没有任何项目符号。

<dl>
  <dt>名词1</dt>
  <dd>名词1相关1</dd>
  <dd>名词1相关2</dd>
  <dt>名词2</dt>
  <dd>名词2相关1</dd>
  <dd>名词2相关2</dd>
</dl>

4.总结

标签名	定义	说明
`<ul></ul>`	无序列表	里面只能包含li，没有顺序。li里面可以包含任何标签
`<ol></ol>`	有序列表	里面只能包含li，有顺序
`<dl></dl>`	自定义列表	里面只能包含dt和dd，dt和dd里面可以放任何标签