HTML中,列表有三种类型:无序列表(符号列表)、有序列表(编号列表)、定义列表。
一、无序号条例式清单<ul>与<li>
1.格式:
<ul>
<li>…</li>
<li>…</li>
…
<li>…</li>
</ul>
<ul>无序条列清单的开始。</ul>表示结束。<li>…</li>表示一个项目
不能在<ul></ul>中输入文字,必须要在<li></li>中输入文字,才能显示在网页中。
<ul>与<li>是块级元素,会自动换行。
2.<ul><li>的属性
属性名称 属性值 说明
type disc 实心圆(默认值)
circle 空心圆
square 实心方块
style list-style:none; 清除列表前的项目符号
jpadding-left:0px; 设置列表前缩进(0px表示是0像素)
如:<ul type="circle" style="jpadding-left:10px;">表示设置该列表所有项的项目符号为空心圆,左缩进为10像素
<li style=" list-style:none; jpadding-left:0px;">清除当前列表项前的缩进和项目符号
3.列表嵌套:第一级默认实心圆,第二级默认空心圆,第三级默认实心方块
二、有序号条例式清单<ol>与<li>
1.格式:
<ol>
<li>列表的项目</li>
<li>列表的项目</li>
<li>列表的项目</li>
<li>列表的项目</li>
<li>列表的项目</li>
<li>列表的项目</li>
</ol>
<ol>有序条列清单的开始。</ol>表示结束。<li>…</li>表示一个项目
2.<ol><li>的属性
属性名称 属性值 说明
type 1 表示以1,2,3来表示
a 表示以a,b,c来表示
A 表示以A,B,C来表示
i 表示以i,ii ,iii 来表示
I 表示以I,II,III 来表示
style list-style:none; 清除列表前的编号
jpadding-left:0px; 设置列表前缩进(0px表示是0像素)
start 数字 设置起始位置是第几位(<li>没有此属性)
如:<ol type="A" start="6">表示列表的编号会从第六个大写字母F开始编号。
其他属性用法与<ul>类似,不再赘述
三、叙述式清单(定义列表)
1.格式:
<dl>
<dt>定义术语(项目标题)</dt>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
<dt>定义术语(项目标题)</dt>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
<dt>定义术语(项目标题)</dt>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
<dd>定义说明(标题小具体的内容)</dd>
</dl>
<dl>叙述清单的开始 <dt>表示一个项目 <dd>表示一个项目下的更详细的内容
转载于:https://blog.51cto.com/raffaele/1553673