._html ol li">
devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-02-16 11:44:23

赞

踩

html ol li

文章速览：

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

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

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

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

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

有序列表（
  1. ）的使用：

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

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

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

<body>

        你们喜欢看的电影：

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

</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

当然，对于上面的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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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

<body>

        你们喜欢看的电影：

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

</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

换成上面的代码的话就会从第二个开始排序，第一个就没了
在这里插入图片描述
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>苹果
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/92848
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。