HTML列表使用

最新推荐文章于 2022-07-18 16:45:26 发布

将卿

最新推荐文章于 2022-07-18 16:45:26 发布

阅读量5.5k

点赞数 14

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_43055077/article/details/108030063

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML列表使用

一、列表简介
列表，顾名思义就是在网页中将相关资料以条目的形式有序或无须排列而形成的表。常用的列表有无序列表、有序列表和定义列表三种，另外，还有不太常用的目录列表和菜单列表。
在这里插入图片描述
二、无序列表
无序列表是一个没有特定顺序的相关条目（也称为列表项）的集合。在无序列表中，各个列表项之间属于并列关系，没有先后顺序之分，他们之间以一个项目符号来标记。
基本语法：

<ul type = “”>
<li>项目名称</li>
<li>项目名称</li>
...
</ul>

语法说明：
在HTML文件中，可以利用成对的<ul>...</ul>标记插入无序列表，其中的列表项标记<li>...</li>用来定义列表项序列。使用无序列表标记的type属性，可以指定出现在列表项前的项目符号的样式，其取值以及相对应的符号样式如下：
1.dise:指定项目符号为一个实心原点
2.circlr:指定项目符号为一个空心原点
3.square:指定项目符号为一个实心方块

无序列表实例

<!--程序20200815-01-->                                         
<html>
<head>
	<title>无序列表</title>           
</head>
<body>
	<b>班级新闻</b>
	<ul type = "circle">
	<li>最新课程表</li>
	<li>关于普通话考试的通知</li>
	<li>钢琴名曲音乐欣赏——先给爱丽丝</li>
	<li>中国奥运会屈辱史</li>
	<li>div + css高级应用学习</li>
	</ul>
</body>
<html>

浏览器查看效果：
在这里插入图片描述
三、有序列表：
有序列表是一个特定顺序的相关条目的集合，在有序列表中，各个列表项之间有先后顺序之分，他们可以用编号来标记。
基本语法：

<ol type = “”>
<li>项目名称</li>
<li>项目名称</li>
...
</ol>

语法说明：
在HTML中，可以利用成对的<ol>...</ol>标记插入有序列表，其中的列表项标记<li>...</li>用来定义列表项顺序。
使用有序列表标记的type属性，可以指定出现在列表的项目编号的样式，其取值以及相对应的编号样式如下：
（1）1：指定项目编号为阿拉伯数字
（2）a: 指定项目编号为小写英文字母
（3）A: 指定项目编号为答谢英文字母
（4）i: 指定项目编号为小写罗马数字
（5）I: 指定项目编号为大写罗马数字

有序列表实例（实现对报名时间、地点、费用等的有序排列）

<!--程序20200815-02-->                                         
<html>
<head>
	<title>有序列表</title>           
</head>
<body>
	<strong>报名</strong>
	<ol type = "A">
	<li>报名时间：3月16-21日，逾期不予受理。</li>
	<li>报名地点：所在院系办公室。</li>
	<li>报名费用：按物价局规定85元/人/次。</li>
	<li>提交资料以及注意事项</li>
	</ol>
</body>
<html>

浏览器运行效果：
在这里插入图片描述
四、编号起始值：
使用有序列表标记的start属性后，用户可改变编号的起始值，start属性值是一个证书，表示从哪一个数字或字母开始编号。例如，设置start=”3”，则有序列表的表项编号将从3,c,C,iii…开始编号
编号起始值设置实例：

<!--程序20200815-03-->                                         
<html>
<head>
	<title>有序列表</title>           
</head>
<body>
	<strong>报名</strong>
	<ol type = "A" start = "3">
	<li>报名时间：3月16-21日，逾期不予受理。</li>
	<li>报名地点：所在院系办公室。</li>
	<li>报名费用：按物价局规定85元/人/次。</li>
	<li>提交资料以及注意事项</li>
	</ol>
</body>
<html>

浏览器运行结果：
在这里插入图片描述
除了对列表标记<ol>...</ol>进行属性设置外，还可以对列表项标记<li>...</li>进行属性设置。
注意：
（1）所指定的单个列表项只有样式发生了变化，其顺序值大小不变。
（2）列表项标记<li>...</li>的type属性只影响当前列表项，后续的列表项将恢复遵循列表中设置的type属性。
（3）列表项标记<li>...</li>type属性的指定，即适用于无序列表也适用于有序列表。
（4）列表标记的type属性只能改变当前列表项的符号或编号，并不会改变其值得大小，而使用列表项标记<li>...</li>的vlaue属性，可以改变当前列表项的编号大小，并会影响其后所有的列表项的编号大小。

对列表项使用value属性实例：

<!--程序20200815-04-->                                         
<html>
<head>
	<title>有序列表</title>           
</head>
<body>
	<strong>报名</strong>
	<ol type = "A">
	<li>报名时间：3月16-21日，逾期不予受理。</li>
	<li value = "5">报名地点：所在院系办公室。</li>
	<li>报名费用：按物价局规定85元/人/次。</li>
	<li>提交资料以及注意事项</li>
	</ol>
</body>
<html>

浏览器运行效果：
在这里插入图片描述
可以看到，第二个列表项以后从字母”E”之后开始编号

五、嵌套列表：
列表可以嵌套使用，嵌套的列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是有序列表和无序列表混合嵌套。
有序列表嵌套实例：

<!--程序20200815-05-->                                         
<html>
<head>
	<title>有序列表嵌套实例</title>           
</head>
<body>
	<h2><center><b>普通话考试通知</b></center></h2>
	我院今年3月份的普通话水平测试开始接受报名，具体事项通知如下：<br>
	<ol type = "1">
	<li><strong>报名</strong></li>
	<ol type = "A">
	<li>报名时间：3月16-21日，逾期不予受理。</li>
	<li value = "5">报名地点：所在院系办公室。</li>
	<li>报名费用：按物价局规定85元/人/次。</li>
	<li>提交资料以及注意事项</li>
		<ol type = "a">
		<li>参加测试的学生必须填写《普通话水平测试报名表》一份；</li>
		<li>填写准考证一份；</li>
		<li>提交小一寸彩色证件照3张</li>
		</ol>
	</ol>
	<li><strong>培训</strong></li>
	<li><strong>测试</strong></li>
	<p>(注：具体时间和地点按照学院官网下发的通知为准)</p>
	</ol>
</body>
<html>

浏览器运行结果：
在这里插入图片描述
六、定义列表
在HTML文件中，只要在适当的地方插入<dl>...</dl>标记，即可自动生成定义列表，它的每一项前既没有项目符号，也没有编号它是通过缩进的形式使内容层次清晰。
基本语法：

<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
......
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
...
</dl>

语法说明：
（1）<dl>...</dl>标记用来创建定义列表
（2）<dt>...</dt>标记用来创建列表中的上层项目，此标记只能在<dl>...</dl>标记中使用。显示时<dt>...</dt>标记定义的内容将左对齐
（3）<dd>...</dd>标记用来创建列表中的下层项目，此标记也只能在<dl>...</dl>标记中使用。显示时<dd>...</dd>标记定义的内容将相对于<dt>...</dt>标记定义的内容向右缩进
定义列表实例：

<!--程序20200815-06-->                                         
<html>
<head>
	<title>定义列表</title>           
</head>
<body>
	<h2><center><b>普通话考试通知</b></center></h2>
	我院今年3月份的普通话水平测试开始接受报名，具体事项通知如下：<br>
	<dl>
	<dt>报名</dt>
		<dd>报名时间：3月16-21日，逾期不予受理。</dd>
		<dd>报名地点：所在院系办公室。</dd>
		<dd>报名费用：按物价局规定85元/人/次。</dd>
		<dd>提交资料以及注意事项</dd>
	<dt>培训</dt>
		<dd>培训实践：3月31日（星期六）；</dd>
		<dd>培训地点：4栋3601室；</dd>
		<dd>注意事项：请同学自带培训用品。</dd>
	</dl>
</body>
<html>

浏览器运行结果：
在这里插入图片描述
七、菜单列表和目录列表
菜单列表通常用于显示一个简单的单列列表，一般不做嵌套。目录列表通常用于显示一个多列的文件列表，可做嵌套
基本语法：

<menu>
<li>项目名称</li>
<li>项目名称</li>
...
</menu>

菜单列表和目录列表实例;

<!--程序20200815-07-->                                         
<html>
<head>
	<title>菜单列表和目录列表</title>           
</head>
<body>
	<h3><b>班级新闻</b></h3>
	<menu type = "disc">
		<li>最新课程表</li>
		<li>关于普通话考试的通知</li>
		<li>钢琴曲音乐欣赏</li>
		<li>div+css高级应用学习</li>
	</menu>
	<hr>
	<h3><b>普通话考试报名通知</b></h3>
	<dir>
	<li>报名时间：3月16-21日；</li>
	<li>报名地点：院系办公室；</li>
	<li>报名费用：85元/人/次；</li>
	<li>注意事项：</li>
	<dir>
	<li>参加测试的学生徐填写《普通话水平测试报名表》一份；</li>
	<li>填写准考证一份；</li>
	<li>提交小一寸彩色证件照3张。</li>
	</dir>
	</dir>
</body>
<html>

浏览器运行结果：
在这里插入图片描述