HTML基本结构
1、导学
通过前面课程的学习，我们已经了解了关于网页设计中的一些常见的概念，那么从这节课开始，我们就要学习关于HTML的内容。
在这节课程中，我们会来学习一下HTML的整体结构，为什么要学习整体结构呢？因为，以后编写的每一个网页，
它们的整体结构都是一样的，所以说这块内容是非常重要的。
学习了整体结构以后，我们还需要了解标签的书写规范，在前面的课程中我们讲解过,学习HTML,其实就是学习
HTML中的标签，那么在书写这些标签的时候，需要怎样的书写规范，或者说需要注意哪些问题呢？我们会在这节
课中详细讲解。
要想快速的编写HTML代码，提高网页的开发效率，我们还要学习一款非常牛逼的工具，叫做VSCode. 我们要学
习一下怎样通过这款工具来编写网页。
好了，了解了这节课我们要讲解的内容以后，下面，我们看一下这节课的学习目录。
2、学习目标
在这节课中，需要你做到以下几点：
第一：能够说出标签的书写规范以及注意事项
第二：能够写出HTML骨架标签
第三：能够使用VSCode工具开发网页
第四：能够说出标签语义
了解了以上学习目录以后，下面我们先来学习一下HTML标签书写规范。
3、HTML标签语法规范
3.1 网页文件创建
在讲解标签的具体语法规范前，我们首先要创建一个网页文件。说到文件，首先我们想到的就是文件都是有类型的，也就是都有扩展名。例如，记事本文件，它的扩展名为 ‘.txt’.
那么网页文件的扩展名是什么呢？
网页文件的扩展名为:'.html' 或者是'.htm'。所以，你以后看到以'.html'或者是'.htm'结尾的文件，就知道这是网页
文件，那么我们可以通过浏览器打开这样的文件，来查看具体的网页内容。
当然，在创建网页文件的时候，你要注意，不能随意的创建。也就是说，不能随意的在桌面创建一个网页文件，或
者是在D盘或者C盘创建一个网页文件。为什么呢？ 你可以考虑一下，我们一个网站会有很多的网页文件，如果你
随意创建，那么后期会变得非常难管理。那应该怎样做呢？我们可以在桌面，或者D盘，E盘中，首先创建一文件
夹，然后将我们创建的网页文件都放到这个文件夹中统一的进行管理，这样后期即使是文件特别多，也会很容易的
进行管理。
下面，我在我电脑的桌面上新建 一个文件夹，叫做‘MyWeb’.后面创建的网页文件，都放在该文件夹中进行管理。
当然，这个文件夹的名字，你可以根据你的要求自己进行命名。
创建好文件夹后，进入该文件夹，在这个文件夹中首先创建一个文本文件，也就是扩展名为'.txt'的文件，文件的名字你可以随意命名，我这里叫做'index.txt'.
如下图所示：
编辑
添加图片注释，不超过 140 字（可选）
注意：我们前面讲过，网页文件的扩展名为:'.html'或者是'.htm'. 所以，下面需要对创建的文件改变其类型，最终
修改后的结果如下图所示：
编辑
添加图片注释，不超过 140 字（可选）
可以看到，修改完成文件的扩展名后，文件名前面会有一个浏览器的图标，说明我们现在的创建的文件就是一个网
页文件了。下面，你可以双击它，这样就会通过浏览器打开这个文件，当然，打开后，发现什么内容也没有，因为
现在我们还没有向网页中添加任何内容。那么，怎样向网页文件中添加内容呢？
关于这个问题，我们下一小节中继续讲解。
总结：在这一小节中，需要你掌握的有两点。
第一点：网页文件的扩展名为:'.html' 或者是'.htm'
第二点：通过文件夹来管理我们所创建的网页文件。
3.2 标签语法规范
在上一小节中，最后我们提出了一个问题，怎样向网页文件中添加内容？
选中‘index.html’文件，右击，在弹出的快捷菜单中，选择‘打开方式’----‘记事本’。
如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
打开 ’记事本‘后，就可以在记事本中编写HTML标签了。
当然，在写标签时是有一定的规范要求的。
第一：所有的标签都包含在一对尖括号中。
第二：标签一般情况下都是成对出现的，这种情况我们叫做’双标签‘。
如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
在书写标签的时候，还要注意：尖括号是在英文状态下输入的，同时还要注意 一下结束标签，结束标签是有一个’斜杠‘，这一点一定要注意。
第三：在HTML中，也有单个的标签，这种情况我们叫做’单标签‘
编辑切换为居中
添加图片注释，不超过 140 字（可选）
注意：上面写的单标签，也是用’斜杠‘结束，并且和标签名之间用空格进行分隔。
当然，在HTML标签中，单标签是非常少的，在后面的课程中，会进行重点强调。
好了，关于这一小节的内容，我们就学习完了，是不是非常简单啊，下面我们来做一个总结。
在这一小节中，重点掌握的就是标签的语法规范了。
第一：HTML标签是由尖括号包围的关键词，例如：
第二：HTML标签通常是成对出现的，例如和,我们称之为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
第三：有些特殊的标签必须是单个标签,当然这种情况比较少，例如 我们称之为单标签。
3.3 标签关系
在上一小节中，我们学习了在书写标签的时候要注意的规范，这小节我们来学习一下关于标签的关系。
在HTML中，双标签的关系可以分为两类：包含关系和并列关系。
下面，我们先来学习一下：包含关系。
如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
通过，上面这张图，我们可以理解所谓的包含关系指的就是：在一个标签中再包含另外一个标签，或者你可以理解成就是标签的嵌套. 例如，上图的标签是嵌套在标签的内部的，也就是标签与标签是父子的关系。
编辑
添加图片注释，不超过 140 字（可选）
理解了包含关系以后，下面我们来学习一下并列关系。如下图所示：
编辑
添加图片注释，不超过 140 字（可选）
通过上图，我们可以发现标签与标签是并列的，并不是包含的，像这种情况，我们称之为’并列关系‘。在这里你也可以把这种并列关系理解成兄弟关系，就像’熊大与熊二‘。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
理解了标签的关系后，思考一个问题，说出以下各个标签之间的关系。
<html>
<head>
</head>
<body>
</body>
</html>
在这你可以说一下标签，标签，标签它们之间的各个关系，是不是很简单啊！
关于这一小节的内容，在这我们就学习完了，最后做一个简单总结。
在这一小节中，主要学习了关于双标签的关系。关于双标签的关系可以分为两类:
第一：包含关系
第二：并列关系
在这需要你理解这两类关系。
4、HTML整体结构
在前面的内容，我们说过每个网页的整体结构基本上都是一致的。也就是每个网页都会有一个基本的结构
标签，也称之为骨架标签，页面内容也是在这些基本标签上进行编写的。
下面，我们来看一下整体的结构标签，如下所示：
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
学习线上编程，就来博学谷。
</body>
</html>
通过上面的代码，我们可以看到标签是最大的标签，它包含了所有的标签，所以也称之为根标签。
标签是页面的头部标签，如下图所示的为头部标签所表示的区域。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
在标签的内部还有一个标签。 标签：表示的是网页的标题或者文档的标题（HTML网页也可以称之为HTML文档），它可以让页面拥有一个属于自己的网页标题。如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
标签：该标签表示的是文档的主体，它里面包含了文档的所有内容，页面内容基本都是放到body标签里面的，也就是页面中显示的内容都是放到body标签里面的。如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
理解了整体的结构标签后，下面我们可以将如下的代码，通过记事本工具写到我们前面所创建的’index.html‘文件中，写完以后一定要记得保存啊!! 保存完后，就可以通过浏览器打开该文件进行查看了。
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
学习线上编程，就来博学谷。
</body>
</html>
上面的代码，通过浏览器的解析后，出现的效果如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
如果出现了以上的效果，那么恭喜你，你写的HTML代码是完全正确的。
其实，通过这个例子，我们更能深刻的体会出我们前面所学习的一段内容：
HTML文档的后缀名必须是以.html或者是.htm结尾，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
在这里，我们对这句话是不是有了更加深刻的体会啊！
下面，我们在通过一张图，来加深一下对整体结构标签的理解。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
关于这一节的内容，在这我们就学习完了，下面我们通过一张表格将这一小节的内容来做一个总结。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
关于上面表格中列举出来的每个标签的作用一定要能够理解，同时还要记住它们之间的层级关系。
当然，为了能够熟练掌握这一小节的内容，必备的练习是不可缺少的，所以一定要将对应的代码敲一下。
5、网页开发工具
5.1 VSCode安装
在前面学习的过程，我们编写了我们的第一个网页，那么在编写这个网页的时候，我们使用了什么工具呢？
回答的非常好，是记事本工具。
那么，你可能会问了，除了记事本工具以外，还有没有其他的一些工具可以用来编写网页呢？
答案是有的，下面我们就来看一下，还有哪些编写网页的工具。
如下图，列举出了开发网页常见的工具
编辑
添加图片注释，不超过 140 字（可选）
从左上角开始，依次为：Dreamweaver, Sublime, WebStorm, HBuilder , VSCode( Visual Studio Code )
这么多的工具，我们都要学习吗？
不是的，我们只是学习一款工具就可以了，因为其他工具的使用方式都是差不多的，你会了一款工具，其他的工具你也就会了。
在这，我们学习的工具是VSCode工具，因为这款工具在前端开发中使用比率是非常高的。
下面我们就来学习一下这款工具。
首先，我们需要先下载安装。
在浏览器中输入： code.visualstudio.com
会打开对应的VSCode官网，如下图所示，在该网站中根据自己的系统情况，选择合适的版本进行下载。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
下载完成后，就可以进行安装了，下面我们以Windows系统为例，来讲解一下对应的安装过程。
1、找到所下载的安装程序
编辑
添加图片注释，不超过 140 字（可选）
2、双击，选择安装位置。
如下图所示，可以根据自己的情况，将VSCode安装到磁盘的某个目录下。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
确定好安装位置后，单击’下一步‘，出现如下窗口
直接单击下一步，会出现如下的窗口。
3、选择其他任务
编辑切换为居中
添加图片注释，不超过 140 字（可选）
创建桌面快捷方式：把这一选项选中后，会在电脑的桌面上出现VSCode的图标，双击后会直接启动VSCode，非常的方便，所以建议选中该项。
下面再看如下两项：
【将“通过code 打开“操作添加到windows资源管理器文件上下文菜单 】
【将“通过code 打开”操作添加到windows资源管理器目录上下文菜单 】
选中以上两个选项后： 可以对文件，目录点击鼠标右键，选择使用 VScode 打开。
建议将这两个选项选中，因为你可以考虑一下，在前面的学习中，我们知道为了对网页文件管理方便，我们是把网页文件都放到一个文件夹中了，如果我们现在想用VSCode这个工具对网页进行编辑，那么我们可以对该文件夹右击，那么在弹出的快捷菜单中，直接选择使用VSCode打开，这样的话，该文件夹中的所有文件都被VSCode打开了，可以直接进行编辑，非常的方便。
【 将code注册为受支持的文件类型的编辑器 】
如果选择了该项， 默认会使用 VScode 打开诸如 txt,py 等文本类型的文件，但是，我们一般情况下打开文本文件会使用专门的文本工具，例如：记事本工具等。所以， 一般建议不勾选 该项。
【 添加到PATH（重启后生效） 】
这步骤默认的，勾选上，不用配置环境变量，可以直接使用。
确定了以上选项的内容后，可以直接单击 ‘下一步’。
会出现如下的窗口
4、完成安装
编辑切换为居中
添加图片注释，不超过 140 字（可选）
在上面的窗口中，直接单击【安装】按钮，开始进行安装操作,这时会进入正在安装的状态，如下图所示，这时我们只需要等待一段时间就可以了。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
5、配置
经过以上的步骤，VSCode就安装好了，启动以后你会发现整个VSCode 显示的是英文，如果想显示中文，需要安装中文语言包。安装过程如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
按照上图，提示的步骤顺序(注意：第三步要点击'install'按钮后，才进行安装)，就可以完成中文语言包的安装。
其实，在以后的开发过程中，我们经常会用到一些其它的包或者插件，那么安装这些包或者是插件的流程是一样的。其实，这也是VSCode的这款工具的强大之处，通过安装一些插件或者是包，可以极大的提高我们的开发效率，关于这一点，随着不断的学习，你会有比较深刻的体会。
安装好中文语言包以后，整个VSCode界面显示的就是中文了，如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
到此为止，VSCode我们就全部安装配置好了。
整个安装过程比较简单，你可以安装上面的步骤，在自己的电脑中，将VSCode进行安装。
安装好后，下面我们就可以体验一下这款工具的强大之处了。
5.2 使用VSCode开发网页
打开VSCode,首先要做的就是新建网页了，如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
可以选择，“文件”菜单---“新建文件” ，也可以选择右侧的‘欢迎使用’窗口中的'新建文件'。
当单击了，新建文件按钮后，会出现如下的文件。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
注意：这时只是创建了一个文件，还没有对该文件进行保存。所以，在写代码之前先来保存一下该文件。
可以选择‘文件’菜单中的‘保存’命令，或者是按下Ctrl+S这个快捷键来进行保存。
这时，会出现如下图所示的‘文件另存为’对话框。
编辑切换为居中
添加图片注释，不超过 140 字（可选）
在‘另存为’对话框中，第一步，我们首先确定文件保存的位置，这里我们还是保存到桌面下的MyWeb这个文件夹。
第二步：给网页文件起一个名字，注意扩展名为".html"或者是".htm".
第三步：单击‘保存’按钮。
经过以上三步，完成了文件的保存操作。
下面，我们就可以在这个文件中编写代码了，现在我们把前面刚刚学习的，HTML整体结构的代码写一遍。
你还记得吗？
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
学习线上编程，就来博学谷。
</body>
</html>
写完以后，怎样查看运行的效果呢？
编辑切换为居中
添加图片注释，不超过 140 字（可选）
在VSCode编辑器中，右击文件名，从弹出的快捷菜单中，选择'打开默认浏览器'，就可以打开浏览器，浏览网页了。
学习到这里，我相信你可能会有这样的一个疑问？
使用，VSCode 开发网页与使用记事本开发网页，有什么区别呢？
区别比较大的一点就是，使用VSCode开发，效率比较高。
下面，咱们来体验一下：
你可以再新建一个网页文件，然后将其保存。保存好以后，不要着急写代码，而是在英文输入法状态下，输入一个叹号(!),如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
当输入完叹号以后，就会弹出一个提示框，在提示框中用户鼠标单击第一个叹号，会自动生成如下的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
通过以上的代码，可以发现整体的HTML结构骨架代码，全部自动生成了，不需要一点一点的手敲了，下面要做的
就是，在title标签中输入自己想要的网页标题，在标签中输入具体的内容就可以了。
是不是非常的方便！！
下面赶紧尝试一下吧！
关于这一小节的内容，在这我们就学习完了，下面我们来对这块内容做一个总结。
第一：我们先学习了关于VSCode的安装，关于这块内容，可以根据相应的安装步骤，在自己的电脑中将VSCode安装一下就可以了。
第二：关于VSCode的使用
- 双击打开软件
- 新建文件，可以选择‘文件’菜单‘新建文件’命令进行创建，也可以按下Ctrl+N这个快捷键
- 保存(Ctrl+S),注意一定要将文件保存为.html文件
- 快速生成页面骨架结构，输入叹号(!),然后用鼠标点击或者是按下Tab键。
- 可以右击编辑器中文件名称，在弹出的快捷菜单中选择“Open in Default Browser ”,来浏览网页。
6、DOCTYPE与字符集
在上一小节中，我们学习过使用一种快速的方式，可以生成整个HTML的骨架代码，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
我们可以看到，自动生成的代码，与我们前面自己写的代码还是有一定的区别的。自动生成的代码中，多了一些内容，那么下面我们来学习一下这些内容，看一下它们的作用是什么？
在这、我们先来学习以下三点，其它内容会在后面的课程中继续学习。
第一：标签
第二：lang语言
第三：charset字符集
首先，先来学习一下标签
:表示文档类型声明标签，位于文档的最前面，用于向浏览器说明当前文档中使用哪种HTML版本来显示网页。HTML的版本是比较多的，如下表格所示：
从初期的网络诞生后，已经出现了许多HTML版本:
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
如下声明
<!DOCTYPE html>
表示的就是当前网页采用的是HTML5来显示网页。
了解了标签的作用后，下面学习一下，lang语言
如下代码所示：
<html lang="en">
在html标签中多了一个lang="en",那么这块内容是什么含义呢？
lang:表示语言的意思( language )
en: 表示的是英文。
整体的含义就是：用来定义当前文档显示的语言，那么在这指定的是英文。
lang除了指定英文以外，还可以指定哪么语言呢？
lang="zh-CN" :表示定义的语言为中文。
当然，在这可以指定很多种语言，目前来说，我们记住中文与英文的这两个就可以了。
如果lang="en" 我们可以简单的理解为当前网页为英文网页，lang="zh-CN" 表示当前网页为中文网页。
其实对于网页文档来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
那么，lang属性有什么作用呢？
对浏览器的作用：就是一个提示与警示的作用。
例如，现在将 lang 的值修改成fr. fr表示的是法文，也就是当前网页为法文的网页，但是当前网页中并没有法文的内容。具体代码如下所示：
<!DOCTYPE html>
<html lang="fr"> <!--这里将lang的值修改成了fr-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>博学谷</title>
</head>
<body>线上学习，就来博学谷</body>
</html>
现在，用浏览器打开该网页，查看 具体的显示效果。效果如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
通过上图，可以看到，在浏览器的右上角，给出了一个提示框，单击‘选项’按钮，会给出一个提示，询问是否‘翻译成法语’。
因为我们指定的lang=fr,而当前的网页中没有法语，所以会给出这样的提示。
现在，你可以自己尝试一下，将lang的值修改成fr,在浏览器中打开网页，看一下是否会有如上的提示。
而我们现在，做的网站都是中文的网站，所以建议将 lang 的值定义为zh-CN.
charset字符集
下面，我们再来看一下如下的代码：
<meta charset="UTF-8" />
charset:表示的是字符集。
UTF-8:表示的是字符集中的一种。
那么什么是字符集呢？
字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
我们知道，网页中有很多的文字，而这里需要将这些文字存储到计算机中，所以需要按照一定的方式来存储这些文字。
charset的取值除了有UTF-8 以外，还有很多的取值，例如：GB2312 (表示的是简体中文)，BIG5(表示繁体中文)，GBK（包含了简体中文与繁体中文）等。
现在，使用最多的就是UTF-8 ,被称之为‘万国码’，基本上包含了全世界所有国家需要用到的字符。
UTF-8带来的好处就是外国人访问我们的网站的时候，不会出现乱码。
最后需要你注意的是：
<meta charset="UTF-8" />
这行代码是必须要写的代码，如果不写,网页有可能会出现乱码的情况。同时，还需要注意写法，这里统一写成UTF-8，不要写成utf8或者是UTF8
关于这一小节的内容，在这我们就学习完了，下面对这块内容做一个总结
: 表示的是文档类型声明标签，告诉浏览器这个网页使用的是HTML5版本来显示网页。 :告诉浏览器这是一个英文的网站，本页面采取英文来显示。:这行代码必须要写，采用UTF-8来保存文字，如果不写可能会出现乱码。
7、标签语义
在【HTML基本结构】这节课程中，我们主要是学习了HTML的骨架标签，这些标签并不是特别的难。在后期的课程中，我们会学习大量的标签，在学习这些标签的时候，是有一定的技巧的。
重点是：要记住每个标签的语义，简单的理解就是指标签的含义，即这个标签是用来干什么的，例如这个标签是换行的，还是让文字分段落的，等等。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面的结构更加的清晰。
如下图所示：
下面这张图中展示的网页内容，是没有添加语义标签的。那么你在阅读下面这篇文章的时候，是不是感觉非常的吃力，非常的不方便啊！！
编辑切换为居中
添加图片注释，不超过 140 字（可选）
下面我们在看给网页添加了语义标签后，展示出的效果，如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
我们可以看到，同一篇文章添加了语义标签后，整体的结构变得非常的清晰，而且阅读起来也非常的方便，用户体验非常好。
那么在这我们会想，上面这篇文章，我们添加了哪些语义化的标签呢？
首先，第一行文字，表示的是文章的标题，这里就是添加了 ‘标题标签’。
然后，文章内容是要分段的，所以这里添加了‘段落标签’。
所以，通过以上的内容，我们可以总结出：学习HTML标签，一定要理解标签的含义，并且在合适的地方添加合适的标签。例如，需要给文章指定标题，就要用到标题标签，给文章分段就要用到段落标签，这样可以让网页的结构变得更加的清晰。
8、总结
恭喜你！你已经学习完了【HTML基本结构】这节课的内容了，下面我们这节课的内容，做一个简单的总结，
如下图所示：
编辑切换为居中
添加图片注释，不超过 140 字（可选）
