HTML基本语法之列表标签：无序列表，有序列表，自定义列表，列表总结

最新推荐文章于 2024-07-26 14:13:35 发布

奶盖不加糖

最新推荐文章于 2024-07-26 14:13:35 发布

阅读量7.9k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/qq_44156869/article/details/108512611

版权

5 篇文章 0 订阅

订阅专栏

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用场景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

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

基本语法：

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

1.无序列表的各个列表之间没有顺序级别之分，是并列的。

2.<ul</ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

3.<li>和</li>之间相当于一个容器，可以容纳所有元素。

4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

有序列表即为排列顺序的列表，其各个列表中会按照一定的顺序定义。
在HTML标签中，<ol>标签用于定义有序列表，列表以数字的形式来显示，并且使用<li>标签来定义列表项。

基本语法：

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

1.<ol></ol>只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者其他文字是不允许的。

2.<li>与</li>之间相当于一个容器。可以容纳所有的元素。

3.有序列表会带有自己的样式属性，但实际使用时，我们会使用CSS来设置。

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

简单来说dt是购物平台，那么dd可以是PDD，TD , DJ。

基本语法：

<dl>
                <dt>购物平台</dt>
                <dd>拼多多</dd>
                <dd>淘宝</dd>
                <dd>京东</dd>
</dl>

1.<dl></dl>里面只能包含<dt>和<dd>。

2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

例子：

  <dl>
            <dt>皇帝</dt>
            <dd>皇后</dd>
            <dd>贵人</dd>
            <dd>嫔妃</dd>   
  </dl>

自定义列表的使用场景：

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

标签名	定义	说明
`<ul></ul>`	无序标签	里面只能包含li，没有顺序，使用比较多，li里面可以包含任何标签
`<ol></ol>`	有无标签	里面只能包含li,有序，使用相对较少。li里面可以包含任何标签
`<dl></dl>`	自定义列表	里面只能包含 dt 和 dd。dt和dd里面都可以放任何标签