HTML 学习笔记(七)列表

html中的列表分为以下三种：有序列表，无序列表和自定义列表

1.有序列表

有序列表由两个元素组成：元素ol和元素li，此两个元素是父子关系，li必须包裹在ol里使用，
ol里直接嵌套的只有li，其嵌套效果需要放在li的里面

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        
        <h2><i>把大象装冰箱有几步：i>h2>
        <ol>
            
            <li>把冰箱门打开li>
            <li>把大象装进去li>
            <li>把冰箱门带上li>
        ol>
        
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述
列表项目符号可以通过在ol标签中加入属性type来设置：
type属性值有5种，分别是A，a，I，i，1，
分别对应了大小写的英文数字顺序，大小写的罗马数字顺序以及阿拉伯数字顺序

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        <h2><i>把大象装冰箱有几步：i>h2>
        <ol type="I">
            <li>把冰箱门打开li>
            <li>把大象装进去li>
            <li>把冰箱门带上li>
        ol>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述
通过在ol标签内添加start属性来控制项目符号的初始值

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
    
        <h2><i>把大象装冰箱有几步：i>h2>
        <ol type="I" start="5">
            <li>把冰箱门打开li>
            <li>把大象装进去li>
            <li>把冰箱门带上li>
        ol>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

2.无序列表

下面这种没有标准顺序，无序的排列，可以称为无序列表
在这里插入图片描述
通过标签ul和li即可实现无序列表

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        <ul>
            <li>事件1li>
            <li>事件3li>  
            <li>事件2li>
        ul>

    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

通过在ul标签中添加type属性来实现对无序列表项目符号大小形状进行设置：
disc是type的默认值，即黑色实心圆，circle为空心圆圈，square是黑色实心方块，none为无项目符号

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
    
        <ul type="circle">
            <li>事件1li>
            <li>事件3li>  
            <li>事件2li>
        ul>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

特别的，可以通过按住alt+↑或者↓的方式来快速交换无序列表中的两行内容

3.自定义列表

自定义列表由三个标签(双标签)组成： dl(定义列表)，dt(定义术语)和dd(定义描述)

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        <h2><i>一个自定义列表：i>h2>
        <img src="https://www.itbaizhan.com/wiki/imgs/image-20211016131741655.png" alt="一个自定义列表" title="自定义列表">
        
        
        <dl>
            <dt>帮助中心dt>
            <dd>用户指南dd>
            <dd>在线客服dd>
        dl>

    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

相关阅读:
vue-router配置
 企业办公室信息安全保密办法——推荐用天锐绿盾数据安全防泄密系统 | 防止核心文件数据、资料泄露
 设计模式——观察者模式17
C语言数据类型
 IntelliJ IDEA中使用“Generate equals() and hashCode()“提供不同模板的区别
 MySQL 是什么有什么用处下载和安装教程等值连接数据库基础知识怎么读取增删改短语优化的几种方法
 Golang基础7-并发编程
 创建一个Spring Boot项目
 JAVA实现兔子问题--递归
 在线docker命令大全中文版
原文地址：https://blog.csdn.net/k903161661/article/details/136588123