列表标签——HTML5学习笔记（6）

7.1列表标签的作用与概述

• 布局整齐自由方便。
• 分为无序、有序和自定义列表。

7.2无序列表

• 例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

• 原意：list
• 特点：
  • 没有顺序前后之分
  • <ul>这里只能嵌套<li>列表项3</li>，其他文字和标签不行</ul>
  • <li>这里可以放任意元素，如<p></p>等</li>
  • 样式属性常用CSS来设置

7.3有序列表

• 把无序列表中的<ul></ul>替换成<ol></ol>即可
• 有1234的顺序

7.4自定义列表

• 使用场景：对术语和名词进行解释和描述
• 例：

<dl> //定义列表
  <dt>名词1</dt> //定义项目or名字
  <dd>名词1的解释1</dd> //描述项目or名字
  <dd>名词1的解释2</dd>
</dl>

• 特点
  • 列表项前没有任何符号
  • dl内只能包含dt和dd
  • dt和dd没有个数限制，通常一个dt对应多个dd
  • dt和dd内可以放任何标签