无序列表

作者：Gausst松鼠会 | 2024-03-28 08:16:06

踩

无序列表

无序列表的作用：

给一堆数据添加列表语义，没有顺序之分

格式：

<ul>
	<li>需要显示的条目内容</li>
</ul>
1
2
3

li是list item的缩写
list：列表
item：条目
结合起来就是列表条目的意思。

ul和li标签是一个整体，组合，一起出现。ul标签中只会看到li标签。

应用场景

新闻列表
商品列表
导航条

练习1

小技巧

注释快捷键：

单行注释：

Ctrl + / 
1

或先按CTRL+K，再按CTRL+U

取消单行注释：

Ctrl + /
1

或先按CTRL+U，再按CTRL+K

块注释

Alt + Shift + A
1

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-无序列表练习</title>

</head>

<body>
    <h1>搜狐热点新闻</h1>
    <hr width="500px" align="left">
    <!-- Ctrl+/ 注释，圆点disc实心，circle空心 -->
    <ul type="circle">
        <li>新闻1</li>
    </ul>


</body>

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

效果

在这里插入图片描述

练习2

小技巧

按快捷键Alt + B 就可以在默认浏览器下打开你写的页面。
使用快捷键 Shift + Alt + B 可以选择其他浏览器打开

注意需要安装插件
在这里插入图片描述
VSCode常用快捷键

1） ！+enter : 快速生称html代码框架

2） shift+alt+向下的方向键： 向下复制当前行

3） shift+alt+向上的方向键： 向上复制当前行

4） ctrl+S： 保存

5）shift+alt+F: 格式化代码

6） ctrl+F: 查找和替换
1
2
3
4
5
6
7
8
9
10
11

直接按！号然后回车就有默认的格式
在这里插入图片描述

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-无序列表练习2</title>

    <h1>四大名著</h1>
    <ul>
        
        <li>
            <h2>《三国演义》</h2>
            <p>具体描述</p>
        </li>
        <li>
            <h2>《红楼梦》</h2>
            <p>具体描述</p>
        </li>
        <li>
            <h2>《水浒传》</h2>
            <p>具体描述</p><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-无序列表练习2</title>

    <h1>四大名著</h1>
    <ul>
        
        <li>
            <h2>《三国演义》</h2>
            <p>具体描述</p>
        </li>
        <li>
            <h2>《红楼梦》</h2>
            <p>具体描述</p>
        </li>
        <li>
            <h2>《水浒传》</h2>
            <p>具体描述</p>
        </li>
        <li>
            <h2>《西游记》</h2>
            <p>具体描述</p>
        </li>
        

    </ul>

</head>
</html>
<!-- ul中只放li标签，但企业开发中li标签中添加其他的标签来丰富界面 -->
        </li>
        <li>
            <h2>《西游记》</h2>
            <p>具体描述</p>
        </li>
        

    </ul>

</head>
</html>
<!-- ul中只放li标签，但企业开发中li标签中添加其他的标签来丰富界面 -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

效果

在这里插入图片描述

练习3

小技巧

<!-- ul标签可以有li标签，li中还可以添加ul丰富界面 
alt+B 直接在默认浏览器上运行
ul>li含义：生成一对ul标签，然后在这对ul标签中再生成一对li标签
ul>li*3含义：生成一对ul标签，然后在这对ul标签中再生成3对li标签
ul>li*3>h2+ul>li*3-->
1
2
3
4
5

练习代码

<!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>17-无序列表练习3</title>
</head>
<body>
    <h1>物品清单</h1>
    <ul>
        <li>
            <h2>水果</h2>
            <ul>
                <li>葡萄</li>
                <li>橙子</li>
                <li>苹果</li>
            </ul>
        </li>
        <li>
            <h2>蔬菜</h2>
            <ul>
                <li>萝卜</li>
                <li>青菜</li>
                <li>香菜</li>
            </ul>
        </li>
        <li>
            <h2>零食</h2>
            <ul>
                <li>辣条</li>
                <li>腰果</li>
                <li>瓜子</li>
            </ul>
        </li>
    </ul>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/328822