HTML列表

最新推荐文章于 2023-07-12 21:46:06 发布

Poikilothermfu

最新推荐文章于 2023-07-12 21:46:06 发布

阅读量96

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Poikilothermfu/article/details/117603964

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

列表就是像word里面的标题一样，顺着往下数的标题。

一些控制标题的标签

标签	描述
<ol>	有序列表
<ul>	无序列表
<li>	列表项
<dl>	列表
<dt>	列表项
<dd>	描述

这些列表还分有序列表，无序列表和自定义列表。

无序列表

属性：disc：实体圆、circle：空心圆、square：实体方块

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
    <!-- 无序列表默认属性是disc，disc定义一个实体圆，所以disc不用刻意去设置 -->
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>
    <!-- 这些属性都是通过type来定义的，circle是定义一个空心圆 -->
        <ul type="circle">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>
    <!-- square定义实体方块 -->
        <ul type="square">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>
    </body>
</html>

有序列表

属性：A、a、l、i、start

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
    <!-- 有序列表默认是数字往下计数的 -->
        <ol>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- 定义A，就是按照大写字母来计数的，当然了，不能直接定义B，它不是不会从B开始数的 -->
        <ol type="A">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- 定义a，就是安装小写字母开始计数的 -->
        <ol type="a">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- 定义I，就是按照大写罗马数字计数的 -->
        <ol type="I">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- 定义i，就是按照大写罗马数字计数的 -->
        <ol type="i">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- start属性，就是按照从多少数来计数，比如我想从3开始计数。start属性只能定义数字，不支持英文字母哦。 -->
        <ol start="3">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    </body>
</html>

嵌套列表

嵌套列表就是有序列表套无序列表，无序套有序的。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <ol>
            <li>人物</li>
            <ul>
                <li>斯蒂芬·保罗·乔布斯</li>
                <li>丹尼斯·里奇</li>
                <li>比尔·盖茨</li>
            </ul>
            
            <li>动物</li>
            <ul>
                <li>猫</li>
                <li>狗</li>
                <li>熊</li>
            </ul>
        </ol>
            
    </body>
</html>

自定义列表

自定义的列表，就是没有有序、无序的点。后期可以用CSS样式来加工修改。也是比较常用的操作

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <dl>
            <li>我是标题</li>
            <dt>
                <dd>我是正文，我必须长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</dd>
            </dt>
        </dl>
            
    </body>
</html>

分类: HTML/CSS

Poikilothermfu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML列表

列表就是像word里面的标题一样，顺着往下数的标题。下标是一些控制标题的标签标签描述 <ol> 有序列表 <ul> 无序列表 <li> 列表项 <dl> 列表 <dt> 列表项 <dd> 描述这些列表还分有序列表，无序列表和自定义列表。无序列表 <ul>、<li> 属性：disc：...
复制链接

扫一扫