玩转列表——360度全解析

今天认识html世界里的一个新朋友——列表标签，列表标签家族包含三兄弟：有序列表、无序列表和定义列表。本文的章节布局：

• ol、ul和dl的语法及运行效果
• 列表的CSS
• 列表的嵌套

1. ol、ul和dl的语法及运行效果

• 有序列表是使用有序符号（阿拉伯数字、英文及罗马数字）进行标记的一列项目

  语法及运行效果：

• ol的type属性和start属性

ol可以设置type属性，属性值包括a、A、I、i等
start属性规定有序符号的起始值

---

• 无序列表是使用几何符号（disc、circle和square）进行标记的一组项目

语法及运行效果，type属性：

---

• 定义列表定义一组项目及其注释

语法及运行效果：

从语义上来讲，三组标签分别对应不同具有含义的列表：

• 无序列表适合成员之间无级别顺序关系的情形；
• 有序列表适合各项目之间存在顺序关系的情形；
• 定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义，也可以只有术语名称或只有定义。

---

2. 列表的CSS

列表最重要的CSS属性便是list-style属性，它的语法如下：

list-style:list-style-image||list-style-position||list-style-type

• list-style-image可定义列表前所使用图片;
• list-style-position属性取值含outside、inside；
• outside为默认值，列表项目标记此时被放置在文本以外，它将环绕文本在文本之外，inside列表项目旋转在文本以内，环绕文本对齐。

• list-style-type为列表显示类型 ，它共有9种常见属性值：
  • disc:默认值。实心圆
  • circle:空心圆
  • square:实心方块
  • decimal:阿拉伯数字
  • lower-roman:小写罗马数字
  • upper-roman:大写罗马数字
  • lower-alpha:小写英文字母
  • upper-alpha:大写英文字母
  • none:不使用项目符号
    我们可以看到，三种不同列表实际上只是list-style-type默认值不一样而已，通过设置list-style-type即可实现不同显示效果。

---

3.列表的嵌套

• 列表的嵌套比较简单，只是要注意嵌套是不要把标签套乱和良好写码习惯

---

参考资料

• 关于html中的列表
• html之列表