三大列表——无序列表、有序列表、自定义列表

一、无序列表:

1.标签:

所有内容写在li里面

  • 内容1
  • 内容2
  • 内容3
  • 内容4

2.结果:

三大列表——无序列表、有序列表、自定义列表_第1张图片

3.常用结构:

li里面包含a标签:


三大列表——无序列表、有序列表、自定义列表_第2张图片

4.嵌套结构:

  • 中国
    • 北京
      • 大兴区
      • 通州区
      • 海淀区
        • 中关村
        • 颐和园
    • 上海
    • 深圳

三大列表——无序列表、有序列表、自定义列表_第3张图片

5.ul和li的属性:

type:设置项目符合的类型
*取值:disc——黑色实心圆
circle——空心圆
square——实心矩形
none——不显示

二、有序列表:

1.标签:

  1. 内容1
  2. 内容2
  3. 内容3

2.结果:

三大列表——无序列表、有序列表、自定义列表_第4张图片

3.常用结构:

  1. 内容1
  2. 内容2
  3. 内容3

三大列表——无序列表、有序列表、自定义列表_第5张图片

4.嵌套结构:

  1. 中国
    1. 北京
      1. 大兴区
      2. 通州区
      3. 海淀区
        1. 中关村
        2. 颐和园
    2. 上海
    3. 深圳

三大列表——无序列表、有序列表、自定义列表_第6张图片

5.ol和li的属性:

type:设置项目符号 取值1(默认)a A i I;
start: 从第几个开始 取值number(数字);
reversed=“reversed” 当属性和属性值相同,可以简写为属性 ,倒序;

三、自定义列表:

1.标签:


主题1
描述1
描述2
描述3
描述4
描述5
主题2
描述1
描述2
描述3

2.结果:

三大列表——无序列表、有序列表、自定义列表_第7张图片

3.常用结构:

这是一个可爱的哆啦A梦

三大列表——无序列表、有序列表、自定义列表_第8张图片

你可能感兴趣的:(第一部分,HTML+CSS,html)