HTML系列之列表_html列表

作者：我家小花儿 | 2024-03-28 09:10:22

踩

html列表

一.列表

在内容排列比较规范的地方使用列表（List），列表是网页中最常用的一种数据排列方式，我们在浏览网页时，经常可以看到列表的身影。
在这里插入图片描述
在HTML中，列表又可以细分为：无序列表，有序列表和自定义列表。

二，无序列表

语法：

<ul>
         <li>列表项</li>
        <li>列表项</li>
         <li>列表项</li>
         <li>列表项</li>
</ul>

ul，即unordered list (无序列表)。li，即list（列表项）。
无序列表，很好理解，列表里面的每一项都是没有顺序的。默认情况下，无序列表项符号是●，可以通过type属性来改变样式。

<!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>

    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>雪梨</li>
        <li>柚子</li>
    </ul>

    <!-- type属性修改列表项符号样式，这里改为空心圆 -->
    <ul type="circle">
        <li>倚天屠龙记</li>
        <li>笑傲江湖</li>
        <li>鹿鼎记</li>
        <li>射雕英雄传</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

效果图：
在这里插入图片描述

在实际的前端开发中，无序列表比有序列表更有用。更准确的说，一般使用的都是无序列表，几乎用不到有序列表。如新浪网的导航，工具栏，淘宝网的分类，都是用无序列表实现的。

三，有序列表

语法：

<ol>
         <li>列表项</li>
         <li>列表项</li>
         <li>列表项</li>
         <li>列表项</li>
</ol>

ol，即ordered list（有序列表）。li，即list（列表项）

<!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>
    <ol> 
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>

    <!-- type属性改变列表项符号 -->
    <ol type="A">
        <li>李小龙</li>
        <li>成龙</li>
        <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
20
21
22
23
24
25
26

效果图：
在这里插入图片描述

四，自定义列表

语法：

<dl>
         <dt>名词</dt>
         <dd>列表项</dd>
         <dd>列表项</dd>
         <dd>列表项</dd>
</ol>

dl 即 definition list（自定义列表），dt即definition term（自定义名词），而dd即definition description（自定义描述）

<!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>
    <dl>
        <dt>HTML</dt>
        <dd>网页的骨架</dd>
        <dt>CSS</dt>
        <dd>美化网页</dd>
        <dt>JavaScript</dt>
        <dd>网页的动态效果</dd>
    </dl>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果图：
在这里插入图片描述

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