HTML笔记 6.list 列表

HTML 列表

列表元素 含义
ol order list,有序列表
ul unorder list,无序列表
li list item,列表项目
dl definition list,自定义说明列表
dt 说明列表中的术语
dd 说明列表中的定义

示例:

无序列表

  • Coffee
  • Milk
  • bread

有序列表

  1. Coffee
  2. Milk
  3. break

自定义列表

Coffee
- black hot drink
Milk
- white cold drink
break
wtf?
HTML笔记 6.list 列表_第1张图片

  • 元素
  • li 的value属性可以用来生成不连续的有序列表。

    
    
    
    
        
        Example
    
    
    
        
    1. bananas
    2. mangoes
    3. cherries
    4. plums
    5. grapes
    6. grapes

    Emmet 插件快速生成有序列表代码:ol>li*6 再按 Tab 键。

    HTML笔记 6.list 列表_第2张图片
    li 的value 属性

    不同类型的有序列表

    • start属性:列表首项的编号值。
    • type属性:显示在各个列表项旁边的编号类型。(1、a、A、i、I)

    编号列表

    1. Apple
    2. Bananas
    3. Lemons
    4. Oranges

    大写字母列表

    1. Apple
    2. Bananas
    3. Lemons
    4. Oranges

    小写字母列表

    1. Apple
    2. Bananas
    3. Lemons
    4. Oranges

    小写罗马数字列表

    1. Apple
    2. Bananas
    3. Lemons
    4. Oranges
    HTML笔记 6.list 列表_第3张图片

    不同类型的无序列表

    ⚠️注意: 在 HTML 4 中, ul 属性已废弃, HTML 5 已不支持该属性,因此我们使用 CSS 代替来定义不同类型的无序列表
    
    

    圆点列表

    • Apple
    • Bananas
    • Lemons
    • Oranges

    圆圈列表

    • Apple
    • Bananas
    • Lemons
    • Oranges

    正方形列表

    • Apple
    • Bananas
    • Lemons
    • Oranges
    HTML笔记 6.list 列表_第4张图片

    嵌套列表,示例一:

    嵌套列表:

    • Coffee
    • Tea
      • Black tea
      • Green tea
    • Milk
    HTML笔记 6.list 列表_第5张图片

    嵌套列表,示例二:

    嵌套列表:

    • Coffee
    • Tea
      • Black tea
      • Green tea
        • China
        • Afrcia
    • Milk
    HTML笔记 6.list 列表_第6张图片

    你可能感兴趣的:(HTML笔记 6.list 列表)