HTML列表

有序列表order list

基本概念

• 夫元素：ol（order list）
• 子元素：li（有且仅有这一个子元素）
  • li元素内容前面自动添加有序的数字或字母

无序列表unorder list

基本概念

• 夫元素：ul（unorder list）
• 子元素：li（有且仅有这一个子元素）
  • li元素内容前面自动添加黑色实心原点

定义列表defined list

基本概念

• 父元素：dl（defined list）
• 子元素：
  • dd：名词解释
  • dt：名词

列表使用场景：

• 1、某一类相关的内容，整合到一起展示。

• 2、导航。例如：

  ​    <nav>

  ​      <ul>

  ​        <li><a href=""></a></li>

  ​        <li><a href=""></a></li>

  ​      </ul>

  ​    </nav>

    </header>

li元素

• display:list-item（默认值）
  • 会生成两个盒子，一个主盒子（ul或ol的content区域），一个次盒子（ul或ol的padding区域）。
  • 主盒子：存放元素内容。
  • 次盒子：有序列表放列表号，无序列表放黑色实心原点。
• 去除列表前面样式（有序列表号，无序黑色实心原点）
  • 书写方法：list-style-type:none;
• 将列表前面样式（有序列表号，无序黑色实心原点）换成图片—设置次盒子内容为图片
  • 书写方式：list-style-image:url(“图片地址”)
• 控制当前列表前面样式的位置
  • 默认值：list-style-position:outside;（在次盒子显示）（ul或ol的padding区域）
  • 在主盒子显示：list-style-position:inside;（ul或ol的content区域）
    • PS：当ul或ol清除padding后依然显示列表样式。
• 改变列表前面样式
  • 无序列表（ul）书写格式（默认值-黑色实心原点）：list-style-type:disc;
    • none：有序、无序列表的样式清空
    • square：实心正方形
    • circle：空心圆
  • 有序列表（ol）书写格式（默认值-阿拉伯数字）：list-style-type:decimal;
    • upper-alpha：大写英文字母
    • lower-alpha：小写英文字母
    • upper-roman：大写罗马数字
    • lower-roman：小写罗马数字
    • decimal-leading-zero：两位阿拉伯数字