列表标签

列表标签
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>

View Code

Insert title here

无序列表

孙悟空
猪八戒
老沙

有序列表

打开箱子
拿出皮球
关上箱子

定义列表

水果: 梨; 橘子; 榴莲
蔬菜: 上海青; 白菜

列表嵌套

水果
1. 苹果
2. 梨
3. 香蕉
蔬菜
生鲜

以下是案例练习：

汽车品牌
- 宝马
- 奔驰
- 路虎
- 奥迪
  - A2
  - A3
  - A4L
  - A6L
飞机品牌
轮船品牌