No.8 HTML5--列表标签（有序和无序）

一、列表标签——有序列表（ol+li）

所谓有序列表，是指按照数字或字母顺序排列列表项目。
有序列表始于<ol>标签,
每个列表项始于<li>标签.

1.1 代码示例

<body>
    <h1 align="center">我的第一个网页</h1>
    <h2>照片</h2>
    <p>衡阳旅游</p>
    <img src="D:\web\RAWCode\hu.jpg" alt="湖面" width="200px" height="160px" title="这是一张南岳景区湖面的图片">
    <h2>博客</h2>
    <a href="https://home.cnblogs.com/u/bltstop">个人博客园</a>
    <ol>
        <li>arcgis学习</li>
        <li>GEE学习</li>
        <li>R语言学习</li>
    </ol>
    <ol>
        <li><a href="https://www.cnblogs.com/bltstop/category/2383282.html">arcgis学习</a></li>
        <li><a href="https://www.cnblogs.com/bltstop/category/2336204.html">GEE学习</a></li>
        <li><a href="https://www.cnblogs.com/bltstop/category/2428675.html">R语言学习</a></li>
    </ol>
</body>

当然，我们也可以给他加上超链接：

    <ol>
        <li><a href="https://www.cnblogs.com/bltstop/category/2383282.html">arcgis学习</a></li>
        <li><a href="https://www.cnblogs.com/bltstop/category/2336204.html">GEE学习</a></li>
        <li><a href="https://www.cnblogs.com/bltstop/category/2428675.html">R语言学习</a></li>
    </ol>

1.2 属性type

<ol>的属性type拥有的选项：

    <ol type="a">
        <li>arcgis学习</li>
        <li>GEE学习</li>
        <li>R语言学习</li>
    </ol>

1.3 有序列表嵌套

    <ol type="A">
        <li>水果</li>
            <ol type="a">
                <li>apple</li>
                <li>banana</li>
                <li>orange</li>
            </ol>
        <li>蔬菜</li>
        <li>肉类</li>
    </ol>

二、无序列表（ul+li）

所谓无序列表，是指以全●、○、▽、▲等开头的，没有顺序的列表项目。
无序列表主要使用<ul>、<li>、<dir>、<dt> 、<menu>几个标签和type属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
    <font size="+1" color="green">编程字典的模式分类</font>
    <br>
    <ul>
        <li>入门模式</li>
        <li>初级模式</li>
        <li>中级模式</li>
        <li>高级模式</li>
    </ul>
</body>
</html>

2.1 属性type

type属性则决定了列表项开始的符号。它可以设置的值有三个。其中，disc是默认的类型值。

<body>
    <font size="+1" color="green">编程字典的模式分类</font>
    <br>
    <ul type="square">
        <li>入门模式</li>
        <li>初级模式</li>
        <li>中级模式</li>
        <li>高级模式</li>
    </ul>
</body>

无序列表的类型定义也可以直接在<li>标签中，其语法是<li type=“项目符号”>，用于对单个项目进行定义

<body>
    <font size="+1" color="green">编程字典的模式分类</font>
    <br>
    <ul>
        <li type="disc">入门模式</li>
        <li type="square">初级模式</li>
        <li type="circle">中级模式</li>
        <li type="none">高级模式</li>
    </ul>
</body>

posted @ 2025-02-25 16:07 百里屠苏top 阅读(62) 评论(0) 收藏举报

刷新页面返回顶部