html列表

无序列表

没有序列的一组内容。

(1)语法

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    ...
</ul>

(2)语义

无序列表，用于将没有数字顺序的一组数据或内容进行分组。

(3)默认样式（演示）

• 默认间距(外边距、内边距)

• 列表样式：实心圆

(4)典型应用

• 新闻列表

• 产品列表

• 导航、分页、选项止

(5)type属性

• disc列表样式实心圆

• circle 列表样式空心圆

• square列表样式为小方块

  <ul type="square">
      <li>苹果</li>
      <li>香蕉</li>
  </ul>

  注意:type属性不常用，通常使用css属性替代。

 有序列表

(1)语法

<ol>
<li>出门</li>
<li>右转</li>
...
</ul>

(2)语义

无序列表,用于将顺序是有意义的一组数据或内容进行分组

(3)默认样式（演示）

• 默认间距

• 列表样式：数字编号

(4)典型应用 （图示）

• 烹饪食谱中的各个步骤

• 指路时的各处转弯方向

• 营养信息标签上 按含量排序的成分列表

• 面包屑导航

(5)type属性（了解）

• a: 小写字母

• A: 大写字母

• i: 小写罗马数字

• I: 大写罗马数字

• 1: 数字

  <ol type="I">
          <li>步骤一</li>
          <li>步骤二</li>
   </ol>

  注意:type属性不常用，通常使用css属性替代。

定义列表

(1)语法

<dl>
<dt>定义</dt>
<dd>描述 </dd>
...
</dl>

(2)语义

• 包含术语定义以及描述的列表

• dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述）

• 用于将一组项目及其相关的描述进行分组

(3)默认样式

• 默认dl，dd带有间距

(4)典型应用

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

• 键-值对列表 （内存：100M）

注意:

允许使用多条项目定义与描述。

<dl>
    <dt>姓名</dt>
    <dd>李美丽</dd>
    <dt>生日</dt>
    <dd>1990</dd>
</dl>

允许使用带有多个描述的单个项目定义。

<dl>
  <dt>加入我们</dt>
  <dd>社会招聘</dd>
  <dd>校园招聘</dd>
  <dd>国际招聘</dd>
</dl>