第四章 列表标签

第二十九课 无序列表

列表标签：给一堆数据添加列表语义，表示这一堆数据是一个整体
分类：

无序列表（最多）（unordered list）
有序列表（最少）(ordered list)
定义列表（其次） （definition list)

无序列表:给一堆数据添加列表语义，并且这一堆数据中所有的数据都没有先后之分
格式：

• list item 1

注意点：

1、无序列表是给一堆数据添加列表语义的，告诉浏览器这一堆数据是一个整体，不是添加小圆点的，小圆点css修改样式
2、ul和li标签是一个整体，是一个组合，不会单独使用
3、ul标签中不推荐添加除li标签以外的标签

应用：

1、新闻列表
2、商品列表
3、导航条 css修改样式

列表

  
 list item1 
  
 list item2 
  
 list item3 

第三十课 无序列表练习

搜狐新闻类标



    
list item1
    
list item2
    
list item3
    
list item4
    
list item5

第三十一课 无序列表练习 2

四大名著

    

        
《三国演员》
        
三国鼎立
    
    

        
《西游记》
        
孙悟空
    
    

        
《水浒传》
        
武松
    
    

        
《红楼梦》
        
贾宝玉
    

第三十二课 无序列表练习 3

物品清单

    

        
蔬菜
        

            
白菜
            
萝卜
            
黄瓜
        
    
    

        
水果
        

            
苹果
            
西瓜
            
香蕉
        
    

webstorm 快捷方式
ul>li；ul>li*3

ul>li2>h2+ul>li3

第三十三课 有序列表

有序列表:给一堆数据添加列表语义，并且这一堆数据中所有的数据都有先后之分
其他和ul一样

    
 list item 



    
演员
    
丑八怪
    
一人饮酒醉

第三十四课 定义列表

1、给一堆数据添加列表语义
2、dt标题 dd标题描述
格式：

dt:definition title 定义列表中的标题
dd:definition description 定义标题对应的描述的
注意点

1 dl和dt/dd是一个整体，一次出现
2 dl中建议只放dt和dd标签
3 一个dt可以没有对应的dd，也可以没有dd，但是不建议使用
建议使用一个dt对应一个dd
4 和li标签一样，当丰富界面时，可以在dt和dd标签中继续添加其他标签

应用场景：

1、做网站尾部的相关信息

2、做图文混排

    
北京
    
中国的首都
    
上海
    
富人聚集地

第三十五课 定义列表练习

和li标签一样，当丰富界面时，可以在dt和dd标签中继续添加其他标签

    

        ![](0.gif)
    
    

        
图片
        
图片很好看
    



    
购物指南
    

        购物指南
        会员介绍
        生活旅行／团购
        常见问题
        大家电
        联系客服
    

内容参考