06-创建列表

本课案例

image.png

列表的定义

以统一形式呈现的一组相关内容。

列表的分类

无序列表、有序列表、定义列表和嵌套列表

列表的使用

1.无序列表(unordered list):<ul></ul>

无序列表:一组没有先后顺序的相关内容,即列表中的条目是不分先后。
示例:

<h4>常见饮料(排名不分先后)</h4>
 <ul type="disc"> <!-- ul : unordered list,声明无序列表 -->
  <li>咖啡</li>   <!-- li : list item,声明列表项目 -->
  <li>茶</li>
  <li>牛奶</li>
  <li>果汁</li>
</ul> 

注:

  1. 属性 type = disc| square | circle 用于表示前面的项目符号,目前HTML4.01已经废弃。
    因为不同的浏览器的显示会有差异,实际应用中通常使用CSS中的背景图片来控制项目符号的距离和样式。

无序列表练习

  • Apples
  • Bananas
  • Lemons
  • Oranges

2.有序列表(ordered list):<ol></ol>

<h4>小写字母列表:</h4>
<ol type="a">  <!-- ol:ordered list,声明有序列表 -->
   <li>Apples</li>  <!-- li : list item,声明列表项目 -->
   <li>Bananas</li>
   <li>Lemons</li>
   <li>Oranges</li>
</ol>  

常用属性示例:

  <ol reversed = "reversed" > <!-- 反转编号 -->
  <li value="4" > <!-- 虽然不赞成使用value,不过暂时没有用来替代它的CSS方案 -->

不推荐OL使用的属性有(用其它办法解决解决):
type = "1 | a | A | i | I " 规定了编号的样式,以后用CSS来解决。
start = " number " 规定了编号的起始值,用li的value属性来解决。
:常见CSS代码为ol { list-style-type : upper-roman | lower-alpha | decimal-leading-zero | lower-greek; }

注意事项

ul+li以及ol+li是一个整体,因此ul和ol内部建议只使用li,li是一个容器,因而li内部可以则可以使用任何标签。具体见下面代码:

<ol>
   <p>虽然我能正常显示,但是不建议!</p>
   <li><h3>第一名<h3><p>Apples</p></li>
   <li><h3>第二名<h3><p>Bananas</p></li>
   <li><h3>第三名<h3><p>Lemons</p></li>
   <li><h3>第四名<h3><p>Oranges</p></li>
</ol>  

定义列表

工作中,假如需要先定义一个标题,下面再加以描述,此时就需要使用定义列表。

   <dl> <!-- definition list:定义列表 -->
        <dt>首都</dt> <!-- 定义标题:definition title-->
        <dd>国家的行政中心</dd> <!-- 定义描述:definition description-->
        <dd>首都也通常是一个国家的经济和文化中心</dd>
        <dt>省会</dt>
        <dd>省的行政中心</dd>
        <dt>首府</dt>
        <dd>少数民族自治地区的行政中心</dd>
    </dl>

具体效果如图:


image.png

注意事项:

1.由于dl和dt、dd是一个整体, 因而dl里面不建议放其它标签。
2.dd和dt和li标签一样都属于容器标签, 里面可以添加任意标签。
3.一个dt能对应多个dd, 但是不要多个dt对应一个dd是错误的, 因为dd的语义是描述它上面的那一个dt。

嵌套列表

有时,在列表项目中,还需要继续扩展列表,此时就需要嵌套列表。如下图


image.png

代码如下:

<h4>一个嵌套列表:常见饮料</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

注意事项

嵌套列表和定义列表很类似,其实认真想想,他们是有区别的。

  • 最核心的区别是,嵌套列表是多个名词的集合,而定义列表是有名词有描述。
  • 从表现形式上看,他们也有区别,嵌套列表有项目符号,定义列表每一个前面都没有项目符号。不过这一点不能作为辨别标准,因为项目符号在实际应用中通常用CSS清除掉。

思考

下图应该用定义列表还是嵌套列表?


image.png

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 15,547评论 32 459
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 9,665评论 3 185
  • 列表标签 无序列表(unordered list) 作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), ...
    cheney0217阅读 200评论 0 0
  • 最近项目开发中,我负责给数据库加索引。Mysql提供了丰富的索引类型,主要是B树索引(前缀索引、复合索引),Has...
    孙阔阅读 297评论 0 2
  • 最近,经常遇到多个Excel文件需要合并成为一个工作表,进行全面的数据分析。于是,小晞开始学习【如何偷懒】。 小晞...
    希日晞阅读 7,060评论 0 4
  • 和十二去海南旅游还是参加一个什么学术活动?遇到免费住度假村的活动。但是因为人多好房间少,我俩一路奔跑想抢先到达先选...
    kagomezz阅读 80评论 0 0
  • #生活来什么就接招#最近两天网坏了,昨天给主管说了,她后来就回了我一个"哦",我心里当时难受了一下,后来想想,...
    unique_blue阅读 48评论 0 0
  • 文/邀歌 一、咏桂树 我怎么遥看你这一汪翠绿 和那点点滴滴的鹅黄 像几只小鸭子在草丛中戏玩 又似清湖中的点点星光 ...
    邀歌阅读 199评论 5 4