「本文共5353个字，预计阅读需要10分钟」

我们通过浏览器可以访问到各式各样的网页，那么这个访问过程是怎么实现的呢？

1. 服务器（服务端）相当于他人的电脑主机。说的再直白一点，服务区也就是一台主机，只不过这台主机不在我们眼前，而是在其他地方。如腾讯的服务器不可能在你家中运行一样。
2. 浏览器（客户端）相当于自己的电脑主机。能自己看得着摸得着的东西。

服务器和浏览器是通过HTTP协议进行交互的。我们只需要了解大概意思就行，目前的学习情况没必要深究。

HTML是HyperText Markup Language的英文简写，中文意思为超文本标记语言，看到语言二字，你应该明白，我们现在学的是一种语言，和中文语言、英文语言一样，HTML属于编程中的一个语言叫超文本标记语言。

存储HTML代码的文件是什么呢？正如我们的中文一样，需要通过嘴巴来述说，那HTML代码我们写在电脑的什么位置上才能在浏览器中运行？

答案就是写在后缀为.html的文件中，此时可能你会一脸懵逼，我们如何创建这个.html文件。下面我将举一个简单的案例来教大家创建.html文件。

首先在电脑空白处右键-新建记事本。

如果你发现的记事本没有.txt结尾。请打开任意一个文件夹-顶部菜单-勾选上文件拓展名。

现在我们只需要将.txt后缀名重命名为.html即可。

神奇的事情发生了，这个图案是不是很像网页的图标。

到此为止我们创建了一个html文件。

我们双击打开这个新建文本文档.html可以发现在浏览器中是一个空白页面，因为我们刚才创建txt文本的时候，并没有在里面编写html代码，所以打开的页面当然是空白的。

为了让大家明白我是真实打开这个文件，而不是互联网上的网址，我们可以通过箭头处发现这是一个本地文件的路径。

你是否会疑惑，我们每次写代码都需要修改.txt的后缀名为.html，然后再修改.html的后缀名为.txt。这个过程十分繁琐，有没有简便的办法？

答案是有的。使用代码编辑器，这个东西可以根据个人喜好选择，作者比较喜欢HBuilderX极客版。它可以直接打开.html文件为可读模式，方便我们修改，同时我们也不需要进行转换文件后缀名，另外使用代码编辑器的好处是有智能语法提示功能，简单点说就是我们打拼音只打缩写，拼音输入法就自动帮我们显示最密切的词语出来了，敲代码也是这样的，很多编辑器可以智能提示，减少人们敲更多的代码。

我们可以直接将文件夹拖入到HBuilderX的界面中，在左侧自动生成目录结构。

.html文件相当于是地皮，而HMTL代码结构相当于建筑房子的支架。

所以，我们在制作一个网页的时候，必须先学会认识支架。如下图所示，这就是一个基本的HTML代码结构。

1. HTML的代码里有单标签元素和双标签元素。如：1、4行是单标签元素，剩下的都是双标签元素。
2. HTML代码的标签元素被尖括号包围着。
3. 双标签元素的开头有个/标志。
4. 双标签元素的头尾单词一致。

上面是HTML基本概念，下面我们将分析图中的代码。

1. 第一行声明下面的代码全部都是标记语言类型的文档，只需死记硬背即可，强制要求。
2. 第二行表示网页最外层的结构边缘。
3. 第三行表示网页的头部，主要用于设置网页配置信息、引入CSS、JavaScript。
4. 第四行表示网页的字符为UTF-8编码，正常情况下，我们也是使用这个编码，主要用于显示中文，如果你的浏览器打开网页不显示中文，请检查一下这个部分。
5. 第五行用于设置浏览器上网页标题，放在后面介绍。
6. 第七行用于设置网页结构，我们将来设计的网页结构的代码都是在body里面。

请按照下述代码操作，记住保存文件，保存快捷键为ctrl+s。保存文件成功后，左上角是没有*号的。

然后我们将这个文件拖入到浏览器中。

仔细品味下图，你能明白我之前所说的浏览器上的网页标题和在body内编写代码结构的意义了吧。

同时，我们也学会了一个新标签

我们所学的内容是HTML5的语法，在HTML5之前还有HTML4等等。它们通过来进行声明，告诉浏览器下面的代码是哪个版本的语法。

因为那些内容比较老了，如果大家感兴趣继续深究，可以自行搜索DTD相关知识。