列表标签
1. 无序列表 ul:type li
2. 有序列表 ol:type start reversed li
3. 定义列表 dl定义列表 dt定义标题 dd定义描述
4. 列表嵌套:有序和无序可以任意无限嵌套
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>无序列表</h3> <ul type="circle"><!-- unordered list 无序列表 --> <li>孙悟空</li><!--list item列表项 --> <li>猪八戒</li> <li>老沙</li> </ul> <h3>有序列表</h3> <ol type="1" start="5" reversed="reversed"><!-- ordered list有序列表 --> <li>打开箱子</li> <li>拿出皮球</li> <li>关上箱子</li> </ol> <h3>定义列表</h3> <dl><!-- definition list 定义列表 --> <dt>水果</dt><!-- definition term定义标题 --> <dd>梨</dd><!-- definition description定义描述 --> <dd>橘子</dd> <dd>榴莲</dd> <dt>蔬菜</dt> <dd>上海青</dd> <dd>白菜</dd> </dl> <h3>列表嵌套</h3> <!-- 有序列表和无序列表可以任意无限嵌套 --> <ul> <li>水果 <ol> <li>苹果</li> <li>梨</li> <li>香蕉</li> </ol> </li> <li>蔬菜</li> <li>生鲜</li> </ul> <h3>以下是案例练习:</h3> <ol> <li>汽车品牌 <ul> <li>宝马</li> <li>奔驰</li> <li>路虎</li> <li>奥迪 <ul> <li>A2</li> <li>A3</li> <li>A4L</li> <li>A6L</li> </ul> </li> </ul> </li> <li>飞机品牌</li> <li>轮船品牌</li> </ol> </body> </html>
Insert title here
无序列表
- 孙悟空
- 猪八戒
- 老沙
有序列表
- 打开箱子
- 拿出皮球
- 关上箱子
定义列表
- 水果
- 梨
- 橘子
- 榴莲
- 蔬菜
- 上海青
- 白菜
列表嵌套
- 水果
- 苹果
- 梨
- 香蕉
- 蔬菜
- 生鲜
以下是案例练习:
- 汽车品牌
- 宝马
- 奔驰
- 路虎
- 奥迪
- A2
- A3
- A4L
- A6L
- 飞机品牌
- 轮船品牌