html的列表标签

淩亂°似流年 2024-05-06 21:22 60阅读 0赞

![previewfile\_2413284026][previewfile_2413284026]

**列表标签**

列表在html里面经常会用到的，主要使用来布局的，使其整齐好看.  
![image-20240216125313445][]

![在这里插入图片描述][646d179c1d0c486eac416424d8ca3056.png_pic_center]

## 无序列表 ##

*  无序列表\[重要\]： `ul` ，`li`

**示例代码1：**

![image-20240216153022684][]

**对应的效果：**

![image-20240216155841919][]

### **无序列表的属性** ###

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><code>type</code></td> 
   <td align="center"><code>disc</code>，<code>square</code>，<code>cirlce</code></td> 
   <td align="center">规定列表的项目符号的类型</td> 
  </tr> 
 </tbody> 
</table>

注：`disc`是 浏览器默认展示方式，默认展示方式可以不写该代码  
**示例代码2:**

![9940437e26cbb37008f9f4ac1a2a9506.png][]

**运行效果:**

![image-20240216161335398][]

## 有序列表 ##

*  有序列表\[用的不多\]：`ol`, `li`

**示例代码1：**

![image-20240216170639548][]

**运行效果：**

![image-20240216170717354][]

### **有序列表的属性** ###

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><code>type</code></td> 
   <td align="center"><code>a</code>表示小写英文字母编号<br><code>A</code>表示大写英文字母编号<br><code>i</code>表示小写罗马数字编号<br><code>Ⅰ</code>表示大写罗马数字编号<br><code>1</code>表示数字编号（默认)</td> 
   <td align="center">规定列表的类型</td> 
  </tr> 
  <tr> 
   <td align="center"><code>start</code></td> 
   <td align="center">number</td> 
   <td align="center">一个整数值属性，指定了列表编号的起始值</td> 
  </tr> 
 </tbody> 
</table>

**示例代码2：**  
![image-20240216181032761][]

**运行效果：**

![image-20240216175945922][]

**示例代码3：**

![image-20240216183113200][]

**运行效果：**  
![image-20240216183306579][]

## 自定义列表 ##

*  自定义列表\[重要\] ：`dl`(总标签) ，`dt`(小标题)， `dd`(围绕标题来说明)上面有个小标题，下面有几个围绕着标题来展开的.

**示例代码：**

![image-20240216191722457][]

**运行效果：**

![image-20240216191700431][]  
**小知识(希望能够帮到你)**  
`ul`是unordered lists的缩写(无序列表)  
`li`是list item的缩写(列表项目)  
`ol`是ordered lists的缩写(有序列表)  
`dl`是definition lists的英文缩写(自定义列表)  
`dt`是definition term的缩写(自定义列表组)  
`dd`是definition description的缩写(自定义列表描述)  
`nl`是navigation lists的英文缩写(导航列表)  
`tr`是table row的缩写(表格中的一行)  
`th`是table header cell的缩写(表格中的表头)  
`td`是table data cell的缩写(表格中的—个单元格)

[HTML 列表 | 菜鸟教程 (runoob.com)][HTML _ _ _ _runoob.com]

[previewfile_2413284026]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/925e64fd78424e5daa0e9bb860ac4f6d.jpeg
[image-20240216125313445]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/aadcd1bee3f54bd7acfd58474cb8ee1a.png
[646d179c1d0c486eac416424d8ca3056.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/54934a8fcf814aa1b69a7448382f57ee.png
[image-20240216153022684]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c180675c04bf4671aba61f3292bf3080.png
[image-20240216155841919]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/6a0c044ebdfc476abc40319c3518f1a0.png
[9940437e26cbb37008f9f4ac1a2a9506.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/177a76d8a9834938b9867d0f4be1622d.png
[image-20240216161335398]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/456b53d9f7134191afbd8981ba49744e.png
[image-20240216170639548]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/00216b7b6ead45b4a7ee8e7b35fcb2c3.png
[image-20240216170717354]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1f018c96fb5545ceb1bbd8c96fea5491.png
[image-20240216181032761]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/9a68a8e60a51430592c205f0dbb88d12.png
[image-20240216175945922]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/83282a3378c04d8d95d3c9caa3c1e6eb.png
[image-20240216183113200]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0c47c700552542a79b4f0083a341a5c2.png
[image-20240216183306579]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/b28957bd244c43efafce4349b613eddb.png
[image-20240216191722457]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0a7043969c4042bc81f326c2ad1d4ab6.png
[image-20240216191700431]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/7d899481992848fda82b027959670938.png
[HTML _ _ _ _runoob.com]: https://www.runoob.com/html/html-lists.html