html<ul><ol><li><dd><dt><dl>属性总结

本文详细介绍了HTML中的列表标签,包括无序列表&lt;ul&gt;、有序列表&lt;ol&gt;及定义列表&lt;dl&gt;的使用方法,并探讨了它们各自的属性与嵌套应用实例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基本语法

<ul>
<li>小王</li>
<li>小李</li>
<li>小红</li>
</ul>
<ol>
<li>小菊</li>
<li>小桑</li>
<li>小明</li>
</ol>
<dl>
<dt>什么是kindle?</dt>
<dd>kindle是一个阅读设备</dd>
<dt>kindle有什么好?<dt>
<dd>kindle可以保护眼睛</dd>
</dl>
  • 小王
  • 小李
  • 小红
  1. 小菊
  2. 小桑
  3. 小明
什么是kindle?
kindle是一个阅读设备
kindle有什么好?
kindle可以保护眼睛

<ul>标签属性

-type 规定符号的形状,建议CSS

描述
disc实心圆,默认
circle空心圆
square方形

<ol> 标签属性

-type 规定符号的形状,建议CSS

描述
1数字有序列表
A大写字母有序列表
a小写字母有序列表
i小写罗马字母有序列表
I大写罗马字母有序列表

-start 规定有序列表的开始点,建议CSS
-reversed 规定有序列表的编号的顺序为逆序,H5

<li> 标签属性

-type 规定符号的形状,建议CSS
包括所有<ul><ol>的type类型
-value 规定列表编号的起始数字


经过测试,如果为<ul>下的<li>设置type为数字类型,实际显示效果为带数字的有序列表,即展示出来的效果以越靠近元素的设置为准,value属性只针对<ol>有效

<ul>
<li value=100>test</li>
</ul>
<!--这个设置无效,最终效果不会以100为编号开始计数-->

<ul type=disc>
<li type=circle>test</li>
<li type=1>test</li>
</ul>
<!--这个设置第一行会显示circle效果,第二行会显示有序列表1,ul中设置的无效-->

<ol type=a>
<li type=circle>test</li>
<li type=1>test</li>
</ol>
<!--这里同理,ol中设置的无效-->
  • test
  • test
  • test
  1. test
  2. test

<dl><dt><dd>没有特殊属性

列表嵌套案例

<ul type=disc>
  <li>家电</li>
    <ul type=circle>
    <li>电冰箱</li>
    <li>电脑</li>
    <li>洗衣机</li>
    </ul>
  <li>生活用品</li>
    <ul type=square>
    <li>卫生纸</li>
    <li>洗厕灵</li>
    <li>牙膏</li>
    </ul>
</ul>
  • 家电
    • 电冰箱
    • 电脑
    • 洗衣机
  • 生活用品
    • 卫生纸
    • 洗厕灵
    • 牙膏