小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

HTML——＞列表_html中列表的定义是什么?

作者：小丑西瓜9 | 2024-03-28 08:46:52

踩

html中列表的定义是什么?

列表

列表介绍

在HTML中列表可以分为三类：有序列表，无序列表，定义列表

有序列表:列表项之间有先后顺序之分
无序列表：列表项之间没有先后顺序之分
定义列表：是一组带有特殊含义的列表，一个列表项包含“条件”和‘’列表“两个部分

有序列表

有序列表的简介

有序列表从< ol >开始到< /ol >结束。

在有序列表中一般采用数字或字母作为顺序，默认采用数字顺序

语法结构：

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>
1
2
3
4
5

ol，即ordered list（有序列表）。li，即list（）列表项

在该语法中

< ol >< /ol >表示有序列表ed开始和结束
< li >< li >表示一个列表项的开始和结束

注意：

ol标签和li标签需要配合一起使用，不可以单独使用，而且< ol >标签的子标签只能是li标签，不能是其他标签

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<ol>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ol>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

有序列表

HTML
CSS
JavaScript
jQuery
Vue.js

type属性

在HTML中可以通过type属性来改变列表项符号。在默认情况先，有序列表以数字作为序号

语法结构：

<ol type="属性值">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>jQuery</li>
   <li>Vue.js</li>
</ol>
1
2
3
4
5
6
7

type属性取值表：

属性值	列表符号
1	阿拉伯数字
a	小写英语
A	大写英语
i	小写罗马数字
I	大写罗马数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>type属性</title>
	</head>
	<body>
		<ol type ="a">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>jQuery</li>
		<li>Vue.js</li>
        </ol>
		
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

type属性

HTML
CSS
JavaScript
jQuery
## 无序列表

无序列表简介

无序列表的列表项没有顺序，在默认情况下无序列表的列表符号是实心黑圆

语法结构：

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
1
2
3
4
5

ul即unordered list（无序列表），li即list（列表项）

在该语法中

< ul >< /ul >标志着一个无序列表的开始和结束
< li >< li >表示一个列表项的开始和结束

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

无序列表

HTML
CSS
JavaScript
jQuery
Vue.js

type属性

语法结构：

<ol type="属性值">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>jQuery</li>
   <li>Vue.js</li>
</ol>
1
2
3
4
5
6
7

type属性取值：

属性值	列表符号
disc	实心圆
circle	空心圆
square	实心正方形

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>type属性</title>
	</head>
	<body>
		<ul type="circle">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

type属性

HTML
CSS
JavaScript
jQuery
Vue.js

深入无序列表

ul标签和li标签需要配合一起使用，不可以单独使用，而且< ul >标签的子标签只能是li标签，不能是其他标签

定义列表

在HTML中，定义列表由两部分组成：名词和描述

语法结构：

<dl>
    <dt>名词</dt>
    <dd>描述</dd>

</dl>

1
2
3
4
5
6

名词

描述

dl即definition list（定义列表），dt即definition term（定义名词），dd即definition description（定义描述）

在该语法中：

< dl >< /dl >代表了定义列表的开始和结束
< dt >< /dt >用于添加要解释的名词
< dd >< /dd >用于添加对名词的解释

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义列表</title>
	</head>
	<body>
		<dl>
			<dt>HTML</dt>
			<dd>制作网页的标准语言，控制网页结构</dd>
			<dt>CSS</dt>
			<dd>层叠样式表，控制网页的样式</dd>
			<dt>JavaScript</dt>
			<dd>脚本语言，控制网页行为</dd>
		</dl>
	</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

定义列表

HTML

制作网页的标准语言，控制网页结构

CSS

层叠样式表，控制网页的样式

JavaScript

脚本语言，控制网页行为

HTML语义化

在列表中，有很多代码可以被一些基础代码代替，但虽然书写时简单，当要写的代码数量庞大时，会降低代码的可读性。因此，养好使用规范格式代码的习惯

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/328986