HTML列表——小白篇(6)

最新推荐文章于 2024-07-16 15:26:34 发布

余神

最新推荐文章于 2024-07-16 15:26:34 发布

阅读量240

点赞数 1

分类专栏： HTML学习文章标签： html

本文链接：https://blog.csdn.net/weixin_48101294/article/details/110913989

版权

HTML学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

返回目录

列表

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类

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

有序列表< ol>

有序列表，会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。
< ol>< ol>中只能嵌套< il>< /il>，直接在< ul>< /ul>标签中输入其他标签或文字是不允许的。
< il>< /il>之间相当于容器，可以容纳所有元素。

格式：
<ol>
<il>列表1</li>
<il>列表</li>
<il>列表</li>
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表的学习</title>
</head>
<body>
<!--有序列表
    应用范围：学号.问答-->
    
<ol>
    <li>退一步海阔天空，意思是你退一步，别人海阔天空。</li>
    <li> 你别看他现在长得帅，他老了就是一糟老头！</li>
    <li>说假话总会被人揭穿，戴假发总会被风揭穿。</li>
</ol>
</body>
</html>

网页显示
在这里插入图片描述

无序列表< ul>重点

无序列表的各个列表之间没有顺序级别之分，是并列的。
< ul>< /ul>中只能嵌套< il>< /il>，直接在< ul>< /ul>标签中输入其他标签或文字是不允许的。
< il>< /il>之间相当于容器，可以容纳所有元素。

格式：
<ul>
<il>列表1</li>
<il>列表</li>
<il>列表</li>
</ul>

列表的学习

有事请直奔主题，别用你的无知来挑战我的黑名单。
早回家的男人，讲故事给老婆听；晚回家的男人，编故事给老婆听。
我曾经跟一个人无数次的擦肩而过，衣服都擦破了，也没擦出火花。

网页显示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201209003107633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODEwMTI5NA==,size_16,color_FFFFFF,t_70)

定义列表

< dl>< /dt>里面只能包含< dt>和< dd>.
< dt>和< dd>个数没有限制，经常是一个< dt>对应多个< dd>.

格式：
<dl>
<dt><dt>
<dd></dd>
<dd></dd>
</dl>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的学习</title>
</head>
<body>
<!--自定义列表：-->
<dl>
    <dt>冷笑话</dt>
   <dd>据说好多人早上看时间不是为了起床，而是看还能睡多久。</dd>
   <dd>晚上不愿睡的人都是白天活不够。</dd>
   <dd>你再出去晒晒太阳吧，晒得再黑一点，就没人叫你白痴了!</dd>
</dl>
</body>
</html>

网页显示
在这里插入图片描述

余神

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
HTML列表——小白篇(6)

列表什么是列表列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。列表的分类无序列表有序列表定义列表有序列表< ol><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>有序列表的学习</title></head>
复制链接

扫一扫