HTML 列表

列表描述

有一个黑色的容器，容器当中有一项一项小表在展示网页内容。

列表会将网页中结构相同，内容相关，样式（外观外貌）类似的结构，可以利用列表进行搭建；

web领域中有3种列表，分别是无序列表、有序列表和定义列表。

无序列表

• 主要作用：可以在网页中搭建一个没有顺序的列表

• 在使用无序列表时需要搭配两种标签一起使用，分别是 <ul> 和<li>

  ul 标签：unorder list 表示的是一个列表容器，大结构

  li 标签： list item 表示的是容器当中的每一项

• 语法的注意事项

  1、ul 标签的内部只能嵌套 li 标签

  2、li 标签不能脱离 ul 标签单独使用

  3、li 标签需要嵌套在 ul 标签里面

  4、ul 标签里可以有多个 li 标签

• ul 和 li 都是容器级别标签，ul 里只能嵌套 li 标签，li 标签里可以放置任意内容，甚至可以再放 <ul><li>标签

　　无序列表演示如下：

　　

 

　　无序列表效果如下：

　　

有序列表

• 主要作用：搭建一个有顺序的列表结构

• 在使用有序列表时需要搭配两种标签一起使用，分别是 <ol> 和<li>

  ol 标签：order list 表示的是一个列表容器，大结构

  li 标签： list item 表示的是容器当中的每一项

• 语法的注意事项

  1、ol 标签的内部只能嵌套 li 标签

  2、li 标签不能脱离 ol 标签单独使用

  3、li 标签需要嵌套在 ol 标签里面

  4、ol 标签里可以有多个 li 标签

• ol 和 li 都是容器级别标签，ol 里只能嵌套 li 标签，li 标签里可以放置任意内容，甚至可以再放 <ol><li>标签

  有序列表演示如下：

　　

 

　　效果如下：

　　

定义列表

• 定义：用来定义一个自定义标题和内容列表

• 在使用定义列表时需要结合3个标签一起使用，分别是：<dl> <dt> <dd>

  dl 标签： definition list 相当于列表最外层容器，大结构

  dt 标签：definition term 表示列表主题或术语

  dd 标签：definition description 表示对于主题或术语的一个解释

• 语法的注意事项

  1、在使用定义列表时，dl 标签需要嵌套 dt dd 标签一起使用， dt dd 标签属于兄弟级别的关系

  2、一个 dl 标签内部可以有多组 dt dd，每个 dt 后面可以有多个 dd

  3、dt 和 dd 都属于容器级别标签，内部可以放任意内容

• 定义列表演示如下：

　　

• 效果如下：