HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮

有序列表（）的使用：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title

文章共5,857字 · 阅读需要大约20分钟

一键AI生成摘要，助你高效阅读

问答

爱睡觉的小馨

20225人浏览 · 2020-09-23 14:20:46

爱睡觉的小馨 · 2020-09-23 14:20:46 发布

文章速览：

HTML基础知识的学习+附加常用HTML标签

HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮

HTML中图片的网页插入以及属性设置

HTML中＜a＞＜/a＞标签的四大功能必看！必看！！必看！！！

HTML表单标签＜form＞＜/form＞登录窗口和单选框以及下拉栏的制作

有序列表（
）的使用：

<!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>速8</li>
            <li>返老还童</li>
            <li>marvel</li>
        </ol>

</body>

</html>

其中的ol代表列表夹，li代表的是列表项
结果：在这里插入图片描述
对与上面写的难免感觉有些简单，其实ol标签中有5种值可以进行添加，然后就可以更加美观

对于上面的代码中等价于：

<body>

        你们喜欢看的电影：

        <ol type="1">
            <li>速8</li>
            <li>返老还童</li>
            <li>marvel</li>
        </ol>

</body>

当然，对于上面的type=”1“而言，也可以将1换成a、A、i、I

换成a的话，按照a、b、c进行编号的排序

换成A的话，按照A、B、C进行编号的排序

换成 i 的话，按照 i 、 ii 、 iii 进行编号排序

换成 I 的话，按照 I 、 II 、 III 进行编号排序

<body>

        你们喜欢看的电影：

        <ol type="1" reversed="reversed">
            <li>速8</li>
            <li>返老还童</li>
            <li>marvel</li>
        </ol>

</body>

换成上面的代码的话就会进行倒叙的排序
在这里插入图片描述

<body>

        你们喜欢看的电影：

        <ol type="1" start="2">
            <li>速8</li>
            <li>返老还童</li>
            <li>marvel</li>
        </ol>

</body>

换成上面的代码的话就会从第二个开始排序，第一个就没了
在这里插入图片描述
type=“1” start=“2”，无论类型是1，还是a、A、i、I，要是想从第二个开始的话，都需要start为2

无序列表（
）的使用:

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

</body>

</html>

结果：
在这里插入图片描述
上面的代码等价于：

		<ul type="disc">
            <li>苹果🍎</li>
            <li>香蕉🍌</li>
            <li>草莓🍓</li>
        </ul>

其中disc代表的是实心圆

无序列表是网页中最常用的列表，其各个列表项之间为并列关系，没有顺序级别之分。u和li标签都拥有type属性，用于指定列表项目符号。在无序列表中type属性的常用值有三个:
在这里插入图片描述

        <ul type="square">
            <li>苹果🍎</li>
            <li>香蕉🍌</li>
            <li>草莓🍓</li>
        </ul>

换成上面的代码的会将实心圆换成实心方块
在这里插入图片描述

        <ul type="circle">
            <li>苹果🍎</li>
            <li>香蕉🍌</li>
            <li>草莓🍓</li>
        </ul>

换成上面的代码将会换成空心圈
在这里插入图片描述
综上，写一个例题（此时利用到块元素）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

        <style>
        .a{
           list-style-type:square; 
            /*  list-style-image: url(images/xiao.gif);*/
        }
        .b{
            list-style-type: circle;
        }
        </style>

</head>

<body>
    
            <ul > 
                <li>星期日</li>
                <li class="a">星期一</li>
                <li>星期二</li>
                <li class="b">星期三</li>
                <li class="a">星期四</li>
                <li>星期五</li>
                <li class="b">星期六</li>
            </ul>

</body>

</html>

在这里插入图片描述
上面无序列表前的符号也可以是自己的图片（不过图片应该小一点，这样才能够显示出来）：
稍做修改：

        <style>
        .a{
            /* list-style-type:square; */
            list-style-image: url(images/xiao.gif);
        }
        .b{
            list-style-type: circle;
        }
        </style>

在这里插入图片描述
注意：list-style-image属性就是用来引入自己的图片的当作无序表前面的标识符，不过后面跟写固定格式url（），括号里面写自己的图片的地址

对于上面的其实没有那么常见，用处也挺小，所以再举一个比较常见的例子：
就设计现在网购比较火的某宝上的按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">

        ul{
            /* 删除汉字前面的圈圈 */
            list-style:none;
        }

        *{
            /* 删除网页最上面的空白 */
            margin : 0;
            /* 删除左边处的空白 */
            padding: 0;
        }

        li{
            /* 将body标签中所有li标签中的文字横过来，横成一排 */
            float: left;
            /* 横过来之后，将原本body标签中的li标签中每个lio标签中的文字之间流出空隙 */
            margin: 0 10px;
            /* 颜色设为某宝红 */
            color: #f40;
            /* 对字体进行加粗 */
            font-weight:bold;
            /* 设置一个字体的大小： */
            font-size: 14px;

            height: 25px;
            line-height: 25px;
            padding: 0 5px;
        }

        /* hover的意思就是当鼠标移到这个位置发生什么事 */
        li:hover{
                /* 鼠标移动到li标签中的字体上变成的背景颜色 */
                background: #f40;
                /* 鼠标移动到li标签中的字体上将li标签中的字体变成白色 */
                color: #fff;
                /* 鼠标移动到文字上背景变成圆角 */
                border-radius: 15px;
        }

    </style>

</head>

<body>

        <!-- 你们喜欢看的电影：

        <ol type="1" start="2">
            <li>速8</li>
            <li>返老还童</li>
            <li>marvel</li>
        </ol> -->

        某宝中点击按钮：

        <ul type="circle">
            <li>某猫</li>
            <li>聚划算</li>
            <li>某猫超市</li>
        </ul>

</body>

</html>

在这里插入图片描述

定义列表：

定义列表常用于对名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。在网页设计中，定义列表常用于实现图文混排效果，其中

标记中插入图片，

标记中放入对图片解释说明的文字。如下图所示的“讲师简介”模块就可以通过定义列表来实现。

在这里插入图片描述
定义列表，主要用于解释名词，包含两个层次的列表。
第一层次是需要解释的名词，第二层是具体的解释。
定义列表的语法如下；

可设置的模板：

定义列表的嵌套
在定义列表中，一个dt标记下可以有多个dd标记作为名词的解释和说明，以实现定义列表的嵌套。
无序列表和有序列表的嵌套
最常见的列表嵌套模式就是有序列表和无序列表的嵌套，可以重复第使用ol和ul标记组合实现。

举个例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表无序列表的嵌套</title>
</head>

<body>

    <h2>每日生鲜</h2>
    <ul>
        <li>时令水果
            <ol>
                <li>苹果</li>
                <li>香蕉</li>
                <li>芒果</li>
            </ol>
        </li>
        <li>鲜谷蔬菜
            <ul>
                <li>毛豆</li>
                <li>西芹</li>
                <li>冬瓜</li>
            </ul>
        </li>
    </ul>

</body>

</html>