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

在这里插入图片描述

相关阅读:
Nexus私库搭建 Linux（快捷步骤）
公司项目申请软著,看到同事在一行一行的复制,用python2分钟帮了他
 基于Intel MediaSDK的低延迟编码实现
 C++ Primer Plus 第七章笔记
 Java框架 Spring5--JdbcTemplate
springMvc2-spring jar包下载
 一. HTML基础开发标签
 C++ 多态
 Python基础手册
 32_ue4进阶末日生存游戏开发[接口]
原文地址：https://blog.csdn.net/k903161661/article/details/136588123