HTML基础知识（3）-----列表_html中的ol元素表示排序的项目列表,属性type 可设置列表符号样式,取值为1表示

作者：不正经 | 2024-02-16 11:41:55

踩

html中的ol元素表示排序的项目列表,属性type 可设置列表符号样式,取值为1表示

一、有序列表

有序列表前面有项目符号，可以表达显示顺序、操作步骤、榜单排行等

有序列表是由ol标签和li标签构成的，li标签和ol标签都是双标签，基本语法为:

<ol>
<li></li>
</ol>

li标签必须使用ol标签。ol标签也只能嵌套li标签，若想使用其他标签，需要放置在li标签里面。

有序列表的项目符号是可以设置的通过给ol标签添加type属性来定义，type属性的值可以设置列表项目的符号，type的取值有A，a（英文字母顺序），I，i（罗马数字顺序），1（阿拉伯数字顺序）

改变列表的序号，通过给ol添加另外一个属性start，start取值是数字序号，不需要添加任何单位


<!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>有序列表</title>
</head>
<body>
    <ol>
        <li>把门打开</li>
        <li>走进去</li>
        <li>把门关上</li>
    </ol>
</body>
</html>

效果如下：

二、无序列表

无序列表指列表项中的内容，是没有时间、空间或者逻辑顺序要求的。

无序列表是由ul标签和li标签构成的，ul标签和li标签都是双标签，基本语法为:

<ul>
<li></li>
</ul>

ul标签里面嵌套li标签用于定义无序列表的内容

无序列表的项目符号在ul标签上添加type属性可以设置无序列表的项目符号，type的取值有disc（实心圆点），circle（空心圆），square（实心方块），none（隐藏项目符号）


<!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>无序列表</title>
</head>
<body>
    <ul type="square">
        <li>刷抖音</li>
        <li>玩游戏</li>
        <li>接电话</li>
    </ul>
</body>
</html>

效果如下：

三、自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义标签是由dl标签、dt标签和dd标签构成，三个都是双标签，基本语法为

<dl>
<dt></dt>
<dd></dd>
</dl>

dl标签，意为定义列表。dt标签，意为定义术语，可以理解为列表标题。dd标签，意为定义描述，可以理解为列表内容。

dt标签和dd标签是dl标签的子标签，dt和dd是兄弟标签，dt标签和dd标签不能脱离dl标签单独使用。


<!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>自定义列表</title>
</head>
<body>
    <dl>
        <dt>问：能不能学好编程</dt>
        <dd>答：当然可以</dd>
    </dl>
</body>
</html>

效果如下：

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