HTML5：列表

EX_C

已于 2024-09-25 18:10:14 修改

阅读量415

点赞数 5

文章标签： html5 前端 html

于 2024-09-25 18:08:46 首次发布

本文链接：https://blog.csdn.net/2401_84309743/article/details/142527921

版权

一、列表

列表的存在形式主要分为：无序列表、有序列表、定义列表（不重要）、嵌套列表

1.无序列表

（1）格式：

    <ul type="符号类型">
        <li type="符号类型1">第一个列表项</li>
        <li type="符号类型2">第二个列表项</li>
            ...
    </ul>

（2）type 属性

type属性用来定义一个无序列表的前导字符，如省略 type属性，则默认为disc前导字符（实心圆）

<ul type=" disc ">	实心圆●
<ul type=" circle ">	空心圆○
<ul type=" square ">	方块■
<ul img src=" mygraph.gif ">	指定为“mygraph.gif”的图片文件

在 li 后指定符号样式，可以设置该 li 的项目符号。格式与< 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>
     <ul type="square">      <!--列表样式为方块 -->
        <li type="disc">咖啡</li>       <!--列表样式为实心圆 -->
        <li type="circle">可可</li>     <!--列表样式为空心圆 -->
        <li>茶</li>
    </ul>
</body>
</html>

运行结果如下：

2.有序列表

（1）格式：

    <ol type="符号类型">
        <li type="符号类型1">第一个列表项</li>
        <li type="符号类型2">第二个列表项</li>
            ...
    </ol>

（2）type 属性

type属性用来定义一个有序列表的前导字符，如省略 type属性，则默认数字（1、2、3...）

<ol type-" 1 ">	数字(用start来定义那个数字开始)
<ol type-" A ">	大写英文字母
<ol type-" a ">	小写英文字母
<ol type-" I ">	大写罗马字母
<ol type-" i ">	小写罗马字母

在 li 后指定符号样式，可以设置该 li 的项目符号。格式与< ol >标签一样。

演示代码如下：

<!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>
    <ol type="I">       <!--列表样式为I -->
        <li type="A">咖啡</li>      <!--列表样式为A -->
        <li>牛奶</li>
        <li>茶</li>
    </ol>

    <ol start="6">      <!--列表样式为数字，start表示已6开头 -->
        <li>咖啡</li>
        <li>牛奶</li>
        <li>茶</li>
    </ol>

</body>
</html>

运行结果如下：

3.嵌套列表

嵌套列表就是将有序列表和无序列表嵌套混合使用

运行代码如下：

<!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>

    <ul type="circle">
        <li>帽子</li>
        <li>衬衫</li>
        <li>裤子
            <ol type="I">
                <li>西裤</li>
                <li>牛仔裤</li>
                <li>短裤</li>
            </ol>
        </li>
    </ul>

</body>
</html>

运行结果如下：