zoukankan      html  css  js  c++  java
  • 列表标签

    列表标签
    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. 轮船品牌
  • 相关阅读:
    Go学习笔记(四)Go自动化测试框架
    VSCode快捷键
    Go学习笔记(三)Go语言学习
    Go学习笔记(二)搭建Visual Studio Code调试环境
    Go学习笔记(一)安装Go语言环境
    C# HTTPServer和OrleansClient结合
    C# Post HTTP Request
    Unity3D UGUI Shader画一个圆环
    Orleans学习总结(六)--应用篇
    Orleans学习总结(四)--集群配置篇
  • 原文地址:https://www.cnblogs.com/xingsir/p/12697915.html
Copyright © 2011-2022 走看看