此文为【前端修炼场】第五篇,上一篇文章链接:
这些标签你学会了么?快速拿下 “hr”
文章目录
前言
首先我将为诸位道友引入列表的分类,请移步看下列表格
无序列表 | 有序列表 | 自定义列表 |
---|---|---|
不区分顺序,开端没有数字 | 区分顺序,开端有数字 | 使用图文同框 |
接下来由我为诸位道友逐一介绍这三种列表!
1. 无序列表(unordered list)
基础介绍:
- 无序列表 — unordered list
- 标识符为 ul
- ul 内部只能写入 li 标签
多说无益,接下来我们直接上手操作!
1.1 code展示
注:代码块中只放入body内容
<ul type="disc">
<li>一碗黄豆酱</li>
<li>最帅!</li>
</ul>
<ul type="circle">
<li>一碗黄豆酱</li>
<li>最帅!</li>
</ul>
<ul type="square">
<li>一碗黄豆酱</li>
<li>最帅!</li>
</ul>
<ul type="none">
<li>一碗黄豆酱</li>
<li>最帅!</li>
</ul>
<!-- 在 ul 内部我们只能使用 li ,但是在 li 内部我们可以使用其他标识符!!!
代码注释方式:选中代码段按下Ctrl+/即可
-->
代码解释:
- 基础架构为双标签 ul 包含子标签 li,在 li里面可以添加信息
- 第一个无序列表 ul 的属性值是 type=“disc”,表示我们的序号是实心黑点
- 第二个无序列表 ul 的属性值是 type=“circle”,表示我们的序号是空心黑点
- 第三个无序列表 ul 的属性值是 type=“square”,表示我们的序号是方块
- 第四个无序列表 ul 的属性值是 type=“none”,表示我们的序号是空的
1.2 网页展示
1.3 创建技巧
如果我们想要一个 ul 创建很多个 li ,那么我们一个一个敲上去,这不有失诸位道友的颜面!所以在此我教大家一个快捷方式!
- 输入ul>li*n
ul>li的意思是在ul内创建一个子标识符 li,*n的意思是建立n个 li,n为任意正整数!
诸位道友自行尝试并掌握!
2. 有序列表(Ordered List)
基础介绍:
- 有序列表 — Ordered List
- 标识符为 ol
- ol 标识内部只能为 li 标签
多说无益,接下来我们直接上手操作!
2.1 code展示
注:代码块中只放入body内容
<ol>
<li>我是一碗黄豆酱</li>
<li>我爱学习,我爱CSDN!</li>
</ol>
<ol type="A" start="3">
<li>我是一碗黄豆酱</li>
<li>我爱学习,我爱CSDN!</li>
</ol>
<!-- 在 ol 内部我们只可以使用 li ,但是在 li 内部我们可以使用其他标识符!!! -->
上半部分是没有加上属性值的,用法就是在 ol 标识符内加上特定的标识符 li ,在其内输入内容,在网页中会自动进行排序展示内容(在后面会有网页展示)
下半部分我们在 ol 标识符内设定属性值 type 和 start ( type的作用是选择我们列表顺序用什么方式进行,比如用字母1.2.3排序或者A B C排序等等 / start则是用来选择我们的顺序从哪开始,比如从3开始或者从C开始往后排序)
注意start只能是数字,当我们想要从C开始,我们只需要将start设定为3即可!
注意我注释的文字! (在 ol 内部我们只可以使用 li ,但是在 li 内部我们可以使用其他标识符!!!)
在此说明,type有如下:A a 1 i I 这五种,大家可以后面自行尝试!我就不逐一列举了
2.2 网页展示
-
不修改属性值时的网页:
此时默认为利用数字1.2.3排序
-
修改属性值时的网页:
诸位现在应该理解我前面所说的,当我将属性值中的type设立为A,那么就是设定排序方式为A B C的形式,start设置为3的意思就是我们排序的开端为C,依次往后推延
3. 自定义列表
基础介绍:
- 自定义列表可以图文放一起
- 标识符是 dl
- dl 内部是由 dt 和 dd构成(dt 标识内放入图片,dd 内部放文字)
多说无益,接下来我们直接上手操作!
3.1 code展示
注:代码块中只放入body内容
<dl>
<dt>这里放图片</dt>
<dd>这里放文字</dd>
</dl>
3.2 网页展示
大家此时一定很疑惑,为什么前面自由标签可以放图片很文字,咋不见你演示?诸位道友莫急,请看下篇超详细讲解!
总结
这篇文章我们对于三类列表进行了学习,下节课我们将会对如何插入图片进行介绍!
✨ 原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下
👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!