HTML之五分钟带你实现一个清纯校花排行榜
Posted 萌杰尔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML之五分钟带你实现一个清纯校花排行榜相关的知识，希望对你有一定的参考价值。
html之五分钟带你实现一个清纯校花排行榜
各位小伙伴们大家好，我是萌杰尔，欢迎大家阅读我的网站开发基础系列文章
今天我们讲一讲列表的实现，列表，相信大家已经有个基础的理解了，我们平时碰到的排行榜就是一种列表，那么我们来学习一下吧 (°▽°)八(°▽°)♪
列表又分为有序列表和无序列表
有序列表
有序列表就是带序号的列表
<ol>
<li>丸子</li>
<li>xxx</li>
<li>xxx</li>
</ol>
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>丸子</li>
<li>xxx</li>
<li>xxx</li>
</ol>
</body>
</html>
显示结果如下
- 丸子
- xxx
- xxx
有序列表前面有序号1、2、3、······
我们可以通过给ol标签添加type属性来自定义序号类型
| 值 | 描述 |
|---|---|
| a | 小写英文字母编号 |
| A | 大写英文字母编号 |
| i | 小写罗马数字编号 |
| I | 大写罗马数字编号 |
| 1 | 数字编号（默认） |
通过给ol标签添加reversed属性来规定倒序
| 值 | 描述 |
|---|---|
| reversed | 倒序 |
无序列表
无序列表就是没有序号的列表
<ul>
<li>丸子</li>
<li>xxx</li>
<li>xxx</li>
</ul>
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>丸子</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</body>
</html>
显示结果如下
- 丸子
- xxx
- xxx
ul标签同样拥有type属性，但是目前已经废弃，不建议使用，我在这里就不多废话了
好了，各位小伙伴，今天的大有用处的知识到这里就讲完了，你学废了吗
这是我的微信群，欢迎各位大佬加入
以上是关于HTML之五分钟带你实现一个清纯校花排行榜的主要内容，如果未能解决你的问题，请参考以下文章
轻松入门Python爬虫，三个爬虫版本，带你以各种方式爬取校花网