HTML-列表标签

155 阅读1分钟

HTML-列表标签

列表标签有三个展现形式:无序列表、有序列表、自定义列表

image.png

一、无序列表

1、含义:没有顺序的列表清单

2、基本语法:

<ul>
    <li>文本</li>
    <li>文本</li>
    <li>文本</li>
</ul>

3、相关属性:type="",type的属性值有:disc、circle、square、none

type="列表项的显示内容"

例如:
<!-- 列表前面是黑色实心方块 -->
<ul type="square">        
    <li>文本</li>
    <li>文本</li>
    <li>文本</li>
</ul>

(1)disc:黑色实心圆

(2)circle:空心圆

(3)square:黑色实心方块

(4)none:取消列表项

注意:实际开发的时候,以上的属性几乎不会使用,使用频率最多的是none,目的是取消列表项,其他对应的列表项,需要使用背景图片完成,方便调整位置。

可用快捷键:ul>li{文本}*3

二、有序列表

1、含义:有顺序的列表清单

2、基本语法:

<ol>
    <li>文本</li>
    <li>文本</li>
    <li>文本</li>
</ol>

3、相关属性:

(1)type属性:用来修饰列表项

type="1/A/a/I/i"

1:根据数字计数
A/a:根据(大写/小写)字母计数
I/i:根据罗马(大写/小写)数字来计数

(2)start属性:用来修改列表项的起始位置

start="数值"

数值表示从第“数值”个位置开始计数

例如:

<!-- 计数方式为“a、b、c、d...”  从第五个位置开始,即从e开始 -->
<ol type="a" start="5">
    <li>第一步骤</li>
    <li>第二步骤</li>
    <li>第二步骤</li>
</ol>

可用快捷键:ol>li{文本}*3

三、自定义列表

1、含义:主要应用于图文混排或者问答列表

2、基本语法:

<dl>
    <dt>图片/问题</dt>
    <dd>文本/答案</dd>
</dl>

例如:

<dl>
    <dt>问题:哪里发货</dt>
    <dd>回答:北京发货</dd>
</dl>