HTML列表标签

HTML列表简介

在许多网页中都有列表的影子，比如洛谷的题目列表，

学习通的课程列表

在html中有三种列表：有序列表、无序列表和定义列表。

HTML有序列表ol

有序列表就是前面有按照某个顺序标明的数字，字母或者阿拉伯数字等的一列数据。
语法：

  
C++
  
JAVA
  
JavaScript
  
jQuery
  
Vue.js

理解：ol，ordered list（有序列表），li，list（列表项）。

示例

 


    
    


    

        
C++
        
JAVA
        
HTML
        
Python
        
JavaScript
        
jQuery
        
Vue.js
    

实现的效果：

高级语法：利用type属性

 


    
    


    

        
C++
        
JAVA
        
HTML
        
Python
        
JavaScript
        
jQuery
        
Vue.js
    

实现效果：

type属性有好几种：

属性值	含义
a	表示小写字母
A	表示大写字母
i	表示小写罗马数字
I	表示大写罗马数字
1	表示数字（默认）

是不是感觉很简单，虽然是第一次学，但是很容易就上手，我了解到，等后面学到CSS，会有一种更好的方式来实现列表list。

HTML无序列表ul

这是最常用的一种列表形式，
语法：

  
C++
  
JAVA
  
JavaScript
  
jQuery
  
Vue.js

理解：ol，unordered list（有序列表），li，list（列表项）。

示例

 


    
    


    

        
C++
        
JAVA
        
HTML
        
Python
        
JavaScript
        
jQuery
        
Vue.js
    

实现的效果：

高级语法：利用type属性

这里和有序列表一样，都有type属性。

 


    
    


    

        
C++
        
JAVA
        
HTML
        
Python
        
JavaScript
        
jQuery
        
Vue.js
    

实现效果：

square代表方框。

属性值	含义
circle	空心圆○
disc	实心圆●（默认值）
square	正方形■

注意点

在

这一对标签里面，有两点要注意：
1、该标签子元素只能是li，不能加上其他标签。
错误示例：

 


    
    


    

        
所有学习到的技术
        
C++
        
JAVA
        
HTML
        
Python
        
JavaScript
        
jQuery
        
Vue.js
    

实现的效果：

这个是错误的，要把

放在ul外面才是正确的。
2、该标签子元素只能是li，也不能直接写上其他的文字或字母。
错误示例：

 


    
    


    

        所有学习到的技术
        
C++
        
JAVA
        
HTML
        
Python
        
JavaScript
        
jQuery
        
Vue.js
    

实现的效果：

也是错误的。

HTML定义列表dl

 


    >
    


    

        
C++
        
C plus plus
    

实现效果：

只需要了解就可以了。