大家好,小白我如约而至了,今天讲的这个比较重要,因为在今后的使用过程中会经常重要,大家要仔细的学习了

首先,我来展示一下列表标签实现的效果,如下图


列表标签在网页中的应用非常多,一定要多写多记,下面我来给大家讲解一下如何实现列表标签

首先我来讲如何实现图1所示的效果

图一定义列表

定义列表格式如下

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

其中dt与dd是同级标签,dt内可以包含多个dd标签,但是dd标签内不能包含dt标签,dl,dt,dd标签必须组合使用,不能单独使用,演示如下图,实现的效果图就是图1

图二有序列表

有序列表格式如下

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

如果不定义type类型。默认是1234阿拉伯数字,有序列表的type类型有如下所示

type值 描述
1
1.2.3.4.5...阿拉伯数字
aa.b.c.d.e...小写英文
AA.B.C.D.E...大写英文
iⅰⅱ ⅲ ⅳⅴ...小写罗马数字
IⅠⅡⅢ Ⅳ Ⅴ...大写罗马数字

演示如下图,实现效果图为图2

图三无序列表

无序列表格式如下

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

如果不定义type类型,默认是实心小黑圆点,无序列表的type类型有如下所示

type值描述
disc
实心圆点
square实心正方形
circle空心圆

演示如下图,实现效果图为图三

大家一定想看看实际的网页中列表标签的使用吧,大家打开chrome浏览器(或者基于chrome浏览器开发),firefox(或者基于firefox开发)的浏览器,点击F12调试模式,然后找到如下小箭头,在网上看看列表标签的实际使用吧~


----------------------------------------

前端教学之段落与标签---2

文末的代码我是这样写的,大家可以参考一下