html列表

南城以南1

已于 2022-07-04 16:20:14 修改

阅读量228

点赞数

分类专栏：大前端文章标签： html 前端 html5 开发语言

于 2022-07-04 16:15:40 首次发布

本文链接：https://blog.csdn.net/qq_36242554/article/details/125601609

版权

大前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录
- 一、列表是什么？
  
  二、列表分类
  
  1.有序列表
  
  2.无序列表
- 3.自定义列表

一、列表是什么？

定义列表用来对一些词汇或内容进行定义

二、列表分类

1.有序列表

代码如下（示例）：

<!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>
    <!-- 注释 快捷键 ctrl+/-->
    <!-- 1.li里面可以随意放标签.
         2.但是ol里面只能放li.
         3.数字是自动生成.
         4.type:1,a,A,i,I
         5.start:只能是一个数字（取值） -->
    <ol type="1" start="2">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ol>
</body>
</html>

2.无序列表

代码如下（示例）：

<!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>
    <!-- 1.ul里面只能放li,li里面可以放其他标签
         2.默认是黑色的实心圆
         3.type,disc circle square none -->
    <ul type="square">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
</body>
</html>

3.自定义列表

代码如下（示例）：

<!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>
    <dl>
        <dt>图片</dt>
        <dd>文字</dd>

    </dl>
    <dl>
        <dt>图片1</dt>
        <dd>文字1</dd>

    </dl>
    <dl>
        
        
        <dt>图片2</dt>
        <dd>文字2</dd>
    </dl>
</body>
</html>