HTML——列表标签

最新推荐文章于 2024-05-12 02:57:44 发布

Alyson_jm

最新推荐文章于 2024-05-12 02:57:44 发布

阅读量255

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Alyson_jm/article/details/113874181

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

列表标签分为三种，有序列表，无需列表和自定义列表

无序列表
有序列表
自定义列表

无序列表

<ul>：unorder list，表示无序列表
<li>:list item，列表项

示例

<!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>
            咖啡
            <p>不要买黑咖啡</p>
        </li>
        <li>水果</li>
    </ul>
</body>
</html>

效果

牛奶
咖啡
不要买黑咖啡
水果

属性

无序列表默认前面是一个小圆点，属性type 设置了无序列表的图标，type 的值为下面几种，默认为disc(实心圆),

circle：空心圆
square：实心方块
disc：实心圆

 <ul type="circle">
        <li>牛奶</li>
            <li>
            咖啡
            <p>不要买黑咖啡</p>
        </li>
        <li>水果</li>
    </ul>

牛奶
咖啡
不要买黑咖啡
水果

其他

ul,li 表示列表的语义，不是每一项前面加个小圆点
在style中设置： list-style-type:none 就把每个li前面的圆点去掉了。

有序列表

<ol>：order list，表示无序列表
<li>:list item，列表项
示例

<!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>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol> 
</body>

效果

有序列表1
有序列表2
有序列表3
有序列表4

属性

默认用1,2,3表示项目列表,属性type用来设置项目列表。

a: 以a,b,c 表示
A: 以A,B,C 表示
I: 以I II III 表示
i：以i ii iii 表示
start:编号开始的数值，默认1开始，可以省略

示例

<ol type="A" start="2">
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>

有序列表1
有序列表2
有序列表3
有序列表4

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以dl标签开始。每个自定义列表项以dt开始。每个自定义列表项的定义以dd开始。

示例

<!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>JS脚本程序</dd>
        </dl>
    </body>
</html>

效果

HTML

超文本标记语言

CSS

层叠式样式表

javaScript

JS脚本程序

总结

标签	描述
ul	定义无序列表
ol	定义有序列表
li	定义列表项
dl	自定义列表
dt	自定义列表项目
dd	自定义列表项描述

Alyson_jm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——列表标签

文章目录无序列表有序列表自定义列表总结列表标签分为三种，有序列表，无需列表和自定义列表无序列表有序列表自定义列表无序列表<ul>：unorder list，表示无序列表<li>:list item，列表项示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="
复制链接

扫一扫

专栏目录