列表

列表就相当于去超市购物时的那个购物清单。在HTML中，也可以创建列表，在网页中一共有三种列表：
1. 无序列表
2. 有序列表
3. 定义列表

接下来让我们一起看一下这三种列表。

无序列表

现在我就在使用无序列表，无序列表是一个项目的列表，此列项目使用粗体圆点**（典型的小黑圆圈）**进行标记。
无需列表的使用：
- 使用< ul >标签来创建一个无序列表。
- 使用< li >在< ul >中创建列表项。一个< li >就是一个列表项。
- < ul >与< li >都是块元素。

<ul>
		<li>阿牛大官人</li>
		<li>西门大官人</li>
		<li>唐僧大官人</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LKGCZ9I7-1587450228445)(/Users/mac/Desktop/MarkDown /HTML（三）/1无序列表.jpg)]

那我们小黑圆圈能不能改成别的呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-58cnS6xS-1587450228447)(/Users/mac/Desktop/MarkDown /HTML（三）/2type属性.jpg)]

查看我们的参考手册手册我们发现，确实存在一个type属性，并且有三个属性值，disc是指默认的，square就是方的，circle就是圆的。看看区别。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xUiK6KFq-1587450228449)(/Users/mac/Desktop/MarkDown /HTML（三）/3我是disc.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BfrQUb21-1587450228451)(/Users/mac/Desktop/MarkDown /HTML（三）/4我是square.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MbeDWr6m-1587450228452)(/Users/mac/Desktop/MarkDown /HTML（三）/5我是circle.jpg)]

但是要注意!

默认的项目符号我们一般都不使用！！！因此，把上面看到的三种都忘了吧。。。因为每个浏览器的默认样式不同，同样的默认样式，在火狐浏览器可能圆圈要比IE浏览器大一些，我们希望我们的项目在各个浏览器的效果都是一样的，所以我们一般不使用这些项目符号！！！那怎么办呢？？？

默认的不要，那首先就得把它去掉。

<style>
			ul{
				list-style: none;
			}
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1PamQiD-1587450228453)(/Users/mac/Desktop/MarkDown /HTML（三）/6删除默认标记.jpg)]

这样就能把我们的项目标记给去掉了。如果我们需要使用标记，可以通过为我们< li >标签设置背景颜色，这样就能保证我们各个浏览器的效果相同了，这里我们就先不说了。以后还会提到的。

有序列表

有序列表和无序列表类似，只不过使用< ol >标签代替< ul >标签。

<ol>
		<li>结构</li>
		<li>表现</li>
		<li>行为</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3nWZlqMR-1587450228454)(/Users/mac/Desktop/MarkDown /HTML（三）/7有序列表.jpg)]

有序列表使用有序的序号作为项目符号。总体上还是无序列表使用偏多。
type属性，可以指定序号的类型。可选值：
- 1，默认值，使用阿拉伯数字。
- a，使用小写字母作为序号。
- A，使用大写字母作为序号。
- i，使用小写的罗马数字作为序号。
- I，使用大写的罗马数字作为序号。
< ol >标签,也块是元素。

列表嵌套

列表之间都是可以互相嵌套的，我们可以在无序列表中放一个有序列表，在有序列表里放个无需列表，在无序列表里放无序列表，在有序列表里放有序列表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表嵌套</title>
	</head>
	<body>
	
		<ul>
			<li>
				鱼香肉丝
				<ol>
					<li>鱼</li>
					<li>香</li>
					<li>肉丝</li>
				</ol>
			</li>
			<li>
				宫保鸡丁
				<ul>
					<li>宫</li>
					<li>保</li>
					<li>鸡丁</li>
				</ul>
			</li>
			<li>青椒肉丝</li>
		</ul>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SuT2raOf-1587450228455)(/Users/mac/Desktop/MarkDown /HTML（三）/8列表嵌套.jpg)]

定义列表

定义列表是用来对一些词汇或内容进行定义。
使用< dl >标签，来创建一个定义列表。
< dl >标签有两个子标签：
- < dt >标签：用来指定被定义的内容。
- < dd >标签：对定义内容的描述。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义列表</title>
	</head>
	<body>
		<dl>
			<dt>武松</dt>
			<dd>景阳冈打虎英雄，战斗力9999！</dd>
		</dl>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TFVnwQ4p-1587450228456)(/Users/mac/Desktop/MarkDown /HTML（三）/9定义标签.jpg)]

定义列表整体来说用的比较少，同样定义列表和前面说的无序列表和有序列表都可以相互嵌套。

单位

长度单位

像素 px

像素使我们在网页中使用的最多的一个单位。
- 一个像素就相当于我们屏幕中的一个小点。
- 我们屏幕实际上就是由这些像素构成的。
- 但是这些像素点是不能直接看见的，因为它太小了。（要是能直接看见，不是你视力太好了，而是显示器太次了。。。）
- 不同的显示器，一个像素的大小也不同。
显示效果越好，越清晰，像素就越小，反之像素越大。

一般来说我们手机像素一个像素相当于计算机像素的1/4，但我们使用手机时也不会说同一个网站字体大小是电脑的1/4吧，那样太小了，啥都看不见了，所以一般手机的浏览器会默认把像素扩大4倍，如果说电脑的像素是12，手机里浏览的时候像素就是48.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>长度单位</title>
		
		<style>
			.box{
				width:100px;
				height:100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hn9gaJct-1587450228457)(/Users/mac/Desktop/MarkDown /HTML（三）/10像素.jpg)]

百分比

也可以将我们的单位设置成百分比的形式。
这样我们的浏览器会通过其父元素的样式来计算该值。

来看我们百分比前先看一下这段代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>长度单位</title>
		
		<style>
			.box{
				width:200px;
				height:200px;
				background-color: red;
			}
			.box1{
				width:100px;
				height:100px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
				
			</div>
		</div>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hCBCHWgD-1587450228459)(/Users/mac/Desktop/MarkDown /HTML（三）/11百分比.jpg)]

如果我们更改一下：

.box1{
width:50%;
height:50%;
background-color: yellow;
}

发现没有区别！！！

这样做有什么好处呢？

当父元素的属性值发生变化时，子元素也会发生改变。在我们创建一些自适应的页面时，经常使用百分比作为单位。

em

em和百分比类似，它是相对与当前元素的字体大小来计算的。

1 em = 1 font-size

使用em时，当字体大小改变时，em也会随之改变，设置字体相关的样式时，经常会使用em。

颜色单位

颜色名为单位

在CSS可以直接使用颜色单位来表示不同的颜色。
- 红色：red
- 蓝色：blue
- 绿色：green
但是这有什么问题呢？我们的词汇量有限呀，像我用red、green还成要是换个orange就拼不出来了。。。

当然我们也可以查询颜色名。

在这里插入图片描述

各种各样、乱七八糟的颜色，疯狂扩充我们的词汇量。

但是这颜色太多了，以至于单词也不足以表示我们五彩缤纷的世界。

RGB值

我们也可以使用RGB值来表示不同的颜色。

所谓的RGB值指的是通过Red、Green、Blue三元色，通过这三种颜色的不同浓度，来表示出不同的颜色。

例子：rgb(红色浓度，绿色浓度，蓝色浓度);

颜色的浓度需要一个0~255之间的值，255表示最大，0表示没有。

浓度也可以采用一个百分数来设置，需要一个0%~100%之间的数字。使用百分数最终也会转化成0到255的值。

0%表示0

100%表示255

也可以使用十六进制的rgb值来表示颜色，原理和上面的RGB原理一样，只不过使用十六进制数来代替，使用三组两位（每组表示一个元素）的十六进制数组来表示一个颜色。
语法：#红色绿色蓝色
十六进制：0-f。
三组两位的十六进制数组：每组表示一个元素。
第一组表示红色的浓度，第二组表示绿色的浓度，第三组表示蓝色的浓度。范围都是00-ff。

00 -->表示没有，相当于rgb中的0.

ff -->表示最大，相当于rgb中的255.

十六进制表示的rgb值用的比较多一点，因为相对简单，一般截图工具也可以截取颜色。

像红色（#ff0000）这种两位重复的颜色，可以简写，写成#f00.但是像#aabbcd这样不能简写，因为最后一组的两位不是重复的。

字体样式

设置字体颜色，使用color来设置文字的颜色，其实也可以说字体颜色是前景色，background-color是背景色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体样式</title>
		<style type="text/css">
			.p1{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">
			我是一个p标签 abcdEFG
		</p>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-StfOMJ2C-1587450228460)(/Users/mac/Desktop/MarkDown /HTML（三）/12设置字体颜色.jpg)]

设置文字大小，使用font-size，在浏览器中一般默认的文字大小都是16px。

.p1{
  color: red;
  font-size: 25px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yl2FgRfj-1587450228461)(/Users/mac/Desktop/MarkDown /HTML（三）/13字体大小.jpg)]

font-size设置的并不是文字本身的大小。
在页面中，每一个文字都是c处于一个看不见的框中，就像我们上小学的时候使用的“田格本”。
我们设置的font-size实际上是设计我们的“格”，并不是字体大小。
一般情况下，字体都要比“格”小一些，有时候会比格大，根据字体不同，显示效果也不同。

设置文字字体，通过font-family可以指定文字的字体。

.p1{
				color: red;
				font-size: 25px;
       font-family: "arial black";
	}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oDjTwEfH-1587450228462)(/Users/mac/Desktop/MarkDown /HTML（三）/14字体类型.jpg)]

当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体。
该样式可以同时指定多个字体，多个字体之间使用,分开，当同时候多个字体时，浏览器会优先使用前面的字体，如果没有则使用下一个。
浏览器使用的字体就是计算机中的字体，如果计算机中有，则能用，如果没有就不能用。
在开发中，如果字体太奇怪，用的太少，尽量不要使用。有可能用户电脑没有，就不能达到想要的效果。偏要用的可以截个图，或者一些网络字体，让用户以一连网就自动下载，但是可能兼容性不是很好。

字体分类

在网页中将我们的字体分成了5 大类.

serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）
以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。
其实常用的就是前面两个。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体分类</title>
	</head>
	<body>
		<p style="color:red ;font-size:25px; font-family:serif color:red">我是衬线字体ABCDEFghi</p>
		<p style="font-size:25px ;font-family:sans-serif;color:red">我是非衬线字体ABCDEFghi</p>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wjvmulr6-1587450228463)(/Users/mac/Desktop/MarkDown /HTML（三）/15衬线字体与非衬线字体.jpg)]

衬线字体

衬线字体:

衬线字体(serif)，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。
衬线字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高。在整文阅读的情况下，适合使用衬线字体进行排版，易于换行阅读的识别性，避免发生行间的阅读错误。
中文字体中的宋体就是一种最标准的衬线字体，衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体。

非衬线字体（无衬线字体）

无衬线字体:

无衬线体(sans-serif)指没有衬线的字体，与衬线字体相反，完全抛弃装饰衬线，只剩下主干，造型简明有力，更具现代感，起源也很晚。
适用于标题、广告，瞬间的识别性高。
无衬线体因棱角较少，方便渲染，广泛用于电脑屏幕。

再来看下其他三种字体

<p style="font-size:25px ;font-family:monospace;color:red">
  等宽字体ABCDEFghi
</p>
<p style="font-size:25px ;font-family:cursive;color:red">
  草书字体ABCDEFghi
</p>
<p style="font-size:25px ;font-family:fantasy;color:red">
  虚幻字体ABCDEFghi
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ufAL5yP-1587450228464)(/Users/mac/Desktop/MarkDown /HTML（三）/16等宽字体，草书字体，虚幻字体.jpg)]

我们说了，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。那这玩意有什么用呢？
一般会把这些字体放在我们font-family的最后一个，说白了就是兜底的。

p{
	font-family:arial,微软雅黑，华文彩云，serif;
}

字体的其他样式

已经说了字体的颜色color，字体的大小font-size，字体类型font-family。
还有什么字体的其他样式呢？直接查一下我们的参考手册。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SJagxKSX-1587450228465)(/Users/mac/Desktop/MarkDown /HTML（三）/17字体其他样式.jpg)]

font-style属性

font-style可以设置文字的斜体.

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体分类</title>
	</head>
	<body>
		<p style="font-style:italic">斜体的字体样式。</p>
		<p style="font-style:oblique">倾斜的字体样式。</p>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PAQu5W9w-1587450228466)(/Users/mac/Desktop/MarkDown /HTML（三）/18倾斜斜体.jpg)]

好像没什么区别，我们说，大部分浏览器都不会对倾斜和斜体效果做区分，也就是说我们设置italic和oblique他们的效果是一样的。
一般我们只会使用italic。

font-weight属性（粗细）

font-weight可以设置字体的粗细

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100\|200\|300\|400\|500\|600\|700\|800\|900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体分类</title>
	<style>
		p.normal {font-weight:normal;}
		p.light {font-weight:lighter;}
		p.thick {font-weight:bold;}
		p.thicker {font-weight:900;}
	</style>
	</head>
	<body>
		<p class="normal">This is a paragraph.</p>
		<p class="light">This is a paragraph.</p>
		<p class="thick">This is a paragraph.</p>
		<p class="thicker">This is a paragraph.</p>
	</body>
<html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X4X8Wt3V-1587450228467)(/Users/mac/Desktop/MarkDown /HTML（三）/19字体的粗细.jpg)]

一般用户计算机中没有9个级别的字体，所以不能达到我们想要的效果。
所以只能说200可能比100粗，300可能比200粗，但是也有可能是一样粗的。

font-variant 属性

设置小型大写字母的字体显示文本。
这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
我们来看看这是什么特殊的效果呢？首先看下可能的值：

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体分类</title>
	<style>
		p.normal {font-variant:normal;}
		p.small {font-variant:small-caps;}
	</style>
	</head>

	<body>
		<p class="normal">My name is Hege Refsnes.</p>
		<p class="small">My name is Hege Refsnes.</p>
  </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElXDZi4y-1587450228468)(/Users/mac/Desktop/MarkDown /HTML（三）/20小型大写字母.jpg)]

相对来说用的不是很多啦，大家可以看着玩玩。

font简写属性

前面我们说了字体的好多种样式，包括字体的大小、颜色、字体类型、斜体、粗体、小型大写字母。
如果我们要设置多种字体样式，写这么多会比较麻烦。
CSS中为我们提供而一个样式叫font，使用该样式可以同时设置文字相关的所有样式。不同值之间使用隔开。
顺序：斜体、加粗、小型大写字母。这三个没有顺序要求，甚至可写可不写。如果不写以默认值代替。但是大小和字体必须写！！！而且，字体必须是最后一个样式，大小必须是倒数第二个样式。
font 简写属性在一个声明中设置所有字体属性。可设置的属性是（按顺序）：
“font-style font-variant font-weight font-size/line-height font-family”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>font</title>
	<style>
		.p1{
			font-family: "微软雅黑";
			font-size: 50px;
			font-style: italic;
			font-weight: bold;
			font-variant: small-caps;
		}
		.p2{
			font: italic small-caps bold 50px "微软雅黑";
		}
	</style>
</head>

<body>
	<p class="p1">我是语段文字，ABCDefg</p>
	<p class="p2">我是语段文字，ABCDefg</p>
	
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MHJ68rg8-1587450228469)(/Users/mac/Desktop/MarkDown /HTML（三）/21font简写.jpg)]

我们看到使用我们的简写属性很方便，而且，实际上使用我们的简写属性的性能更好。因为如果按照前者的那样写的话，设置5个样式浏览器需要解析5次，但是如果采用简写，浏览器只需要解析一次。

之前的

CSS选择器优先级怎么分？？html中的文本标签都有哪些？？CSS（二）
CSS选择器到底有哪些？CSS笔记（一）

阿牛大牛中

发布了5 篇原创文章 · 获赞 7 · 访问量 820

私信关注

HTML列表的简单使用以及在我们网页编程中的单位你了解多少？？CSS中的字体样式你又了解多少，进来康康！！HTML、CSS（三）

文章目录

列表