自学内容网 自学内容网
自学内容网 > 正文

HTML（五）列表详解

🕗 发布于 2024-10-16 16:39 html  前端  

在HTML中，列表可以分为两种，一种为有序列表。另一种为无序列表

今天就来详细讲解一下这两种列表如何实现，效果如何

1.有序列表

有序列表的标准格式如下：

   <ol>
        <li>列表项一</li>
        <li>列表项二</li>
   </ol>

这里的列表项可以随意更改内容，使用示例如下：

<!DOCTYPE html>
<html>

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

<body>
 
    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
    </ol>
    
</body>
</html>

效果图如下：

2.有序列表更改前导符

什么是前导符？

前导符就是我们在使用列表打出文字前的小标题，如上图中的 1.    2. 这些都是前导符

前导符的标准语言使用如下：

 <ol type="前导符">
        <li>列表项一</li>
        <li>列表项二</li>
 </ol>

 这里的前导符有五种，如下图：

 接下来是实际代码演示+效果

<!DOCTYPE html>
<html>

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

<body>
 
    <ol type="a">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="A">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="1">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="i">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="I">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>
</body>
</html>

 3.无序列表

在HTML中另外一种列表被称作无序列表，无序列表与有序列表极其相似，只有微小的差距

无序列表标准格式如下：

    <ul>
        <li>列表项一</li>
        <li>列表项儿</li>
    </ul>

无序列表使用及效果如下：

<!DOCTYPE html>
<html>

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

<body>
 
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
    </ul>

</body>
</html>

 4.无序列表更改前导符

这里不做演示了，与有序列表使用方法相同


原文地址：https://blog.csdn.net/2301_80349538/article/details/142896175

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024