前端设计（一）>>>>HTML的列表（有序列表、无序列表、自定义列表的使用)

最新推荐文章于 2024-04-17 22:30:25 发布

Jocker.Dragon

最新推荐文章于 2024-04-17 22:30:25 发布

阅读量1k

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/weixin_43458720/article/details/104535342

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

有序列表（ol）

定义：有序列表是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签。

有序列表有 type 和 start 属性。
语法格式：

<ol type=value1 start=value2>
    <li></li>        
</ol>

注：value1 表示有序列表项目符号的类型, value2 表示项目开始的数值。
type 属性如下所示：

type类型 	描述
type=1 	表示列表项目用数字表示（1，2，3...)
type=a 	表示列表项目用小写字母表示（a,b,c...)
type=A 	表示列表项目用大写字母表示（A,B,C...)
type=i 	表示列表项目用小写罗马数字表示(i,ii,iii….)
type=I 	表示列表项目用大写罗马数字表示(I,II,III…)

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>



        <body>

            <h4>数字列表：</h4>
            <ol>
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>小写字母列表：</h4>
            <ol type="a">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>大写写字母列表：</h4>
            <ol type="A">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>小写罗马字母列表：</h4>
            <ol type="i">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>大写罗马字母列表：</h4>
            <ol type="I">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>
        </body>

</html>

注：type 默认为数字列表，即不给 type 设置属性值时显示的为数字列表。

无序列表（ul）

定义：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于

标签。每个列表项始于
。无序列表的各个列表项之间没有顺序级别之分，是并列的。

ul 的 type 属性：默认值: disc，方块: square，空心圆: circle。
语法格式：

<ul>
    <li>列表项1</li>   
    <li>列表项2</li>   
    <li>列表项3</li>
    ......
</ul>

注：

标记用于定义无序列表，

标记嵌套在
标记中，用于描述具体的列表项，每对
中至少应包含一对

。
例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>



        <body>

            <h4>Disc 项目符号列表：</h4>
            <ul type="disc">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

            <h4>Circle 项目符号列表：</h4>
            <ul type="circle">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

            <h4>Square 项目符号列表：</h4>
            <ul type="square">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

        </body>

</html>

自定义列表（dl）

定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。自定义列表的列表项前没有任何项目符号。

语法格式：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    ...
</dl>

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <body>

            <h2>一个自定义列表：</h2>

            <dl>
                <dt>春天</dt>
                <dd>万物复苏 </dd>
                <dd>百花争艳 </dd>
                <dd>适合学习</dd>
                <dt>夏天</dt>
                <dd>夏日绵绵</dd>
                <dd>烈日炎炎</dd>
                <dd>适合学习</dd>
            </dl>

        </body>

</html>

Jocker.Dragon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端设计（一）>>>>HTML的列表（有序列表、无序列表、自定义列表的使用)

有序列表（ol）定义：有序列表是一列项目，列表项目使用数字进行标记。有序列表始于标签。每个列表项始于标签。有序列表有 type 和 start 属性。语法格式：<ol type=value1 start=value2> <li></li> </ol>注：value1 表示有序列表项目符号的类型, valu...
复制链接

扫一扫