前端编程之路一一HTML常用列表标签

HTML 常用列表标签

关注我，不迷路~

常用列表标签

在书写HTML文档时，遇到相同类型的内容，需要考虑用列表来实现（导航、排名、相关文章等），

通常情况下使用的列表有三种，有序列表、无序列表和自定义列表。

一、有序列表ol

有序列表：有一定时间、先后、高低等顺序，如排名、热度，

ol，order list
只有一个类型的子元素
li，list item

搜索热点
    
    

        
HTC区块链手机
        
军运会奖牌榜第一
        
切尔西1-0纽卡
        
微信钱包银行储蓄
        
小学生偷开奥迪
    
    
    

        
HTC区块链手机
        
军运会奖牌榜第一
        
切尔西1-0纽卡
        
微信钱包银行储蓄
        
小学生偷开奥迪
    
    
    

        
HTC区块链手机
        
军运会奖牌榜第一
        
切尔西1-0纽卡
        
微信钱包银行储蓄
        
小学生偷开奥迪
    
    
    

        
HTC区块链手机
        
军运会奖牌榜第一
        
切尔西1-0纽卡
        
微信钱包银行储蓄
        
小学生偷开奥迪
    
    
    

        
HTC区块链手机
        
军运会奖牌榜第一
        
切尔西1-0纽卡
        
微信钱包银行储蓄
        
小学生偷开奥迪
    

image

二、无序列表ul

无序列表：类别相同，但没有具体的顺序，一般用于导航栏、相关资，

ul，unorder list
只有一个类型的子元素
li，list item

相关资讯
    
    
    

        
Temporibus asperiores incidunt laborum.
        
Odit repellat placeat blanditiis!
        
Sit ipsam error consequatur.
        
Deserunt beatae molestiae assumenda.
        
Reiciendis aut deserunt soluta?
    
    
    

        
Lorem ipsum dolor sit.
        
Illo aliquid consequatur unde?
        
Est sequi quia nulla.
        
Voluptate enim officiis quas.
        
Iusto, et. Eos, nam.
    

    

        
Maxime incidunt temporibus mollitia?
        
Reprehenderit optio quibusdam ad.
        
Natus labore impedit placeat?
        
Tenetur rerum illum repellat!
        
Ipsum officia laudantium distinctio!
    
    
    

        
Veritatis id voluptatem vitae.
        
Accusamus corrupti voluptate officiis?
        
Exercitationem voluptatibus alias quod.
        
Aut cumque ipsa dignissimos.
        
Distinctio commodi eaque soluta?
    

image

三、自定义列表dl

自定义列表：一般用于名词解释，用的蛮少的，

dl，defined list
dt，表示关键字（词）
dd，表示对dt的描述内容

 名词解释
    

        
计算机
            
Lorem, ipsum dolor.
        
        
CPU
            
Quasi, aut beatae.
        
        
主板
            
Quam, assumenda fugit.
        
    

        
计算机
        
Lorem, ipsum dolor.

        
CPU 
        
Quasi, aut beatae.

        
主板 
        
Quam, assumenda fugit.
    

两种一样的哟，都认识

四、列表嵌套

不管是有序无序还是自定义列表，列表项内部都可以使用段落、换行符、图片、链接以及其他列表等等。

使用其他列表，就是列表嵌套

到底有序套无序还是无序套有序，甚至相互套来套去...就看你喜欢和需求了。

列表嵌套
    

        
咖啡
        

            
红茶
            
绿茶
        
        
茶
            

                
红茶
                
绿茶
            
        
        
牛奶
            

                
酸奶
                
纯牛奶
            
        
    

image

五、总结

基本上常用就这三个常用的列表，还有目录列表之类，功能重复，渐渐就不用了。列表前面符号也可以换成图标小图片，不过要依赖CSS帮助了。

上面说过ol或者ul只有一个子元素li，但是最后嵌套的时候，我用了一个ol和li并列作为列表的子元素，结果浏览器识别出了我“”想要的“”结果，这是不可取的。

其实你写一些其他标签，它也能显示出来，虽然浏览器能识别，但是最好别这么写。这是风格，规范问题。

就好像人与人相处，都讲究礼貌待人，但是总有那么些人不是那么好相处，可以吗？好像也没什么不可以。但是礼貌总是好的。

所以最好按照一般规范、规则书写，代码写多了，风格和规范是很重要的，很重要的，很重要的。