HTML列表详述

最新推荐文章于 2023-11-16 14:51:28 发布

lingxiaoxing

最新推荐文章于 2023-11-16 14:51:28 发布

阅读量755

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_46471322/article/details/127112575

版权

HTML列表

列表可分为三类，有序列表，无序列表和自定义列表。在HTML编写网页时，列表是随处可见的！

当我们打开百度，看到首页的新闻！

1.有序列表

有序列表是用<ol></ol>来表示，有序列表里面只能放li，li里面可以放其他标签，且有序列表的默认是1.2.3的顺序，这个样式可以更改，主要有五种，分别是a,A,1,Ⅰ,i五种，可以选择，默认是从开始的名称开始排序，但是也可以规定顺序，规定是从start开始执行，接下来看一个关于有序列表的例子!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <!--默认是从A开始排序，但是我在这指定是从第二个开始排序，那就是从开始-->
    <ol type="A" start="2">
        <li>胡桃</li>
        <li>行秋</li>
        <li>万叶</li>
        <li>钟离</li>
    </ol>
     <!--从I开始进行有序的排序-->
    <ol type="I">
        <li>凌华</li>
        <li>心海</li>
        <li>万叶</li>
        <li>班尼特</li>
    </ol>
</body>
</html>

2.无序列表

无序列表和有序列表相似，但是前面是用统一的标识符，默认为实心圆！但不是唯一吗，可以通过更改type类型的值来改变标识符的样式！

默认的是黑色的实心圆点● type="disc"黑色实心圆 type="square"空心圆 type="circle"()黑色实心正方形 type="none"(用的多，取消显示)什么都没

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <p>默认为实心圆即type="disc"</p>
    <ul>
        <li>英语</li>
        <li>数学</li>
        <li>语文</li>
    </ul>
    <p>更改type的属性值
    </p>
    <ul type="square">
        <li>英语</li>
        <li>数学</li>
        <li>语文</li>
    </ul>  
</body>
</html>

结果展示：

3.自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。主要用在图文混排方面

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <dl>
            <dt>语文</dt>
            <dd>数学</dd>
       <dl>
</body>
</html>

效果：