育知同创-专注移动互联网,专注强师高品质课程|Android培训|HTML5培训|Java培训|VR培训

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 深圳 大连 武汉

▶ 您现在的位置:首页 > 视频教程 > 《Mars亲授HTML5开发视频教程》第07讲-列表

《Mars亲授HTML5开发视频教程》第07讲-列表

时间:2016-05-25 13:41:55  来源:育知同创  作者:育知

  •    HTML5学习QQ群: 339367359

     

     

    主要内容

    1、列表在网页当中的位置

    2、有序列表

    3、无序列表

    4、定义列表

     

    列表在网页当中的位置

    在上一集当中我们为大家介绍了图片在整个网页当中的位置--颜值担当,没有图片的网页会显得非常的苍白,很难吸引用户的注意力,而注意力则是我们这个时代最为稀缺的资源之一。

     

    但是就像现实世界当中的人一样,仅仅有颜值吸引眼球是远远不够的,还需要有丰富的内在魅力,才能在撩妹的过程当中所向披靡。

     

    QQ图片20160525142013.jpg

     

    我认为一个人最重要的内在魅力就是是否有清晰的逻辑。

     

    很多人认为逻辑只是在复杂的运算或者是抽象的哲学概念当中才存在的东西。其实不然,在我们的日常生活当中一个人的思维,语言和文字是否有良好的逻辑,决定了他在多大程度上能够看清事物的本质,也从某种程度上决定了他在工作和事业上能够走多远。所以建议大家平常多看看这个方面的书和文章--例如芭芭拉.明托的金字塔原理--能够很好的提升自己的逻辑思维能力。

     

    说了半天逻辑,这和我们今天要学习的列表究竟有什么关系呢?

     

    列表在网页当中的价值,就是将各种信息采用符合逻辑的方式展示出来,让用户能够更方便的get到网页内容的重点以及他们之间的关系,提升阅读网页的效率,从而更好的传播作者的思想。根据不同的逻辑关系,HTML将列表分为了三大类,有序列表,无序列表和定义列表。

     

    列表的分类方法

    有序列表通常用来表示内容之间的顺序或者是重要性关系,每一个列表都分为多个子项,每一个子项都有相应的编号。

    无序列表仅仅用于表示内容之间存在有并列关系,也是分为多个子项,但是子项之前没有相应的编号,只有一个原点用于标识。

    定义列表通常用于表示名词或者是概念的定义,每一个子项有两个部分组成,第一部分是名词或者是概念,第二部分是相应的解释和描述。

     

    有序列表 ol标签与li标签

    在网页当中定义一个有序列表,需要使用ol标签。每写下一个ol标签就在网页当中定义了一个有序列表。列表当中的列表项使用li标签进行定义,举个栗子:

     

    <h2>把大象塞进冰箱</h2>
    <ol>
            <li>打开冰箱门</li>
            <li>把大象塞进冰箱</li>
            <li>把冰箱门关上</li>
    </ol> 

     

    在默认的情况下,有序列表采用数字为列表项排序,除此之外,还可以使用大小写字母和大小写的罗马数字。可以通过ol标签的type属性进行设置。该属性的取值有以下五种:

     

    1.a:使用小写字母为列表排序;

    2.A:使用大写字母为列表排序;

    3.i:使用小写罗马数字为列表排序;

    4.I:使用大写罗马数字为列表排序;

    5.1:使用阿拉伯数字为列表排序;

     

    如果列表项不是从1开始排序,则可以为ol标签设置start属性,用于指定该列表从哪个序号开始向后排列,举个栗子:

     

    <ol type="i" start="3">    
              <li>第三种方案</li>  
              <li>第四种方案</li>  
              <li>第五种方案</li>
    </ol> 
     

    另外,有序列表还可以使用reserved属性指定列表进行倒序的排列,再来个栗子:

     

    <ol start="10" reversed="true" >
             <li>content 1</li> 
             <li>content 2</li>  
             <li>content 3</li>
    </ol> 
     

    无序列表 ul标签与li标签

    在网页当中定义一个无序列表需要使用ul标签,每写下一个ul标签就在网页当中定义了一个无序列表。列表当中的列表项依然使用li标签进行定义,举个栗子:

     

     <ul>             
           <li>西红柿鸡蛋面</li>              
           <li>茄子肉丁面</li>                 
           <li>油泼面</li>
    </ul l> 
     

    无序列表在网页当中显示的时候,每一个列表项前会有一个实心的原点进行标识,如果你觉得非常的难看,也可以进行改写。ul标签也有type属性,这个属性的作用就是用来指定使用什么形状进行列表项的标识。但是在最新的HTML5标准当中,这个属性已经不建议使用了。这个功能被移动到了CSS当中,今后我们的CSS课程会为各位进行详细的介绍。

     

    定义列表 dd标签、dt标签与dd标签

    很多书和文章都把定义列表叫做自定义列表,这实际上是一种误读,所谓的定义列表就是用来表示概念或者是名词的解释,这种列表的格式和表现方式也上面的两种列表一样,都是固定的,不能由开发者随意的改变,或者说是自定义。

     

    在网页当中定义一个定义列表需要使用dd标签,每写下一个dd标签就在网页当中定义了一个定义列表。与上述的两种列表不同的是定义列表的列表项包含两个内容,其中dt标签用于标识一个名词或者是概念,而dd标签则用来标识这个名词或者是概念的解释和描述,举个栗子:

     

    <dl>





上一篇:《Mars亲授HTML5开发视频教程》第06讲-图片

下一篇:《Mars亲授HTML5开发视频教程》第08讲-表格(一)


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号