HTML的学习（4）

最新推荐文章于 2022-10-07 11:21:45 发布

阿酒在看云

最新推荐文章于 2022-10-07 11:21:45 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/weixin_34727238/article/details/82732842

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

备注：学习html的第四天，今天的进度应该快一点，这些知识点都比较容易掌握并且简明易懂，多多练习，提高学习的效率即可。

字体类型

我们已经讨论了字体颜色和字体大小。但是，我们希望有更多的选择！我们如果要使用什么字体类型，该怎么做呢？我们可以用设置字体类型来做到这一点，就像这样：

<h1 style="font-family: Arial">标题</h1>

说明

首先我们写<h1>大标题</h1>。
现在我们在<h1>标签里面写东西，添加一个style的属性并设置"font-family: Arial"，这样<h1>标签将使用Arial字体。

说明

改变第一个<li>里面的字体大小为16px，并且设置字体为楷体；
改变第二元素的字体大小为12px，并且设置字体为宋体；
改变第三个元素的字体大小为10px，并且字体设置为楷体。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>喜欢改变的字体</title>
	</head>
	<body>
		<h1 style="font-family: Arial">大标题</h1>
		 <ol>
		 	<li style="font-size:18px;font-family:KaiTi;color:red">这元素改成楷体.</li>
		 	<li style="font-size:12px;font-family:SimSun">这元素改成宋体.</li>
		 	<li style="font-size:10px;font-family:KaiTi">这元素改成楷体.</li>
		 </ol>
	</body>
</html>

结果：

小结：

做的很好！现在，你已经学会了对网页的控制，包括字体的颜色，大小和类型。总括来说，我们使用的样式属性，在打开的标签，就像这样：

a. font-size: 14px
b. color: orange
c. font-family: Bodoni

<p style = "font-size:14px; color: orange; font-family: Bodoni">

最重要的是你要知道，你可以使用样式属性的段落，标题，甚至链接！

说明

在第7行，做如下改变：

a. 字体大小为20px；

b. 字体颜色为蓝色；

c. 字体为Arial。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>全部放一起</title>
	</head>
  
	<body>
		<p style="font-size:20px;font-family:Arial;color:blue">真正壮观的一段</p>
	</body>
  
</html>

结果：

背景颜色

上一节我们讲了一些很好的技巧来控制文本的外观。现在，我们要了解如何改变网页背景的颜色。

我们可以再次使用的样式属性，并设置它等于“背景色：红”（或任何你想要的颜色）。

<p style="background-color: red;">你好!</p>

说明

改变<body>的颜色为brown 。
改变<ol>的颜色为yellow。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>背景颜色</title>
	</head>
	<body style="background-color:brown">
		<h3>喜好的足球队俱乐部</h3>
			<ol style="background-color:yellow">
				<li>AC 米兰</li>	
				<li>国际 米兰</li>
				<li>佛罗伦萨</li>
			</ol>			
	</body>
</html>

结果：

对齐文本

通常它是好的，能够将文字左右移动。要做到这一点，我们再次使用 style属性。然后我们使用“文本对齐：左”（或右，或中心），以确定文本的位置。

<h1 style="text-align:center">

说明

设置标题为<h3>并且居中；
列表里的第一个元素居左；
列表里的第二个元素居中；
列表里的第三个元素居右。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>背景颜色</title>
	</head>
	<body>
		<h3 style="text-align:center">喜好的足球队俱乐部</h3>
			<ol>
				<li style="text-align:left">AC 米兰</li>	
				<li style="text-align:center">国际 米兰</li>
				<li style="text-align:right">佛罗伦萨</li>
			</ol>			
	</body>
</html>

结果：

粗体字

我们可以改变单词的形状。但是我们怎么让它们变成粗体字呢？

我们没有使用style属性。

确定你要用粗体字；
粗体字应该在<strong>和</strong>标签之内。

说明

把“唱歌”两字变成粗体字在第7行。把“饼干”两字变成粗体字在第8行。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>人民万岁！</title>
	</head>
	<body>
	  <p>你听到有人在<strong>唱歌</strong>吗？</p>
	  <p>没有听到，我在吃<strong>饼干</strong>呢.</p>
	</body>
</html>

结果：

强调字

除去粗体字外，我们经常要用斜体字来表示强调。

像粗体字一样，我们不需要写style样式，相反的只需要以下的这些：

1、确定你要强调那个词语或者文本。

2、词语或者文本需要在<em>和</em>标签里。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>一些不错的练习</title>
	</head>
	<body>
	  <p>不能<em>那样</em>说</p>
		<p>我非常<em>累</em></p>
	</body>
</html>

结果：

小结：

一个令人难以置信的总结，你已经学习了很多内容。恭喜！我们都已经学习了那些内容：

创建有序和无序列表。
改变颜色，大小和字体类型。
在HTML文件中添加注释。
改变页面的背景颜色。
对齐文本。
加粗和强调字体。

练习题：

<!DOCTYPE html>
<html>
	<head>
  
		<title>hello</title>
  
	</head>
  <!--这只是一个简单的练习-->
	<body style="background-color:black">
	  <ul style="background-color:red">我是一个无序的列表
		<li style="font-size:30px;color:white;font-family:KaiTi">春天</li>
		<li style="text-align:center">夏天</li>
		<li>秋天</li>
		<li>冬天</li>
	  </ul>
	  <ol style="background-color:green;text-align:center">我是一个<strong>有序</strong>的列表
		<li>白天</li>
		<li><em>黑夜</em></li>
	  </ol>
  </body>
  
</html>

结果：