HTML列表标签

HTML列表简介 在许多网页中都有列表的影子,比如洛谷的题目列表,
HTML列表标签
文章图片

学习通的课程列表
HTML列表标签
文章图片

在html中有三种列表:有序列表、无序列表和定义列表。
HTML有序列表ol 有序列表就是前面有按照某个顺序标明的数字,字母或者阿拉伯数字等的一列数据。
语法:

  1. C++
  2. JAVA
  3. JavaScript
  4. jQuery
  5. Vue.js

理解:ol,ordered list(有序列表),li,list(列表项)。
示例
HTML有序列表
  1. C++
  2. JAVA
  3. HTML
  4. Python
  5. JavaScript
  6. jQuery
  7. Vue.js

实现的效果:
HTML列表标签
文章图片

高级语法:利用type属性
HTML有序列表
  1. C++
  2. JAVA
  3. HTML
  4. Python
  5. JavaScript
  6. jQuery
  7. Vue.js

实现效果:
HTML列表标签
文章图片

type属性有好几种:
属性值 含义
a 表示小写字母
A 表示大写字母
i 表示小写罗马数字
I 表示大写罗马数字
1 表示数字(默认)
【HTML列表标签】是不是感觉很简单,虽然是第一次学,但是很容易就上手,我了解到,等后面学到CSS,会有一种更好的方式来实现列表list。
HTML无序列表ul 这是最常用的一种列表形式,
语法:
  1. C++
  2. JAVA
  3. JavaScript
  4. jQuery
  5. Vue.js

理解:ol,unordered list(有序列表),li,list(列表项)。
示例
HTML无序列表
  • C++
  • JAVA
  • HTML
  • Python
  • JavaScript
  • jQuery
  • Vue.js

实现的效果:
HTML列表标签
文章图片

高级语法:利用type属性 这里和有序列表一样,都有type属性。
HTML无序列表
  • C++
  • JAVA
  • HTML
  • Python
  • JavaScript
  • jQuery
  • Vue.js

实现效果:
HTML列表标签
文章图片

square代表方框。
属性值 含义
circle 空心圆○
disc 实心圆●(默认值)
square 正方形■
注意点 在
    这一对标签里面,有两点要注意:
    1、该标签子元素只能是li,不能加上其他标签。
    错误示例:
    HTML无序列表
      所有学习到的技术
    • C++
    • JAVA
    • HTML
    • Python
    • JavaScript
    • jQuery
    • Vue.js

    实现的效果:
    HTML列表标签
    文章图片

    这个是错误的,要把
    放在ul外面才是正确的。
    2、该标签子元素只能是li,也不能直接写上其他的文字或字母。
    错误示例:
    HTML无序列表
      所有学习到的技术
    • C++
    • JAVA
    • HTML
    • Python
    • JavaScript
    • jQuery
    • Vue.js

    实现的效果:
    HTML列表标签
    文章图片

    也是错误的。
    HTML定义列表dl
    > HTML定义列表
    C++
    C plus plus

    实现效果:
    HTML列表标签
    文章图片

    只需要了解就可以了。

      推荐阅读