HTML(五)列表详解

在HTML中,列表可以分为两种,一种为有序列表。另一种为无序列表

今天就来详细讲解一下这两种列表如何实现,效果如何

1.有序列表

有序列表的标准格式如下:

html 复制代码
   <ol>
        <li>列表项一</li>
        <li>列表项二</li>
   </ol>

这里的列表项可以随意更改内容,使用示例如下:

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
 
    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
    </ol>
    
</body>
</html>

效果图如下:

2.有序列表更改前导符

什么是前导符?

前导符就是我们在使用列表打出文字前的小标题,如上图中的 1. 2. 这些都是前导符


前导符的标准语言使用如下:

html 复制代码
 <ol type="前导符">
        <li>列表项一</li>
        <li>列表项二</li>
 </ol>

这里的前导符有五种,如下图:

接下来是实际代码演示+效果

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
 
    <ol type="a">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="A">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="1">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="i">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="I">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>
</body>
</html>

3.无序列表

在HTML中另外一种列表被称作无序列表,无序列表与有序列表极其相似,只有微小的差距

无序列表标准格式如下:

html 复制代码
    <ul>
        <li>列表项一</li>
        <li>列表项儿</li>
    </ul>

无序列表使用及效果如下:

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
 
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
    </ul>

</body>
</html>

4.无序列表更改前导符

这里不做演示了,与有序列表使用方法相同

相关推荐
IT_陈寒几秒前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只17 分钟前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience22 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹23 分钟前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo24 分钟前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse25 分钟前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye30 分钟前
前端架构师,是架构什么
前端·架构
全马必破三32 分钟前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库37 分钟前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库
一枚前端小能手41 分钟前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript