为什么要学习html？
你看到的每一个网页都是由HTML来写的，HTML是网页的框架。在这门课程中，我们将使用HTML的段落，标题，图片和链接等元素来创建一个网页。
练习题：
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<strong>一只洒鹿，欢迎学习html！</strong>
</body>
</html>结果：
html和css的关系
HTML代表超文本标记语言。超文本是指“在里面有文本和它的链接”。任何时候你点击一个标记，字母或汉字等，如果你点击的是超文本链接，那么它会带你到一个新的网页！
HTML不是一种编程语言，而是一种标记语言，是用来做文字标记的语言：
它可以把文字转换成图像、链接、表格、列表等等。
是什么使网页变的更漂亮些呢？那就是CSS - Cascading Style Sheets。翻译过来就是层叠样式表。你可以把它想象成皮肤和化妆品，会覆盖到HTML上。我们先学习HTML，大家担心的CSS会在HTML后面的课程里面介绍到。
我们要做的第一件事情就是设置页面的框架结构。
a. 通常我们把<!DOCTYPE html>是在第一行，它会告诉浏览器它是什么语言，以什么语言方式去读取它，在这里是HTML。
b. 我们也经常把<html>放在下一行，它表示一个HTML文档的开始。
c. 我们经常把</html>闭合标签放在最后一行，它表示一个HTML文档的结束。
d. 我们经常把<head></head>放在<html>与</html>中间，而<head></head>的中间会放一些头部信息(以后会详细讲述)
e. 我们还经常把<body></body>放在<head></head>这组标签的下面，当然也还是在<html></html>标签的里面，我们会把想要在网页上表达的内容写在<body></body>中间！
练习要求：
- 现在测试文件是一片空白的，把刚才上面讲诉的三行代码写入文件。
- 在
<html>和</html>标签之间，你可以随便写下你自己喜欢的任何信息。
练习题：
<!DOCTYPE html>
<html>
<head></head>
<body>你所浪费的今天是昨日逝去之人永远到不了的明天</body>
</html>结果：
待解决问题：
放入头部的文字也会在网页上有所显示，没有写标题，对head的定义清晰。
基本术语
在学习更多的HTML知识之前，我们必须要学习HTML一些基本术语，学习完成后，我们将会用到很多的<>标签。
- 在
<>里面的元素，我们称之为标签。 - 标签会跟最近的一个闭合标签互相构成一对。
<html>就是一个打开的标签。</html>就是一个关闭的标签。
像下面的例子，最近的标签应该是第一个进行关闭的。
<first tag><second tag>一些文本内容!</second tag></first tag>
最后的练习教我们如何建立我们的HTML文件。我们现在所需要写的一切都在<html>和</html>之间。
说明：
- 把
<!DOCTYPE HTML>放进去第一行。 - 把
<html>和</html>写进去。 - 在
<html>之间，你可以写任何喜欢的信息。 - 运行代码后，你会看见你写的信息出现在页面。
练习题：
<!DOCTYPE HTML>
<html>
<head></head>
<body>
hhhhh
</body>
</html>结果：
编写头部信息
在我们的HTML文件中，一切内容都会出现在<html>和</html> 这一对标签中间。
在HTML文件中，会有两个部分组成：头部和身体部分。我们下面开始学习头部。
头部包含你的HTML文件的信息，像它的标题，这个标题就是我们在浏览器的标签栏看见的。
下面我们将添加头信息和标题到我们的页面。
- 添加
<head>和闭合的</head>标签在页面。 - 在
<head>标签中间添加<title></title>标签。 - 在你的网页里的
<title>标签中写上一个标题，例如“我的第一个网页”。
练习题：
<!DOCTYPE html>
<html>
<head><title>好好学习，天天上班</title></head>
<body>hello html
</body>
</html>结果：
在body里面的段落
一个HTML文件包含头<head>和身体<body>。头部就相当于你的HTML的介绍，就像它的标题一样。
身体部分就是你的内容，就像是文本，图片，和链接。在body里面写什么内容，那么就会显示你所写的内容在实际的页面。
Body在<html>标签里面，<head>标签之后。例如：
<html>
<head>
<title>我的网页</title>
</head>
<body>
</body>
</html>说明
- 在
</head>标签之后，写下<body></body>标签，就像上面例子里面写的。 - 在body里面，创建两个段落。一个段落以
<p>开头，并且以</p>结束。我们可以在<p>标签里面写点内容。
<body>
<p>Hello world!</p>
</body>练习题：
<!DOCTYPE html>
<html>
<head>
<title>
这是一个网页
</title>
</head>
<body>
<p>不知道应该说点什么</p>
<p>大家好 我是第二行 我也不知道应该说什么</p>
</body>
</html>结果：
段落与标题
到现在为止，我们确实已经取得了很好的进步。我们了解何时以及为什么要使用HTML。我们还学习了其他内容：
- a. 设置了标签的HTML文件
- b. 页面标题（
<head>标签里面） - c. 增加两个标签段落（
<body><p>）
现在我们先学习<h1>标签。它会使标签里面的内容变得很大。下一步我们将使用标题标签。
说明：
- 首先在body中创建一个
<h1>标签。 - 添加内容。
- 把
<h1>标签关闭掉（你的内容必须在<h1></h1>中）。 - 在标题标签后，创建两个段落并使用
<p>标签，你可以随便填写你喜欢的内容。
练习题：
<!DOCTYPE html>
<html>
<head>
<title>
标题和段落
</title>
</head>
<body>
<h1>大家好，我是大标题标签<h1>
<p>第一段前来报道</p>
<p>第二段前来报道</p>
</body>
</html>结果：
待解决问题：
第二行第三行的字体大小和h1的大标题标签一样大
更多关于标题的信息
HTML实际上可以设置标题很多种大小。它有6种标题的大小，<h1>是最大的老板，而<h6>是最最弱小的。
· <h1> - 首席执行长官
· <h2> - 副总裁
· <h3> - 董事
· <h4> - 中层管理人员
· <h5> - 卑微的助理
· <h6> - 给大家倒咖啡下面的练习我们会要求你添加不同大小的标题。你可以随意写任何你喜欢的标题！
练习题：
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<h1>首席执行官</h1>
<h2>副总裁</h2>
<h3>董事</h3>
<h4>中层管理人员</h4>
<h5>助理</h5>
<h6>给大家倒咖啡</h6>
</body>
</html>结果：
使用每一个标题
鉴于有6个大小不同的标题，那我们索性一次性把它们都使用在页面上。
说明
- 添加更多的标题代码，创建
<h2><h4>和<h6>，必须确保所有的标签都正常关闭。 - 在每个标题下面添加一个简短的小段落 。别忘记段落标签需要
<p></p>标签，必须是闭合的一对标签。
练习题1：
<!DOCTYPE html>
<html>
<head>
<title>这是一个新的页面</title>
</head>
<body>
<h2>你看出来了没，我是谁？？？ </h2>
<p>我是一个h2大小的段落</p>
<h4>现在猜一下我</h4>
<p>我是h4</p>
<h6>最后一位突然出现</h6>
<p>大家好，我是h6</p>
</body>
</html>结果1：
练习题2：
<!DOCTYPE html>
<html>
<head>
<title>这是一个新的页面</title>
</head>
<body>
<h2>你看出来了没，我是谁？？？ <p>我是一个h2大小的段落</p></h2>
<h4>现在猜一下我 <p>我是h4</p></h4>
<h6>最后一位突然出现<p>大家好，我是h6</p></h6>
</body>
</html>结果2：
中间休息
对前面学习的内容进行几点总结：
- HTML是网页的框架。
- 我们用浏览器打开HTML，浏览器经过渲染后告诉我们结果。
- HTML文件由一个
<head>和一个<body>组成， 就像人类一样。 - 在
<head>标签里面，我们拥有<title>标签，并且我们还使用它来定义了页面的标题名称。 - 怎么去创建标题和段落元素。
说明
- 在
<title>标签里面添加一个标题。 - 在body里面创建一个
<h3>的标签， 你可以写任意你想写的东西（只是别忘记关闭它）。 - 创建3个段落并完善它们(关于汽车，宠物，以及你喜欢去那个城市旅行等任何你喜欢的都可以填写)。
练习题：
<!DOCTYPE html>
<html>
<head>
<title>没有标题的网页</title>
</head>
<body>
<h3>不知道应该说点什么</h3>
<p>这个是第一段，第一段不知道要说点什么啊,关于汽车</p>
<p>这个是第二段，很想养一只猫咪啊</p>
<p>这个是第三段，想去嘉兴市</p>
</body>
</html>结果：
你想要去的地方
如果你想给用户发送另一部分的网站信息，或者跳转到其他网站，你可以使用超链接，或者短链接。
<a href="http://www.fenby.com">我喜欢的编程网站!</a>- 首先有一个
<a>标签，它有一个属性叫href你可以把你想跳转的页面或者网址填写到这里 http://www.fenby.com。 - 现在好了，你已经有一对
<a>标签，这个标签待会要去点击它。 - 最后关闭
<a>标签。
说明：
- 在
<body>里，创建一个链接。要做到这一点，你必须创建一个<a>标签。通过设置它的href属性来指向另一个网站。 - 添加你的链接描述。
- 最后把
<a>标签关闭。
练习题：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.baidu.com">我喜欢的搜索网站</a>
</body>
</html>结果：
点击文字可以进入百度。
添加图片
你可以将图片放入你的网站中，这样看起来会美观一些。
我们使用一个图像标记，如：< img >。这个标签跟别的标签之间的内容不太相同，你得告诉图片标签使用src属性。因为它没有结束标签，这也是跟其他标签不同的地方，关闭标签时是这样的：< img src = " url "/>。看src后面的网址或者链接，它就是图片地址。它告诉<img>标签，将会从哪里获取图片。
在网上的任何图片都有它的地址。只需在图像上单击鼠标右键，选择“复制图片地址”，然后粘贴在你的<img>标签里面。
练习题：
<!DOCTYPE html>
<html>
<head>
<title>这是一个新的界面</title>
</head>
<body>
<img src="http://cdnq.duitang.com/uploads/item/201503/28/20150328185339_LESyJ.thumb.700_0.jpeg"/>
<img src="http://i1.img.969g.com/pcgame/imgx2014/12/05/289_113844_b10ea_lit.jpg"/>
</body>
</html>结果：
点击图片（做一个图片链接）
现在你已经知道怎么去添加链接和图片在页面里。为什么不做一个图片链接呢？看例子：
<a href="http://www.fenby.com/">
<img src=""/>
</a>现在当你点击图片的时候会跳转到链接， 放置一个HTML标签在另一个内部被称为嵌套。
说明:
- 在body部分，添加
<a>标签。 - 选择一个网站指向你的链接。
- 现在创建
<img>标签在<a>标签里面 别忘记src属性。 - 最后关闭
<a>和<img>标签。
练习题：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="http://cdn.duitang.com/uploads/item/201402/12/20140212152507_RMJAA.jpeg"/>
</a>
</body>
</html>结果：
点击小鹿的照片就会进行跳转到百度的操作
图片和链接
说明：
- 在<body>标签里面，添加两个<img>标签。一个必须是链接，另外一个是普通图片。有链接的那个可以跳转到任何你想去的地方。
- 在这两个标签后，创建一个文本链接，它可以链接到任何你想去的网站。
练习题：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2463580678,2466416375&fm=173&app=25&f=JPEG?w=218&h=146&s=20E045A6027A0F98183124A903008013"/>
</a>
<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4273035335,1054539847&fm=173&app=25&f=JPEG?w=218&h=146&s=2561F004E6262707AC6C59910300C098"/>
</body>
</html>结果：
第一个图片点击之后就可以跳转到百度。