06-创建列表

本课案例

image.png

列表的定义

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

列表的分类

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

列表的使用

1.无序列表（unordered list):

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

常见饮料（排名不分先后）
 
 
　 
咖啡
   
 　
茶
 　
牛奶
 　
果汁
 

注：

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

无序列表练习

• Apples
• Bananas
• Lemons
• Oranges

2.有序列表（ordered list):

小写字母列表：
  
   
Apples
  
   
Bananas
   
Lemons
   
Oranges
  

常用属性示例：

不推荐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内部可以则可以使用任何标签。具体见下面代码：

   
虽然我能正常显示，但是不建议！
   
第一名
Apples
   
第二名
Bananas
   
第三名
Lemons
   
第四名
Oranges
  

定义列表

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

   
 
        
首都
 
        
国家的行政中心
 
        
首都也通常是一个国家的经济和文化中心
        
省会
        
省的行政中心
        
首府
        
少数民族自治地区的行政中心
    

具体效果如图：

image.png

注意事项：

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

嵌套列表

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

image.png

代码如下：

一个嵌套列表：常见饮料

  
咖啡
  
茶
    

    
红茶
    
绿茶
      

      
中国茶
      
非洲茶
      
    
    
  
  
牛奶

注意事项

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

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

思考

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

image.png