您好,欢迎来到舟舟教育培训网!
舟舟教育培训网

一站式教育培训

招生与学习平台

[前端开发]html页面中如何使用列表标签来排序文件他们都有哪些作用

  2021-04-23 阅读:139

在html页面中,合理的使用列表标签可以起到提纲和格式排序文件的作用。
列表分为两类,一是无序列表,一是有序列表,无序列表就是项目各条列间并无顺序关系,纯粹只是利用条列来呈现资料而已,此种无序标签,在各条列前面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的,比如从1、2、3…一直延伸下去。
列表的主要标签
标 签 描 述
<UL> 无序列表
<OL> 有序列表
<DIR> 目录列表
<DL> 定义列表
<MENU> 菜单列表
<DL>/<DT>/<DD> 定义列表的标记
<LI> 列表项目的标记
5-1 无序列表<UL>
无序列表使用的一对标签是<ul></ul>,无序列表指没有进行编号的列表, 每一个列表项前使用<LI>。<LI>的属性type有三个选项,这三个选项都必须小写:

disc实心园
circle空心园
square小方块

<ul>如果不使用其项目<li>的属性值,即默认情况下的<ul>会加"实心园"。
格式1:
<UL>
<LI>第一项
<LI>第二项
<LI>第三项
</UL>
格式2

<ul>
<li type=disc>第一项
<li type=circle>第二项
<li type=square>第三项
</ul>
示例 5-1.html
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表加"实心园"
<li>默认的无序列表"实心园"
<li>默认的无序列表"实心园"
</ul>
<ul>
<li type=square>无序列表square加方块
<li type=square>无序列表square加方块
<li type=square>无序列表square加方块
</ul>
<ul>
<li type=circle>无序列表circle加空心园
<li type=circle>无序列表circle加空心园
<li type=circle>无序列表circle加空心园
</ul>
</body>
</html>
5-2 有序列表<OL>
有序列表和无序列表的使用格式基本相同,它使用标签<ol></ol>,每一个列表项前使用<li>。<ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项,编号会自动调整。
顺序编号的设置是由<ol>的两个属性type和start来完成的。start=编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略,或是在<li>标签中设定value="n"改变列表行项目的特定编号,例如<li value="7">。type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。为了使用这些属性,把它们放在<ol>或<li>的的初始标签中。
有序列表type的属性
type 类 型 描 述
type=1 表示列表项目用数字标号(1,2,3...)
type=A 表示列表项目用大写字母标号(A,B,C...)
type=a 表示列表项目用小写字母标号(a,b,c...)
type=I 表示列表项目用大写罗马数字标号(Ⅰ,Ⅱ,Ⅲ...)
type=i 表示列表项目用小写罗马数字标号(i,ii,iii...)
格式1
<ol type=编号类型 start=value>
<li>第1项
<li>第2项
<li>第3项
</ol>
格式2
<ol>
<li>第1项
<li>第2项
<li>第3项
</ol>
实例:5-2.html

<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
<li>默认的有序列表
<li>默认的有序列表
<li>默认的有序列表
</ol>
<ol type=a start=5>
<li>第1项
<li>第2项
<li>第3项
<li value= 20>第4项
</ol>
<ol type= I start=2>
<li>第1项
<li>第2项
<li>第3项
</ol>
</body>
</html>
5-3 嵌套列表
将一个列表嵌入到另一个列表中,作为另一个列表的一部分,叫嵌套列表。无论是有序列表和无序列表的嵌套,浏览器都可以自动地分成排列。

反对 0举报 0 收藏 0 打赏 0评论 0
免责声明

本网页所展示的有关【[前端开发]html页面中如何使用列表标签来排序文件他们都有哪些作用】的信息/图片/参数等由的会员【 舟舟宝贝儿童教育有限公司 】提供,由舟舟教育培训网会员【 舟舟宝贝儿童教育有限公司 】自行对信息/图片/参数等的真实性、准确性和合法性负责,本平台(本网站)仅提供展示服务,请谨慎交易,因交易而产生的法律关系及法律纠纷由您自行协商解决,本平台(本网站)对此不承担任何责任。您在本网页可以浏览【[前端开发]html页面中如何使用列表标签来排序文件他们都有哪些作用】有关的信息/图片/价格等及提供 【[前端开发]html页面中如何使用列表标签来排序文件他们都有哪些作用】的商家公司简介、联系方式等信息。

在您的合法权益受到侵害时,请您致电15932669617,我们将竭诚为您服务,感谢您对舟舟教育培训网的关注与支持!

官方信息

所在地区:全国

会员级别:超级管理1

身份认证:    

资质认证: 认证

在线客服:

学校名片

舟舟宝贝儿童教育有限公司

微信客服
【温馨提示】来电请说明在舟舟教育培训网看到我们的,谢谢