zoukankan      html  css  js  c++  java
  • HTML_day02_列表

    HTML

    5 列表标记

    有序表 Ordered List

    <!-- 有序表 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>有序表</title>
    </head>
    <body>
        <h3 align="center">软件设计</h3>
    
        <!-- 有序表
            type 表示先导符号
        -->
        <ol type="1">
            <li>photoshop</li>
            <li>illustrateort</li>
            <li>coredraw</li>
        </ol>
    
        <ol type="a">
            <li>photoshop</li>
            <li>illustrateort</li>
            <li>coredraw</li>
        </ol>
    
        <ol type="A">
            <li>photoshop</li>
            <li>illustrateort</li>
            <li>coredraw</li>
        </ol>
    
        <ol type="i">
            <li>photoshop</li>
            <li>illustrateort</li>
            <li>coredraw</li>
        </ol>
    
        <ol type="I">
            <li>photoshop</li>
            <li>illustrateort</li>
            <li>coredraw</li>
        </ol>
    
        <ol type="A" start="3"> <!-- start 表示从第几个序号起头-->
            <li>xieyi</li>
            <li>wang</li>
            <li>zhang</li>
        </ol>
    </body>
    </html>

    无序表 Unordered List 

    <!-- Unordered List -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无序表 Unordered List</title>
    </head>
    <body>
        <h3 size="7" align="center">图像设计软件</h3>
        <ul> <!-- 默认先导符号为 黑实心圆点 -->
            <li>PhotoShop</li>
            <li>Illustrator</li>
            <li>CorelDraw</li>
        </ul>
        <hr size="5" color="red">
        <ul type="circle"> <!-- 空心圆点 -->
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
        <hr size="4" color="bulle">
        <ul type="square"> <!-- 实心正方形 -->
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </body>
    </html>

    定义列表

    <!-- 定义列表 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定义列表</title>
    </head>
    <body>
        <dl>
            <dt>PhotoShop</dt>
                <dd>Adobe公司的产品</dd>
                <dd>图像处理软件</dd>
            <dt>Freehand</dt>
                <dd>Mecromendia公司的产品</dd>
                <dd>图像处理软件</dd>
        </dl>
    </body>
    </html>

    嵌套列表

    <!--嵌套列表-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>嵌套列表</title>
    </head>
    <body>
        <ul>
            <li>
                <u>图像设计软件</u>
                <ol>
                    <li>Photoshop</li>
                    <li>CoreDraw</li>
                </ol>
            </li>
            <li>
                <u>图像设计软件</u>
                <ol>
                    <li>Photoshop</li>
                    <li>CoreDraw</li>
                </ol>
            </li>
        </ul>
    
    </body>
    </html>
  • 相关阅读:
    通过AOP引入Log4j
    Spring和Spring MVC框架进行单元测试
    JAVA异常基本知识及异常在Spring框架中的整体解决方案
    JAVA基础之重载,覆盖/重写,多态
    JAVA基础之内存
    JAVA基础之数组
    软件设计模式的原则
    ecstore 新增模块(页面)
    gitstack 密码重置
    thinkphp3.2整合workerman 多入口模式(windows)
  • 原文地址:https://www.cnblogs.com/xieyi-1994/p/13939361.html
Copyright © 2011-2022 走看看