HTML列表

HTML列表标记主要有三种:有序列表、无序列表和定义列表。下面我们来一一的学习

(1).有序列表

有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ol>
<li>balabala</li>
</ol>

这就是一个比较简单的有序列表的最小元素,默认的排序方式就是以数字开头,下面我们来动手写写。 首先来一个最简单的列表,下面是是内容和效果:

QQ截图20161011092345.png


在有序列表中我们还能定义其他的排序方式,上面是默认的额数字排序,下面我们再加上字母排序和罗马数字排序 这里就只需要添加type属性就可以了,"a"表示以小写字母来排序;"A"就是使用大写字母来排序;"i"就是以小写罗马数字来排序;"I"就是以大写罗马数字来排序。 这里还可以添加start属性,决定起始地。 下面是范例:

<html>
<head>
    <title>test</title>
    </head>
    <body style="font-size:20px;background-color:gray" >
    <ol start="2">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol> 
    <ol type="a">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol>     
    <ol type="A">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol>       
    <ol type="i">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol> 
     <ol type="I">
     <li>hadoop</li>
     <li>linux</li>
     <li>c </li>
    </ol>     
    </body>
</html>

QQ截图20161011092413.png

看了效果图再回头对比下属性值

(2).无序列表

说完了有序列表,下面来讲讲无序列表。无序列表在HTML中还是很常用的。 无序列表始于 < ul> 标签。每个列表项始于 < li>(有序无序是一样的)。 无需列表排序的时候就是给每个列表项加各种小符号其中分为Disc(默认)实心黑点;Cirle小圈;square方点,与有序列表的属性都是用的一样的,接下来我么就来动动手

QQ截图20161011092435.png

同样的,看了效果图再回头看看属性的设置

(3).定义性列表

定义列表通常用于术语的定义和解释。定义列表由< dl>开始,术语由< dt>开始,解释说明有< dd>开始,< dd>....< /dd>里的文字缩进显示。 下面我们就简单的操作下

QQ截图20161011092455.png


继续学习
||
<html> <head> <title>test</title> </head> <body style="font-size:20px;background-color:gray" > <ol start="2"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> <ol type="a"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> <ol type="A"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> <ol type="i"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> <ol type="I"> <li>hadoop</li> <li>linux</li> <li>c </li> </ol> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

弹指间学会HTML+CSS

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

扔个三星炸死你

还有一个ul呢

7年前    添加回复 0

这是啥

这节内容简单

7年前    添加回复 0

你的名字

很容易明白

7年前    添加回复 0

城堡下的诡洞

我自己还是蛮喜欢使用无序列表的

7年前    添加回复 0

baby不要哭泣

可以选择各种样式

7年前    添加回复 0

ul 前面的点可以换吗?

[最新 数据分析师 的回答] ul 前面的点可以换吗?-PHP中文网问答-ul 前面的点可以换吗?-PHP中文网问答围观一下哦,学习一下。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~