HTWL列表

本文详细介绍了HTML中的列表标签,包括无序列表、有序列表、目录列表、定义列表和菜单列表的使用,以及列表项目的标记。重点讲解了无序列表的type属性、有序列表的type和start属性,并阐述了嵌套列表的概念和定义列表的标记结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一,列表标签

1,在html页面中,合理的使用列表标签可以起到提纲和格式排序文件的作用

2,列表分为两类:一是无序列表,一是有序列表

3,无序列表就是项目各条列间并无顺序关系,只是利用条例来呈现资料而已,这样的无序标签,在每个条列前面都有一符号来区别,符号可以分卫三类:

<ul><li>的属性type类型,有三个选项:

disc:默认的实心圆

circle:空心圆

square:小方块

4,有序列表就是指各各条例之间是有顺序的,比如:1,2,3.。。。一直这样延续下去。

以下是各项目列表标签:
标签                   描述

<ul>                    无序列表

<ol>                     有序列表

<dic>                    目录列表

<dl>                      定义列表

<menu>                 菜单列表

<DL>/<DT>/<DD> 定义列表的标记

<LI>                       列表项目的标记

二,无序列表

1,无序列表使用的是一对标签<ul></ul>,无序列表指没有进行编号的列表,每一个列表项前都使用<LI>标签:

<ul type="circle">
    <li>这是无序列表</li>
    <li>这是无序列表</li>
    <li>这是无序列表</li>
</ul>

2,<ul><li>的属性type(类型),有三个选项,这三个选项必须小写:

a: disc默认实心圆(就是默认存在的,不写type类型时都存在的)

b: circle空心圆

c: square小方块

三,有序列表

1,有序列表使用的标签时<ol></ol>,每一个列表项前使用<li>。

<ol>有序列表的结果时带有前后顺序之分的编号,如果插入或者删除一个列表项,编号都会自动调整。

<ol type="1" start="10">
    <li>这是有序列表</li>
    <li>这是有序列表</li>
    <li>这是有序列表</li>
</ol>

2,有序列表中顺序编号的设置是由<ol>的两个属性type和start来完成:

a:(类型)type=用于编号的数字字母等的类型的设定,从1 开始可以省略,《或者是在<li>标签中设定value=“n”来改变列表项目的编号,如 <li  value="7">》

b:(开始)start=排序的字母,数字等类型,使用字母,或者数字,则编号就以字母或者数字来排序,start的值是设置编号的起始值。

如:type=1,则表示列表的项目的数字标记为(1,2,3。。。)字母,罗马数字等都一样。

三,嵌套列表

1,嵌套列表就是将一个列表嵌入到另一个列表中,作为另一个列表中的一部分,无论是有序列表还是无序列表的嵌套,浏览器都可以自动的分成排列。

<ol>
    <li>
        <ul>
            <li>有序列表的嵌套</li>
        </ul>
    </li>
</ol>

<ul>
    <li>
        <ol>
            <li>无序列表的嵌套</li>
        </ol>
    </li>
<ul>

嵌套列表是由-ul里面的li里面放入ol,li,或者相反,嵌套列表内可以有多个li。

四,定义列表的标记

1,定义列表的标记也叫描述性列表,定义列表内有dl,dt,dd(dl包含dt和dd)

dt代表标题,显示文章的标题,

dd则代表显示文章的内容

<dl>
    <dt>标题</dt>
    <dd>这是定义列表</dd>
    <dd>这是定义列表</dd>
    <dd>这是定义列表</dd>
</dl>

总结:

无序列表:<ul><li></li></ul>

有序列表:<ol><li></li></ol>

定义列表:<dl>

            <dt></dt>

            <dd></dd>

         </dl>

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值