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.无序列表更改前导符

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

相关推荐
lkx097883 分钟前
笔记C++语言,太焦虑了
前端·c++·笔记
勇敢di牛牛5 分钟前
【css】快速上手Flexbox布局(理论讲解+实战)
前端·css3
2501_938780287 分钟前
服务器 Web 安全:Nginx 配置 X-Frame-Options 与 CSP 头,防御 XSS 与点击劫持
服务器·前端·安全
IT_陈寒43 分钟前
Java 17 新特性实战:这5个隐藏功能让你的代码效率提升50%
前端·人工智能·后端
艾小码1 小时前
2025年组件化开发这样做,效率提升300%
前端·javascript
驭风少年君7 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说8 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友8 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行9 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安9 小时前
跟着 AI 学(二)- Quill 接入速通
前端