HTML的学习（2）_html 河马牙医网页练习-CSDN博客

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

备注：学习这条路很漫长，没有知识储备的情况之下对于工作很难开展，可能是孤独的，但是确实是值得的，努力去做就好。

你能做出来什么

在这之前，我们要求写一堆代码，这是对有帮助的，可以让你知道这个项目到底是怎么一步一步做出来的。

检查index.html文件并写一个例子 - 要确保我们自己的网页正常显示。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>我的世界</title>
	</head>
	<body><h1>爱吃三明治吗</h1>
  	 <img src="http://fenby.b0.upaiyun.com/Courses/HTML/1013211.png"/>

		<p>我喜欢鸡蛋和火腿!</p>
		<p>但是其实大多数是喜欢三明治</p>
	</body>
</html>

结果：

每个房子都需要一个框架

一个HTML文件有点像房子：它需要一定的数量的必须的结构才能保证正常发挥房子的作用和功能。

一个HTML文件需要框架，在这里的框架就由<!DOCTYPE>、<html>、<head>和<body>这些标签组成。

说明：

你的页面现在是完全的空白状态，我们现在一起来做五件事情：

1.添加<!DOCTYPE>标签；

2.添加<html>标签；

3.添加<head>标签；

4.在<head>标签中添加你喜欢的任何标题；

5.添加body标签。

练习题：

<!DOCTYPE HTML>
<html>
<head>
<title>only web</title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="http://pic1.nipic.com/2008-12-25/2008122510134038_2.jpg"></a>
</body>

</html>

结果：

写一个好的标题

你的网页可以使用body标签之间的<h1>标题，这样大家都知道网页是关于你的。

创建一个<h1>标签在你的body里面，在<h1>标签之间写下你的名字，这样大家都可以看见。

练习题：

<!DOCTYPE html>
<html>
  
	<head>
  
		<title></title>
	</head>
  
  <body><h1>一只洒鹿的网站</h1></body>
</html>

题外话：

课程有些许的重复，但是其实学习就是一个重复记忆的过程，完全不能轻易急于求成。

做一下自我介绍

你可以使用一个或两个段落，告诉读者你的兴趣是什么，你做什么行业，你有多爱学习HTML等等。

添加第三个<p>标签在<h1>标签后（但是在</body>之前）,在第三个<p>标签里写一点点关于你的愿望，比如你可以说你想要什么。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>简单的介绍</title>
	</head>
	<body>	  
	  <h1>人生的愿望</h1>
	  <p>行至水穷处</p>
	  <p>坐看云起时</p>  
	  </body>  
</html>

结果：

一张照片胜过千言万语

虽然你的页面添加了图像并且美化了一点，但是你的页面仍然看起来有点空白。

请记住，当你添加一个图片的时候，可以用右键选择复制图片链接，这样就可以添加到<img>标签。

说明

添加一个<img>标签在你的body里面，可以把它放任何地方。（我们认为它放在<h1>标签后面，<p>标签之前会很好）你可以设置src属性为你喜欢的图片。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head> 
	<body>
	  <h1>哈哈哈哈哈</h1>
	  <img src="http://p1.so.qhimgs1.com/t0106398579eead9c6d.jpg">
	  <p>一张照片胜过千言万语</p>	  
  </body> 
</html>

结果：

链接

现在仅仅只有一个问题：你的网页看起来像一个没有门的房子，它没有任何进去或者出去的路！我们会通过添加几个链接来解决这个问题。

一旦你成功地添加你的链接和点击运行后，你就已经全部搞定了！陶醉在新创建的网页的自豪中。

如果你看起来它不美观，不漂亮。那是因为它还是很基本的，别担心，我们会教给大家CSS，这样你的页面会看起来更加敏锐，更加漂亮。

在你的页面最少添加两个链接。您可以打开图像或为文本链接，你甚至可以在<P>标签内插入一个链接！

练习题：

<!DOCTYPE html>
<html>
  
	<head>
  
		<title>这是一个普通的网页</title>
	</head>
  
	<body>
	  <a href="http://www.baidu.com">这是我常用的搜索引擎哦</a>
	  <p><a href="http://www.fenby.com">这是一个不错的学习网站，点击试试</a></p>
	  <p><a href="https://blog.csdn.net/weixin_34727238">我是在段落里面的链接</a>哈哈哈这是一个段落</p>
  
  </body>
  
</html>

结果：

回顾与介绍

接下来我们继续学习更多的HTML知识。你已经知道了如何设置<head>和<body>标签，如何设置标题和段落，以及如何添加图片和链接。

在这个课程里，我将学习下一个级别的内容：

a. 有序和无序列表
b. 改变字体大小，颜色和类型
c. 改变背景颜色
d. 对齐文本

说明

让我们先热身下，创建一个title在head里面。
在body里面创建一个段落，你可以随便写你喜欢的内容在段落里面。

练习题：

<!DOCTYPE html>
<html>
	<head>
  <title>
	网页必须花时间制作
	  </title>
  </head>
  
	<body>
	  <p>夏代有工的玉，后海有树的房子，此时此刻的云，二十来岁的你，都是世间可遇不可求的事情。</p>
	</body>
</html>

结果：

代码格式

现在是一个规范代码格式的好时机，也就是说，每一行代码的缩进要有一定的比例。你会发现，如果我们把标签嵌套在标签里面，并且保持代码的缩进，这样做确实有助于使你的代码更加易读！

尝试按照练习的缩进风格，这样当你编写HTML的时候，你就不会感到很难去理顺代码，这样可以很清晰的去理解代码。

练习题：

<!DOCTYPE html>
<html>
	<head>
  
		<title>我实在不知道练习这么多的意义</title>
  
	</head>
	<body>
	  <h1>我想写一些很大的字
	  <p>这是专属大字的段落
	  </p>
	  </h1>  
       <p>感觉我还停留在最开始的阶段，真的好尴尬
	   </p>
	</body>
  
</html>

结果：

有序列表

现在我们学习怎么去创建有序的列表。一个有序的列表不仅仅是一个编号的开始，如下面所示：

在8行我们开始写<ol>标签。
在9-11行我们把<li>和</li>标签写进去。
因为每个产品都占一行，所以把它们放在每个不同的元素里面。
在12行，我们要添加结束</ol>标签。

现在可以在HTML正文中使用有序标题和段落。

说明

在14行，创建一个名字叫美食的标题，然后用<h2>修饰；
在15行，创建一个有序列表的<ol>；
你的有序列表应该有3个不同的标签。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>Lists</title>
	</head>
	<body>
		<h1>我喜欢的东西列表</h1>
		<ol>
			<li>玫瑰上的雨滴</li>
			<li>加菲猫</li>
			<li>亮闪闪的钻石</li>
			<li>温暖的羊毛手套</li>
		</ol>
	    <h2>我喜欢的美食</h2>
	    <ol>
		      <li>凉皮</li>
		      <li>红薯</li>
		      <li>板栗</li>
		      <li>酸奶</li>
		      <li>旺仔</li>
	    </ol>
		
	</body>
</html>

结果：

无序列表

我们只是学会了如何创建有序列表，但是如果列表顺序不重要，我们只是想要一个点呢？

<h2>冰淇淋的主要成分</h2>

<ul>

    <li>冰</li>

    <li>奶油</li>

</ul>

首先我们写一个<ul>标签；
因为我们要添加到列表中的每个项目，我们使用一个<li>标签；
别忘记结束标签。

说明

在<body>标签里面，创建一个<h1>标签，标签内容为：“一些随想”；
在<h1>标签下面创建一个用<p>标签的段落，介绍一下你的一些想法；
最后创建一个无序的列表用<ul>标签，其中包含你的想法列表。每一个想法都应该单独放在每个<li>里面。

练习题：

<!DOCTYPE html>
<html>
	<head>
      
		<title>无序列表</title>
	</head>
  
  <body>
	<h1>一些随想</h1>
	<p>应该做到的事情</p>
	<ul>
	<li>早睡</li>
	<li>早起</li>
	<li>多多锻炼</li>
	</ul>
  </body>
	  
</html>

结果：