美文网首页
从屌丝到架构师的飞越(HTML篇)-HTML列表

从屌丝到架构师的飞越(HTML篇)-HTML列表

作者: 走着别浪 | 来源:发表于2019-08-02 07:42 被阅读0次

    一、介绍

    列表是一种数据项构成的有限序列,即按照一定的线性顺序,排列而成的数据项的集合,在这种数据结构上进行的基本操作包括对元素的的查找,插入,和删除

    从某种意义上讲,不是描述性文本的任何内容都可以认为是列表。人口普查、太阳系、餐馆菜单等都可以表示为一个列表或列表的列表。列表分为无序列表、有序列表

    二、知识点介绍

    1、列表标签

    2、无序列表

    3、有序列表

    4、嵌套列表

    5、定义列表的标记

    6、目录列表<DIR>和菜单列表<MENU>

    三、上课对应视频的说明文档

    1:列表标签:

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

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

    无序列表就是项目各条列间并无顺序关系,纯粹只是利用条列来呈现资料而已,此种无序标签,在各条列前面均有一符号以示区隔。

    有序条列就是指各条列之间是有顺序的,比如从1、2、3…一直延伸下去

    2、无序列表

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

    <LI>的属性type 有三个选项,这三个选项都必须小写:

    disc 实心园

    circle 空心园

    square 小方块

    实例:

    <html>

    <head>

    <title>无序列表</title>

    </head>

    <body>

    <ul>

    <li>默认的无序列表加"实心园"

    <li>默认的无序列表"实心园"

    <li>默认的无序列表"实心园"

    </ul>

    <ul>

    <li type=square>无序列表square 加方块

    <li type=square>无序列表square 加方块

    <li type=square>无序列表square 加方块

    </ul>

    <ul>

    <li type=circle>无序列表circle 加空心园

    <li type=circle>无序列表circle 加空心园

    <li type=circle>无序列表circle 加空心园

    </ul>

    </body>

    </html>

    3、有序列表

    有序列表使用标签<ol></ol>,每一个列表项前使用<li>。<ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项,编号会自动调整。

    顺序编号的设置是由<ol>的两个属性type 和start 来完成的。

    start=编号开始的数字,如果从1 开始可以省略,或是在<li>标签中设定value="n"改变列表行项目的特定编号,例如<li value="7">。

    type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。为了使用这些属性,把它们放在<ol>或<li>的的初始标签中。

    有序列表

    </ol>

    <ol type=a start=5>

    <li>第1 项

    <li>第2 项

    <li>第3 项

    <li value= 20>第4 项

    </ol>

    <ol type= I start=2>

    <li>第1 项

    <li>第2 项

    <li>第3 项

    </ol>

    </body>

    </html>

    4、嵌套列表

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

    开头第一行内容</li>

    <li>这是以序号类型a 开头第二行内容</li>

    <ol type=A start=3>

    <li>这是以序号A 类型C 开头第一行内容</li>

    <ol type=1 start=51>

    <li>这是以序号数字51 开头第一行内容</li>

    <li>这是以序号数字51 开头第二行内容</li>

    <li>这是以序号数字51 开头第三行内容</li>

    </ol>

    <li>这是以序号A 类型C 开头第三行内容</li>

    </ol>

    <li>这是以序号类型a 开头第三行内容</li>

    </ol>

    5、定义列表的标记

    定义列表的标记也叫描述性列表,定义列表默认为两个层次,第一层为列表项标签<DT>,第二层为注释项标签<DD>。<DT>和<DD>标签通常是成对使用的。也可以一个列表项对应于几个解释项,这种方式很少用。

    <DD>默认的注释是显示在另一行中,当使用<dl compact="compact">后,注释项和列表项将显示在同一行。其格式为:

    <dl>

    <dt>第1 项 <dd>注释1

    <dt>第2 项 <dd>注释2

    <dt>第3 项 <dd>注释3

    </dl>

    实例:

    <html>

    <head>

    <title>定义性列表</title>

    </head>

    <body>

    定义性列表<P>

    <dl>

    <dt> WWW:<dd> WWW 是(World wide web)的缩写,也可简写web;

    <dt> WWW:<dd> WWW 又叫万维网;

    <dt> WWW:<dd> internet 提供的最常用的服务是WWW;

    </dl>

    </body>

    </html>

    6、目录列表<DIR>和菜单列表<MENU>

    <dir>为目录列表标签,<menu>为菜单列表标签,它们的格式和无序列表<ul>是一样的,例如:

    格式1:

    <dir>

    <li>第一项

    <li>第二项

    <li>第三项

    </dir>

    格式2:

    <menu>

    <li type=disc>第一项

    <li type=circle>第二项

    <li type=square>第三项

    </menu>

    实例:

    <html>

    <head>

    <title>无序列表</title>

    </head>

    <body>

    <ul>

    <li>默认的无序列表加"实心园"

    <li>默认的无序列表"实心园"

    <li>默认的无序列表"实心园"

    </ul>

    <dir>

    <li>默认的目录列表加"实心园"

    <li>默认的目录列表"实心园"

    <li>默认的目录列表"实心园"

    </dir>

    <menu>

    <li>默认的菜单列表加"实心园"

    <li>默认的菜单列表"实心园"

    <li>默认的菜单列表"实心园"

    </menu>

    <dir>

    <li type=square>目录列表square 加方块

    <li type=square>目录列表square 加方块

    <li type=square>目录列表square 加方块

    </dir>

    <menu>

    <li type=circle>菜单列表circle 加空心园

    <li type=circle>菜单列表circle 加空心园

    <li type=circle>菜单列表circle 加空心园

    </menu>

    </body>

    </html>

    相关文章

      网友评论

          本文标题:从屌丝到架构师的飞越(HTML篇)-HTML列表

          本文链接:https://www.haomeiwen.com/subject/jdvorctx.html