• 列表标签


    列表标签
    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. 香蕉
    • 蔬菜
    • 生鲜

    以下是案例练习:

    1. 汽车品牌
      • 宝马
      • 奔驰
      • 路虎
      • 奥迪
        • A2
        • A3
        • A4L
        • A6L
    2. 飞机品牌
    3. 轮船品牌
  • 相关阅读:
    阿里Java开发规约【摘录】
    JavaWeb【八、JSP指令与动作元素】
    JavaWeb【七、JSP状态管理】
    JavaWeb【六、JavaBean】
    JavaWeb【五、内置对象】
    JavaWeb【四、JSP基础语法】
    JavaWeb【三、Web程序编写】
    JavaWeb【二、Tomcat安装】
    Django 模板层
    Django auth模块
  • 原文地址:https://www.cnblogs.com/xingsir/p/12697915.html
Copyright © 2020-2023  润新知