HTML中基础列表的开发与运用

本文链接：https://blog.csdn.net/2501_90739355/article/details/146541848

列表是HTML中以简洁，结构化，易读性更强的方式提供信息的方法。

列表的存在形式主要分为：无序列表有序列表无序列表、无序列表无序列表、嵌套列表等。

下面是是各个列表的讲解及运用。

1.有序列表

有序列表是一个有特定顺序的列表项的集合。

使用<ol>(ordered lists,有序列表)标签可以建立有序列表，表项的标签仍为 <li>。

格式为：

<li type ="符号类型 1">表项 1

<li type ="符号类型 2">表项 2

</ol>

<body>
    <p>列表</p>
    <ol type="1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <ol type="A">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <ol type="a">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>

以下是运行结果

2.无序列表

2.无序列表

无序列表就是列表中列表项的前导符号没有一定的顺序，而是用黑点、圆圈、方框等一些特殊符号标识，类似于Word文档处理软件中的项目符号。

主要使用HTML中的 <ul> (unordered list ,无序列表)标签和 <li> (list item，列表项)标签来标记。

(1)<ul>标签的type属性用来定义一个无序列表的前导字符，若省略type属性，浏览器默认显示为disc前导字符。

type取值可以为disc(实心圆)、circle(空心圆)、square(方框)。

(2)li与之相同

<ul>标签标识一个无序列表的界限；

<li>标签标识一个无序列表项

格式为：

<li type = "符号类型 1">第一个列表项

<li type = "符号类型 2">第二个列表项

</ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <p>列表</p>
    <ul type="circle">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

以下是运行结果

3.嵌套列表

嵌套列表经常与无序列表与有序列表嵌套混合使用。

<body>
    <p>列表</p>
    <ul type="circle">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <ol type="A">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </ul>
    <ol type="A">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <ul type="circle">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </Ul>
    </Ol>
</body>

以下是运行结果