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>
  • 相关阅读:
    一、操作m'y's'ql
    十三、并发
    十二、异步_实践
    一、数据
    【2019-08-13】琐碎事才是突破
    【2019-08-12】迟到好过没到
    【2019-08-11】别人约我宵夜,我却约人早茶
    【2019-08-10】习惯跟时间有关
    【2019-08-09】一日之计在于晨
    【2019-08-08】少即是多,慢即是快
  • 原文地址:https://www.cnblogs.com/xieyi-1994/p/13939361.html
Copyright © 2011-2022 走看看