HTML5-从0开始学习之有序，无序列表

妖狐艹你老母 2022-05-03 03:30 218阅读 0赞

# 我们在浏览网页中经常会看到各种各样的列表，我们现在来学习如何制作两种列表。 #

## 1.有序列表 ##

<body>
        <ol>
            <li>吃饭</li>
            <li>睡觉</li>
            <li>逛公园</li>
        </ol>
    </body>

### 效果显示如下： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70][]

### 有序列表使用<ol>标签，列表内容使用<li>标签。 ###

## 2.无序列表 ##

<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>逛公园</li>
    </ul>
    </body>

### 显示效果如下： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 1][]

### 无序列表使用<ul>标签，内容同样写在<li>标签中。 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70]: /images/20220503/e264694fbe024874b3900bc7d26c3edf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0OTg3MTM3_size_27_color_FFFFFF_t_70 1]: /images/20220503/d289b6af2b3c4389837a4e16502236b3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 html之无序列表和有序列表

无序列表 html代码： <ul type=""> <li>苹果</li> <li>梨</li> <li>香

以你之姓@/ 2022年12月19日 13:13/ 0 赞/ 158 阅读

相关 HTML：有序列表、无序列表、自定义列表的区别&写法

目录一、三种列表的简介 1、有序列表——ol 2、无序列表——ul 3、自定义列表——dl 二、三种列表的写法 1、有序列表：是ol标签里面包着li标签 2、

╰+哭是因爲堅強的太久メ/ 2022年11月17日 05:30/ 0 赞/ 301 阅读

相关 JavaWeb学习之路(19)–HTML之无序列表、有序列表

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 列表的概念 2. 无序列表 3. 有序列表 4. 小结 1. 列

r囧r小猫/ 2022年09月14日 00:16/ 0 赞/ 236 阅读

相关 HTML5-从0开始学习之音频标签介绍

<audio src="1.mp4" controls></audio> 效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

心已赠人/ 2022年05月14日 17:20/ 0 赞/ 196 阅读

相关 HTML5-从0开始学习之视频标签介绍

<video src="1.mp4" controls></video> 具体效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_

亦凉/ 2022年05月14日 17:17/ 0 赞/ 170 阅读

相关 HTML5-从0开始学习之HTML文档结构

首先我使用的代码编译器是VS code，一键生成HTML文档格式后如图 <!DOCTYPE html> <html lang="en"> <head>

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 10:50/ 0 赞/ 183 阅读

相关 HTML5-从0开始学习之有序，无序列表

我们在浏览网页中经常会看到各种各样的列表，我们现在来学习如何制作两种列表。 1.有序列表 <body> <ol> <

妖狐艹你老母/ 2022年05月03日 03:30/ 0 赞/ 219 阅读

相关 HTML5-从0开始学习之img图片属性

我们平常在页面中不只是能看到文字说明，也能看到很多图片出现在页面中，图片的出现大大增加了用户的观赏性，使页面内容不在枯燥无味，下面我们来学习如何在页面中插入图片。

﹏ヽ暗。殇╰゛Y/ 2022年05月03日 03:28/ 0 赞/ 311 阅读

相关 HTML5-从0开始学习之table表格

这次我们来学习制作网页中的表格，表格标签用<table>标签使用。接下来我们用一个例子来展示表格的效果。 <body> <table border

谁借莪１个温暖的怀抱￠/ 2022年05月03日 03:28/ 0 赞/ 195 阅读

相关 HTML的无序列表、有序列表、自定义列表

HTML的无序列表： 1.无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul 标签。每个列表项始于 <li。 > 2.无

落日映苍穹つ/ 2022年02月15日 18:25/ 0 赞/ 753 阅读