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

r囧r小猫 2022-09-14 00:16 268阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 列表的概念
 *  2. 无序列表
 *  3. 有序列表
 *  4. 小结

# 1. 列表的概念 #

一个元素其实就是一个，那么多个元素就可以组合为列表。既然叫**列**表，那么列表的元素一般是垂直排列的，所以才叫列表。

# 2. 无序列表 #

无序列表应用于列表的元素没有先后顺序的场景，例如我的爱好有：篮球、足球、乒乓球，这三者没啥先后顺序，则可以使用无序列表表示。

无序列表的标签为`<ul>`，列表中的每个元素标签为`<li>`，所以上面的例子代码为：

<span>我的爱好：</span>
        <ul>
            <li>篮球</li>
            <li>足球</li>
            <li>乒乓球</li>
        </ul>

效果如下：  
![在这里插入图片描述][52a9e8090332421baf9bddd8ba56b488.png_pic_center]

# 3. 有序列表 #

有序列表应用于元素有顺序的场景，例如学生成绩排行列表。

有序列表的标签为`<ol>`，列表中的每个元素标签还是`<li>`，所以上面的例子代码为：

<span>成绩排行：</span>
        <ol>
            <li>张三</li>
            <li>李四</li>
            <li>赵五</li>
        </ol>

效果如下：  
![在这里插入图片描述][a7572070b6a8478490d9098de1b98949.png_pic_center]  
可见有序列表会自动为列表项添加序号。

# 4. 小结 #

看上面的例子中，无序列表和有序列表样式都不算好看，但是务必注意，HTML主要是为了表达内容。

后续在美观部分，我们学习CSS后，可以将列表做的更加好看。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[52a9e8090332421baf9bddd8ba56b488.png_pic_center]: /images/20220828/ffd07d7b14fe4b45ac1f89ccce3f7db1.png
[a7572070b6a8478490d9098de1b98949.png_pic_center]: /images/20220828/b4b801e650a24ebc943b8357096fc2a1.png

发表评论取消回复

表情：

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

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

相关阅读

相关无序列表＜ul＞和有序列表＜ol＞

（1）创建无序列表 `<ul>` 标签定义无序列表。将 `<ul>` 标签与 `<li>` 标签一起使用，创建无序列表。 ![在这里插入图片描述][b758531

今天药忘吃喽~/ 2024年03月29日 15:46/ 0 赞/ 87 阅读

相关如何创建无序列表和有序列表？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 无序列表 ⭐ 无序列表 ⭐ 注意事项 ⭐ 写在最后 --------------------

小灰灰/ 2023年10月14日 14:01/ 0 赞/ 58 阅读

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

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

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

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

列表标签表格是用来显示数据的，列表用来布局列表最大的特点就是整齐、整洁、有序，它作为布局会更加的自由和方便。列表可以分为三大类：无序列表、有序列表和自定义列表。

ゞ浴缸里的玫瑰/ 2022年12月15日 14:14/ 0 赞/ 215 阅读

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

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

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

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

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

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

相关 ionic之无序列表

1、实例背景 ionic无序列表利用的是ul-li实现，无序列表内容用的是AngularJS赋值，样式用class="list"和class="item"

迷南。/ 2022年07月16日 12:39/ 0 赞/ 225 阅读

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

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

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

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

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

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

相关有序列表:ol ，无序列表:ul

qq：581478349 ![20190325172437532.png][] <!DOCTYPE html> <html> <hea

素颜马尾好姑娘i/ 2021年09月18日 14:44/ 0 赞/ 451 阅读