【Web】HTML，列表标签

笙之殇

已于 2023-05-31 22:29:47 修改

阅读量985

点赞数 2

分类专栏： Web 文章标签： html

于 2022-04-04 11:02:45 首次发布

本文链接：https://blog.csdn.net/qq_52978240/article/details/123946213

版权

Web 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

列表标签

1.无序列表

（1）标签定义

标签：<ul>【可当做父亲】【Unordered List】

列表项：<li>【可当做儿子】【list】

（2）注意事项

（a）无序列表的各个列表之间没有顺序级别之分，是并列的

（b）<ul></ul>中只能嵌套<li></li>

（c）<li></li>之间相当于一个容器，可以容纳所有元素

（d）无序列表会带有自己的样式属性，实际使用时，会通过CSS设置

（3）代码块

<!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>
    <h4>您喜欢的食物</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>罐头</li>
    </ul>
</body>
</html>

输出样式： watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56yZ5LmL5q6H,size_20,color_FFFFFF,t_70,g_se,x_16

2.有序列表

（1）标签定义

标签：<ol>【Ordered List】

列表项：<li>【list】

（2）注意事项

（a）有序列表即有排列顺序的列表，各个列表按照一定顺序排列定义

（b）<ol></ol>中只能嵌套<li></li>

（c）<li></li>之间相当于一个容器，可以容纳所有元素

（d）有序列表会带有自己的样式属性，实际使用时，会通过CSS设置

（3）代码块

<!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>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>刘德华</li>
        <li>刘若英</li>
        <li>刘凯丽</li>
    </ol>
</body>
</html>

输出样式： watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56yZ5LmL5q6H,size_14,color_FFFFFF,t_70,g_se,x_16

3.自定义列表

（1）标签定义

定义列表：<dl>【defination list】（大佬）

定义项目/名字：<dt>【defination title】（大哥）

描述每一个项目/名字：<dd>【defination date】（小弟）

（2）注意事项

（a）<dl></dl>里面只能包含<dt><dd>

（b）<dt>和<dd>个数无限制，经常是一个<dt>对应多个<dd>

（3）代码块

<!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>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>
</html>

输出样式： watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56yZ5LmL5q6H,size_13,color_FFFFFF,t_70,g_se,x_16

笙之殇

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Web】HTML，列表标签

列表标签目录1.无序列表（1）标签表示（2）无序标签注意事项2.有序列表1.无序列表（1）标签定义标签：<ul>【可当做父亲】列表项：<li>【可当做儿子】Eg:<ul> <li>榴莲</li> <li>臭豆腐</li> <li>罐头</li> </ul>输出样式：（...
复制链接

扫一扫