一起自学前端开发!

html常用标签:列表标签---前端入门教程

来源:原创    更新时间:2017-07-27 20:15:18    编辑:前端编辑    浏览:1951

列表标签

 

通过上一节的学习,我们学会网站链接。在浏览一些网站,例如天猫等网站时,有一个导航栏的效果,在导航栏的内的链接如同列表一样,一个个排列显示。列表效果可以通过列表标签来实现,本节将介绍HTML中的两个常用列表标签。

 

一、无序列表标签<ul>

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表通过<ul>标签实现。

<ul>标签是容器标签,必须和<li>标签一起使用,<li>标签定义列表中的列表项。

<ul>标签中只能有<li>标签,<li>标签中能有其他标签。

使用场景:在等有并列关系却没有序号的列表中使用,例如导航栏。

举例:一个无序的列表

代码如下:

<h3>前端入门学习的三大基础</h3>

<ul>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#"> </a></li>

</ul>

 

效果:

图片3.png 

 

二、有序列表标签<ol>

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表通过 <ol> 标签实现,每个列表项是 <li> 标签。

<ol>标签和<ul>标签类似,只能包含<li>标签。

使用场景:在有并列关系,且需要有序号的时候,比如目录

有序列表的排序可以是数字、字母、罗马字符等,通过type属性来改变。

type属性的属性值:

属性值

说明

1

数字1,2...(默认)

a

小写字母a,b...

A

大写字母A,B...

i

小写罗马数字:i,ii,iii...

I

大写罗马数字I,II,III...

举例:几个排序不同的有序列表

代码如下:

<h3>前端入门学习的三大基础</h3>

<ol>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#"> </a></li>

</ol>

<h3>前端入门学习的三大基础</h3>

<ol type="a">

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#"> </a></li>

</ol> <h3>前端入门学习的三大基础</h3>

<ol type="I">

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#"> </a></li>

</ol>

 

效果:

图片4.png


评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜