宗策

导航

列表标签

列表标签
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. 关上箱子

定义列表

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

列表嵌套

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

以下是案例练习：

  1. 汽车品牌
    • 宝马
    • 奔驰
    • 路虎
    • 奥迪
      • A2
      • A3
      • A4L
      • A6L
  2. 飞机品牌
  3. 轮船品牌

posted on 2020-04-14 14:39  宗策  阅读(124)  评论(0)  编辑  收藏  举报