学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记

HTML基础教程(十二) 列表

发布时间:2019-12-19 点击:28

    HTML列表

    在HTML文档中,常用到的还有列表,HTML列表可以分为有序列表、无序列表以及自定义列表。

    一、有序列表

    什么叫有序列表呢?有序列表就是用数字来标识每一行文本,就像如下:

    1、有序列表

    2、无序列表

    3、自定义列表

    以上就是一个有序列表,有序就是说有顺序。

    使用的时候代码如下:

    <ol>        <!--有序列表的最大闭合标签-->
    <li>有序列表</li>   <!--有序列表的项-->
    <li>无序列表</li>   <!--有序列表的项-->
    <li>自定义列表</li>   <!--有序列表的项-->
    <li>。。。。</li>   <!--可以无限制增加-->
    </ol>

    需要有序化的项都放在<ol>闭合标签中即可。

    二、无序列表

    无序列表用法与有序列表基本相同,只是最大的闭合标签不同,无序列表是放<ul>在中,定义如下:

    <ul>        <!--无序列表的最大闭合标签-->
    <li>有序列表</li>   <!--无序列表的项-->
    <li>无序列表</li>   <!--无序列表的项-->
    <li>自定义列表</li>   <!--无序列表的项-->
    <li>。。。。</li>   <!--可以无限制增加-->
    </ul>

    显示的时候前面不是数字,而是圆点之类的符号,就像如下:

    如果不想用圆点来标识你可以通过<ul>的type属性来更换成其他项目符号;

    三、自定义列表

    如果以上两种的列表不能满足你的需求的话,你就可以使用自定义列表,但是现实中非常少用。

    用法同以上类似,只是标签以<dl>闭合标签来容纳,其中的项用<dt>来定义,并且增加了一个的子项<dd>,这个标签是用来定义项的。

    直接上实例,通过实例你将会很容易理解:

    <dl>
    <dt>列表项1</dt>
    <dd>- 有序列表</dd>
    <dt>列表项2</dt>
    <dd>- 无序列表</dd>
    <dd>- 自定义列表</dd>
    </dl>
    显示如下:

    怎么样,小伙伴们,动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: