四、HTML列表标签讲解

2023-08-03 本文已影响0人 by依白

在HTML中，列表标签分为三个
1.无序列表
2.有序列表
3.自定义列表

标签	说明
ul	无序列表
ol	有序列表
dl	自定义列表

编译环境Windows 11 专业版，编程工具HBuilder X3.8.7

1.无序列表

<ul>
<li>无序列表</li>
<li>这里表示无序列表的每一项</li>
</ul>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul>
            <li>无序列表</li>
            <li>这里表示无序列表的每一项</li>
        </ul>
    </body>
</html>

无序列表

ul标签中只允许包含li标签
li标签可以包含任何内容
扩展：无序列表列表项符号由list-style-type定义，后续学到css就可以自己定义无序列表的小图标啦

1.1type属性

type	属性值	序号类型
disc	默认值	实心圆“●”
circle		空心圆“○”
square		实心正方形“■”

        <ul>
            <li>默认</li>
        </ul>
        <ul style="list-style: circle;">
            <li>circle</li>
        </ul>
        <ul style="list-style: square;">
            <li>square</li>
        </ul>

2.有序列表

<ol>
<li>有序列表</li>
<li>ol包裹有序列表</li>
</ol>

有序列表

ol列表中只允许包含li标签
li标签可以包含任意内容
扩展：有序列表列表项符号由list-style-type定义，后续学到css就可以自己定义无序列表的小图标啦

2.1 type属性

type属性值	列表项的序号类型
1	（默认属性）数字1、2、3……
a	小写英文字母a、b、c……
A	大写英文字母A、B、C……
i	小写罗马数字i、ii、iii……
I	大写罗马数字I、II、III……

3.自定义列表

<dl>
<dt>表示自定义列表的主题</dt>
<dd>自定义列表的每一项内容</dd>
<dd>硕士生导师</dd>
</dl>

自定义标签

标签	说明
dd	默认显示缩进效果,可包含任何内容
dl	只允许包含dt/dd标签
dt	可以包含任意内容

好了，今天内容就到这里了，有什么不懂的欢迎随时评论区交流或私信我，看到都会解答，仅限于文章内容，以上有什么讲的不规范的内容，欢迎大佬指证我的错误