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>

 

posted @ 2020-11-07 21:48  谢义xieyi521149  阅读(55)  评论(0)  编辑  收藏  举报