认识网页的长相和背后的代码 - HTML、CSS
120021. 本课介绍
在这节课中，你将通过直观的实例和动手操作，认识网页是如何做出来的。通过学习，你会了解构成网页的基础代码：HTML和CSS。
在这节课里，你也会学习编程的一个重要技能：阅读文档。通过阅读菜鸟教程等网站上相关的文档以及动手尝试，你会学习如何编写HTML和CSS的代码，做出自己的网页文件。
2. 认识网页
首先，打开菜鸟教程的网站，我们可以直观地看到一个网页页面的长相：
任何一个网页页面，它的长相基本上都是由以下几个要素决定的：
- 网页的内容，例如：文本、图片、数据等等
- 网页内容的样式，例如：颜色、字体、大小等待
- 网页内容的布局
这些要素的排列组合，就形成了我们看到的各式各样的网站。
3. 认识网页长相背后的代码：HTML和CSS
网页页面的长相是由HTML和CSS这两种代码决定的。
我们可以通过Chrome浏览器的开发者工具来查看网页背后的代码：
- 在浏览器里打开菜鸟教程网站，在页面上用右键点击，选择"查看网页源代码"，这会打开当前页面的源代码
上下滑动一下新打开的源代码，快速浏览一下大致内容。你会看到很多成对出现的尖括号
<>，这就是HTML代码。一对<>和</>表示一个HTML的标签。你也可能会看到由
<style>和</style>标签包住的一大段代码，这就是CSS代码。
什么是HTML：
HTML是构建网页内容的基础。它由一系列的成对出现的标签<>和</>组成，可以决定一个页面的内容，它是一种模板语言。
通过使用不同的HTML标签，我们可以在页面上创建标题、段落、链接、图像、表格等各种内容。例如：
<h1>标签用于定义一个一级标题<p>标签用于创建一个段落<a>标签用于创建链接。
什么是CSS：
CSS用于控制网页的样式和外观，包括布局、背景、颜色、图片位置和大小、字体样式和大小等。
CSS的几个常用的用法：
color用于设置颜色margin用于设置边距heigt、width用于设置高度、宽度
浏览器用HTML、CSS显示页面：
一个网页的长相就是由HTML和CSS一起决定的。浏览器可以理解这些代码，并且按照代码指定样子把这个网页展示出来。
接下来，我们会通过阅读相关的文档，来学习HTML和CSS的具体用法。
4. 学习阅读HTML和CSS的文档
阅读文档是编程的必备技能，学会阅读文档可以让你学起编程来事半功倍。
阅读文档，最首要的目标是建立知识框架，然后从中找出重点概念，再去理解重点概念的内容，一边读文档，一边动手尝试写一写、看一看，就可以快速掌握所学内容了。
我们使用菜鸟教程上的文档为例，带你学习如何阅读文档。
如何阅读文档网站的首页：
浏览一下菜鸟教程的首页：https://www.runoob.com/ 。你会看到什么？
- 页面上方的菜单栏
- 页面左侧的左边栏
- 页面主体部分
以上三部分内容，列出了菜鸟教程网站提供的主要课程，这就是整个菜鸟教程网站的框架。
如何阅读专题教程的文档：
打开页面上的“【学习 HTML】”，进入HTML的文档：https://www.runoob.com/html/html-tutorial.html。你会看到什么？
- 页面上方的菜单栏：显示了菜鸟教程上的主要课程种类。
- 页面左边栏：HTML教程的主要学习内容
- 页面主体部分：学习内容的具体讲解。
我们可以看出来，页面左边栏，就是教程的知识框架。上下滑动快速浏览一下，对各个题目能够有个初步印象，你就建立了HTML的知识框架。
点击左边栏里的“HTML 简介”和排名靠前的几个标题，浏览一下学习内容。这些就是HTML中的重点概念。
在学习内容中，你会看到有些章节有“尝试一下”的在线实例。点击“尝试一下”按钮，在线上尝试修改HTML代码，看看修改前后的效果。这会帮助你理解对应的学习内容。
自己阅读CSS文档：
这就是读文档的基本方法。按照上面的方法，你可以尝试自己阅读一下CSS的文档：https://www.runoob.com/css/css-tutorial.html
5. 在菜鸟教程上的动手操作HTML和CSS的用法
上面介绍了阅读专题教程文档的方法，另外就是要动手操作，动手操作是学习编程重要的学习方法。我们通过尝试菜鸟教程的线上的示例，来学习一下怎样使用这些HTML标签：标题、段落、链接，
打开菜鸟教程段落
点击“点击运行”按钮，右边出现的<p></p>标签里面包的字，这就是浏览器能看到的内容。通过这线上实例操作的方法，我们再把从文档中<h1> <a>里标签的写的内容复制到左边编写代码的地方，尝试一下<h1> <a>标签的用法。
点击"点击运行",你会看到增加了标题文字"这是标题 1"、"菜鸟教程的链接"，这两部分新的内容，所以用HTML标签可以构建页面的内容。
在 <a href="https://www.runoob.com">访问菜鸟教程! </a>中， 你看到 href="https://www.runoob.com" 包在<a>的里面， href：表示属性，它为链接标签<a>指定目标网址，这HTML的常用写法，用属性提供附加信息。
用同样的方法尝试一下CSS属性的写法，颜色color，边框border，宽度width
例如：打开颜色color，点击“点击运行”按钮
发现"这是标题 1"颜色变成了绿色，CSS属性h1 {color:#00ff00;}写在<style></style>标签里面，就能够改变标题的颜色，所以CSS可以控制样式和外观的。
我们通过动手操作直观的学到了HTML和CSS的用法。
6. 项目：动手做一个最简单的网页。
经过上面的学习，你已经对HTML和CSS的代码有了认识，现在尝试动手做出自己的网页。
打开VSCode软件，左上角点击“文件”，选择新建文件，创建HTML文件，注意这里文件后缀为.html, 文件名是hi.html，保存到这一课的文件夹里，
复制下面的代码，
<body>Hellow World</body>
在编辑区里面粘贴，然后保存文件。
用浏览器打开hi.html，页面是这样的，这就是一个最简单的网页：
通过编写最简单的网页，你学会了使用Vscode编辑代码，下面的课程会常常用到这个方法。