HTML的学习（4）
备注：学习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>结果：
上一篇： 从零开始的django开发生活之博客后台富文本编辑（11）
下一篇： 用户添加脚本shell小程序