html文档本质是一个什么文件,万维网基石-HTML-第二篇

HTML 结构

HTML 结构

上一篇里，我们介绍了有关HTML最最基本的知识点，我们知道了为什么要学习HTML、它是由哪些东西组成的、标签的属性分类等，但距离我们写出一个网页好像还有很大距离，在这篇文章中，我们将向大家介绍如何写出一个能够浏览的简单网页。

在介绍之前，大家先想想电脑中的文件是如何打开的？比如.txt文件、.doc文件、.jpg文件、.mp4文件等等，大家应该都知道吧，.txt使用文本编辑软件打开(记事本/Notepad)，.doc使用word软件打开，.jpg使用图片软件打开，.mp4使用视频播放软件打开，不同的文件应该使用相应的电脑软件打开，比如.txt文件不会使用视频播放软件打开，.mp4文件不会使用word软件打开。

大家都知道浏览器是浏览网页最常见的一个电脑软件，当我们在浏览器地址栏中输入网址并点击回车之后，浏览器标签栏会显示加载状态，过一会浏览器就会显示出内容，如下图片所示：

实际上之所以显示加载状态，是因为我们在通过浏览器访问万维网上某个服务器(服务器可以理解为就是一台计算机)上的资源而已，最后浏览器显示出来的内容其实就是网页，也就是说浏览器可以通过获取万维网上服务器的某些资源显示出网页，并且服务器也就是计算机，那么是不是浏览器实际上是可以直接打开电脑中的某些资源从而显示出网页呢？

那么‘某些资源’是什么呢？大家应该都记得上面说过电脑中的文件应该使用相应的软件才能正确打开，现在软件有了就是浏览器，那么什么样的文件可以使用浏览器打开并能够正确显示呢？这就是我们下面要介绍的.html文件，也称HTML文档文件。

HTML文档文件本质上是文本文件，也就是说它可以使用文本软件打开，使用文本软件打开就是显示真实的HTML代码，当然也可以修改代码内容来编辑它，使用浏览器打开就会显示有相应内容的网页，浏览器就是负责解析HTML文档中的代码并显示在浏览器窗口主体中的，所以一个HTML文档文件其实就是一个网页！

所以，现在我们要解决的问题就是如何创建正确的HTML文档文件？为什么要强调正确呢？因为HTML代码是给浏览器看的，不是给人看的，所以必须是浏览器能看得懂的代码才是正确的HTML文档文件。

上面我们讲过HTML文档文件本质上就是文本文件，所以创建一个HTML文档文件实际上就是创建一个文本文件，然后大家应该都猜到了，只要把.txt后缀名改为.html即可，这样就创建了一个HTML文档文件。PS：不要使用windows自带的记事本创建文本文件，会有编码问题，这个后面再讲，推荐新手使用notepad。

现在我们已经创建好了HTML文档文件，现在的重点就是如何编写HTML代码了。

在编写HTML代码之前，大家首先要知道的是你编写的代码是给浏览器看的，所以代码不是随便写的，也就是说要符合HTML代码规范，符合规范的代码浏览器才能正确解析。

下面我们就来讲一下，一个最最基本的HTML文档文件中的HTML代码该如何编写。

首先我们要介绍两个新标签：和，这两个标签可以定义HTML文档的最基本结构，下面我们分别介绍。

标签比较特殊，它是用来规定本文档的类型的，而且它还有一个布尔属性-HTML，这个布尔属性用来告诉浏览器正在处理的是HTML文档，并且还是HTML5文档，这样浏览器就会将它作为HTML文档来处理，并且使用HTML5规范解析。

标签规定了文档的开始点和结束点，并告诉浏览器本文档是一个 HTML 文档。

以下代码展示了HTML文档的最基本结构：

标签位于标签之后

然后我们使用notepad创建一个文本文件，编写上面所示的代码并保存，接着修改文件后缀名为.html，这样我们就创建了一个HTML文档文件，现在我们可以直接使用浏览器打开这个文件或直接将文件拖放到浏览器打开，我们应该发现浏览器主体部分是空白的，什么都没有，这是正常的，那是因为我们只是编写了HTML文档的基本结构，没有在其中添加任何内容，所以页面显示空白。

那么如何才能在浏览器中显示出内容呢？这就需要用到一个新标签：

，标签用于定义页面可见的内容，所有浏览器主体区域显示的内容都需要定义在标签里。

上面我们知道标签规定了文档的开始点和结束点，所以

标签应该处于标签内，如下代码所示：页面内容写在这个位置

再次编写上面所示的代码并保存(为了方便阅读，代码必须缩进)，使用浏览器打开应该能够看到浏览器主体区域有相应的内容了。

最后，大家在浏览网页时，应该都发现浏览器标签栏里有一些文字描述，它其实是网页的标题，如下图所示：

那么这是如何显示的呢？很简单，是通过

标签定义的，现在的问题是标签应该放在哪个位置呢？首先不可能放在标签里，因为标签是用来定义页面可见的内容，所以需要一个新标签来管理一些页面不可见的信息，它就是标签，标签用于定义HTML文档的头部信息，标签就应该放在它里面，如下代码所示：我是网页的标题页面内容写在这个位置

至此，一个基本完整的HTML文档结构已经完成了！

好了，今天就到这，后续内容我会及时更新的，欢迎大家和我交流，指出我不对的地方，谢谢！