HTML 列表标签的学习

列表 描述
ul 定义一个无序列表。
ol 定义一个有序列表。
li 定义一个列表项。
dir HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。
dl 定义一个定义一个描述列表。
dt 定义一个列表的条目。
dd 定义定义列表中项目的描述。
menu 定义菜单列表。
command 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。

列表的分类

  • 有序列表
    • ol标签 + li标签
  • 无序列表
    • ul标签 + li标签

li标签：

属性 值 描述
type 1
A
a
I
i
disc
square
circle		 HTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。请使用样式取代它。 规定使用哪种项目符号。
value number 不赞成使用。请使用样式取代它。 规定列表项目的数字。

ol标签：

属性 值 描述
compact compact HTML5中不支持，不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。
reversed reversed 指定列表倒序(9,8,7...)
start number HTML5不支持，不赞成使用。请使用样式取代它。 规定列表中的起始点。
type 1
A
a
I
i		 规定列表的类型。不赞成使用。请使用样式代替。

ul标签：

属性 值 描述
compact compact HTML5 不支持。HTML 4.01 已废弃。 规定列表呈现的效果比正常情况更小巧。
type disc
square
circle		 HTML5 不支持。HTML 4.01 已废弃。 规定列表的项目符号的类型。

无序列表

ul标签：定义一个无序列表

将 <ul> 标签与 <li> 标签一起使用，创建无序列表。

复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
 
    <!--默认type="disc"-->
    <ul>
        <li>Java</li>
        <li>Linux</li>
        <li>Hadoop</li>
        <li>Spark</li>
    </ul>
 
    <!--设置type：实心园点-->
    <ul type="disc">
        <li>Java</li>
        <li>Linux</li>
        <li>Hadoop</li>
        <li>Spark</li>
    </ul>
 
    <!--设置type：实心正方形-->
    <ul type="square">
        <li>Java</li>
        <li>Linux</li>
        <li>Hadoop</li>
        <li>Spark</li>
    </ul>
 
    <!--设置type：空心圆-->
    <ul type="circle">
        <li>Java</li>
        <li>Linux</li>
        <li>Hadoop</li>
        <li>Spark</li>
    </ul>
 
</body>
</html>

Google浏览器打开：

img

有序列表

ol：定义一个有序列表

列表排序以数字来显示。使用 <li> 标签来定义列表选项。

复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
 
    <!--默认type="disc"-->
    <ol>
        <li>Java</li>
        <li>Linux</li>
        <li>Hadoop</li>
        <li>Spark</li>
    </ol>
 
    <!--设置type：阿拉伯数字序列-->
    <ol type="1">
        <li>Java</li>
        <li>Linux</li>
        <li>Hadoop</li>
        <li>Spark</li>
    </ol>
 
    <!--设置type：小写字母序列-->
    <ol type="a">
        <li>Java</li>
        <li>Linux</li>
        <li>Hadoop</li>
        <li>Spark</li>
    </ol>
 
    <!--设置type：i、ii、 ... 序列-->
    <ol type="i">
        <li>Java</li>
        <li>Linux</li>
        <li>Hadoop</li>
        <li>Spark</li>
    </ol>
 
</body>
</html>

Google浏览器打开：

img

posted @   LeeHua  阅读(308)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae

目录导航