HTML列表标签！

Skkkkk.

已于 2024-04-08 11:40:11 修改

阅读量122

点赞数 1

分类专栏： html 文章标签： html

于 2024-04-08 10:03:11 首次发布

本文链接：https://blog.csdn.net/dhshsness/article/details/137496903

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

列表标签在html中也是比较重要的基础知识，列表标签，也分为有序列表和无序列表，以及自定义义列表。

自定义列表：自定义列表的使用场景：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有项目符号

有序列表：有序列表即为有排列顺序的列表，其各个列表项会按一定顺序排列定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td><img src="./1.png" alt="" height="182px" width="296px"></td>
            <td><img src="./2.png" alt="" height="182px" width="296px"></td>
            <td><img src="./3.png" alt="" height="182px" width="296px"></td>
        </tr>
        <tr align="center">
            <td><b>拉布拉多犬</b><br><br>拉布拉多寻回犬是一种结构坚固，中等体型，接<br>合较短的狗,它健康，稳定性良好的结构.</td>
            <td><b>苏格兰折耳猫</b><br><br>在耳朵有基因突变的猫种，这猫种最初在苏格兰<br>发现，所以以它的发现地和身体特征而命名.</td>
            <td><b>泰迪犬</b><br><br>用作打猎、表演和陪伴。根据体型大小被分为四<br>类，最受欢迎的是体型较小的品种。</td>
        </tr>
        <tr>
            <td><img src="./4 .png" alt="" height="182px" width="296px"></td>
            <td><img src="./5.png" alt="" height="182px" width="296px"></td>
            <td><img src="./6.png" alt="" height="182px" width="296px"></td>
         </tr>
        <tr align="center">
            <td><b>英国短毛猫</b><br><br>体型圆胖，温柔平静，对人友善，极易饲养。大而圆的眼睛根据被毛不同而呈现各种颜色。</td>
            <td><b>萨摩耶犬</b><br><br>机警，有力，非常活泼。高贵而文雅，它拥有非常浓厚的，能抵御各种气候条件的被毛。</td>
            <td><b>波斯猫</b><br><br>波斯猫是最常见的长毛猫，波斯猫有一张讨人喜爱的面庞，长而华丽的被毛，优雅的举止。</td>
        </tr>
    </table>
    
</body>
</html>

无序列表：无序列表会带有自己的样式属性，但实际使用时，我们会使用css来设置，实际操作如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
        }
			ul>li{
				color: blue;
			}
			s{
				color: darkgray;
				text-decoration: none;
			}
    </style>
</head>
<body>
    <div>
        <hr>
        <ul>
            <li>[产品更新]新版游戏论坛区上线了!&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<s>2013-3-26</s></li>
            <br />
            <li>[平台活动]2012年人人网开放平台年终盘点&emsp;&emsp;&emsp;&emsp;<s>2013-1-31</s></li>
            <br />
            <li><u>[平台公告]未上线移动客户端测试策略调整通知</u>&emsp;&emsp;<s>2012-11-05</s></li>
            <br />
            <li>[平台公告]应用支付问题修复通知&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<s>2012-10-17</s></li>
            <br />
            <li>[平台公告]十一期间暂停应用接入审核服务通知&emsp;&emsp;<s>2012-9-28</s></li>
            <br />
            <li>[产品更新]应用授权页面优化&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<s>2012-8-24</s></li>
            <br />
            <li>[产品更新]好友选择器优化通知&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<s>2012-8-23</s></li>
        </ul>
    </div>
</body>
</html>

以上便是html列表标签的实际操作，和代码展现，有需要借鉴的朋友，可以自行复制。