无序列表、有序列表、自定义列表

1、无序列表

各列表项之间没有次序，各项之间为并列关系

• 语法

    <ul><!-- 列表容器 -->
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

• 特性
  • 宽度默认撑满整个父元素
  • 高度默认由内容撑开
  • 独立成行
  • 自带外间距
  • 自带内填充(内间距)
  • 自带列表符，去掉自带列表符 li{ list-style: none; }
• css属性
  • list-style-type属性：列表符类型
    • circle空心圆|disc实心圆，默认值|square实心正方形|none去掉列表符

2、自定义列表

自定义列表

        语法：
     <dl>
         列表容器
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
    </dl>
    在浏览器中，dd标签的内容会缩进显示

<dl>
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
        <dt>web大前端</dt>
        <dd>HTML、CSS、JAVASCRIPT</dd>
    </dl>

> 浏览器显示，dd标签的内容会缩进显示

- 特性
  - 宽度默认撑满整个父元素
  - 高度默认由内容撑开
  - 独立成行 
  -dl dt dd都是块级标签
    dl标签自带外间距
    dd标签自带外间距
    浏览器显示，dd标签的内容会缩进显示


典型应用

- 名词解释、分类（大分类-细节的类别）

• 应用场景 : 新闻列表 、导航 、商品列表

• 注意：ul的直接子元素只能是li

• 3、有序列表

  有排列次序

• 语法

•     <ol><!-- 列表容器 -->
          <li>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
      </ol>
      <ol start="6" reversed type="I">
          <li>列表项</li>
          <li>列表项</li>
          <li>列表项</li>
      </ol>
       strat属性:开始值 写在 <ol start="6"></ol>开始标签中
       reversed属性：倒叙 写在 <ol start="6" reversed></ol>开始标签中
  
  type属性（了解）
  
  - `a`: 小写字母
  
  - `A`: 大写字母
  
  - `i`: 小写罗马数字
  
  - `I`: 大写罗马数字
  
  - `1`: 数字 默认值
  

• 特性：
  与无序列表基本一致
• 应用场景: 有序的列表