接下来我们来创造一个真正的网页，首先，我们建立一个 html 后缀的文件，如下图所示

创造之后，我们使用一个文本编辑器打开它，注意，如果直接双击默认应该是用浏览器打开，我们这里用文本编辑器打开，这里首推 vscode，打开的应该是一个空白的文本，我们在这个空文本中输入如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	
	<h1>这是你的第一个网页</h1>
	<a href="http://www.baidu.com">这是一个跳转到www.baidu.com的链接</a>
	<img src="">
</body>
</html>

以上就创造了一个空白的网页，如果读者使用了 vscode，或者读者使用的编辑器带有 emmet 插件，那么可以输入 html:5 然后按下 tab 来快速生成一个空白页面。当然，上面的页面并不是一个空白页面，我在<body></body>中间加入了一些其他的东西。

一个页面也可以称为一个文档，即一个 html 结尾的文件，既可以称为一个页面，也可以称为一个文档，关键看角度，首先，这是一个网页，所以可以叫页面，但如果我们把他看成一个文本文件，它就是一个普普通通的文档。

读者可能会看到以 htm 结尾的文件，其实 html 和 htm 结尾本质上是一样的，之所以会少一个 l，是因为在 windows95 操作系统之前，windows 系统只能识别三位的后缀名，所以 html 就被迫变成 htm 了，类似的还有 jpeg 被迫变成 jpg。

有了这个结构之后，我们在 body 标签中书写的内容就可以直接在网页中看到，读者编辑好这个 html 文档之后，可以双击打开在浏览器看到内容，这里笔者主要介绍一些概念性的东西。

首先，我们先看到下面这一部分

<h1>这是你的第一个网页</h1>
<a href="http://www.baidu.com">这是一个跳转到www.baidu.com的链接</a>
<img src="">

第一个要介绍的是 ``，这是一个注释，任何一个语言都有注释这个东西，注释就是写给程序员看的，不管你注释里面的内容是什么，也不管你写再多的东西，注释对页面渲染都不会有任何影响，或者说，浏览器在渲染页面的时候会忽略注释，所以注释只有程序员能看到。

接下来介绍 <h1>这是你的第一个网页</h1>，这就是一个元素，我们页面内的一切都是由元素构成的（除第一行的 <!DOCTYPE html> 外），英文名为 element，有的地方可能也称其为标签，都是一个意思，元素一般都由以下四部分组成

• 开始标记（begin tag）
• 内容（content）
• 结束标记（end tag）
• 属性（attribute）

我们看到 <h1>这是你的第一个网页</h1>，在这个元素中，开始标记就是 <h1>，这个开始标记里的 h1其实就是元素名(元素名中的字母均为小写)，结束标记就是 </h1>，内容就是 这是你的第一个网页，可以看到，这个元素没有属性也没有任何问题，所以对于一个元素而言，属性其实是可有可无的。

我们再看这个元素 <a href="http://www.baidu.com">这是一个跳转到www.baidu.com的链接</a>，在这个元素中，开始标记是 <a>，结束标记是 </a>，内容是 这是一个跳转到www.baidu.com的链接，而属性则是 href="http://www.baidu.com"，通过 a 元素的结构，我们就可以知道，属性是加在开始标记中的，而属性本身是键值对的格式，这个 a 元素就有一个名为 href (hyper reference)的属性，其值为 `http://www.baidu.com。

什么是键值对（key-value pair） 键值对，就是由键和值组成的一一对应的小对子，如下就是一个例子

• 姓名：张三
• 年龄：29
• 性别：男 这就是一个键值对，其中姓名是一个键，张三则是姓名这个键所对应的值，年龄是一个键，29 则是年龄这个键所对应的值

一个元素其实可以拥有多个属性，多个属性之间用空格隔开，比如这个例子：<h1 class="demo" title="this is a page">这是你的第一个网页</h1>，在这个例子中，h1元素就有 class 和 title 两个属性，属性的值分别是 demo 和 this is a page。而属性本身又可以分为两类，一类是某个或某些元素专有的属性，叫做局部属性，这些属性只能作用在某些特定的元素上，而一些属性则是全局属性，全局属性对任何一个元素都生效，这一点在后面的学习中读者应该会有更深刻的认识。

接下来我们看 img 元素，即 <img src="">，这个元素可以显示一张图片，src 属性规定了显示图片的路径。这个标签和我们前面的标签好像有点不一样，它没有结束标记，对于这种没有结束标志的元素，我们称为空元素。 ^29688a

读者可能会见到一些人把 <img src=""> 写成 <img src="" />，也就是在末尾加一个反斜杠，第二种写法是以前的旧写法，现在哪怕不写这个反斜杠也是正确的。

以上介绍了一些列概念，有了这些概念支撑后，相信我们写出来的第一个页面读者就能看懂了，整个页面除了第一行外，都是由一个一个元素组成的，而元素本身其实是可以嵌套的，所谓嵌套，就是指元素的内容可以是另外一个元素，当然也可以是多个元素，例如我们页面中下面的部分：

<body>
	
	<h1>这是你的第一个网页</h1>
	<a href="http://www.baidu.com">这是一个跳转到www.baidu.com的链接</a>
	<img src="">
</body>

在这里，body 元素的元素内容中就嵌套了三个元素，分别是 h1，a，img，此时这里其实就构成了一个父子关系，即 body 元素是这三个元素的父元素，而这三个元素都是这个 body 元素的子元素，由于这三个元素同属同一个父元素，所以他们互为兄弟元素，这里的概念和数据结构中树的父子关系类似，其实这里的嵌套关系也可以用一个树状的结构来表示。

介绍完上面的基本概念，相信读者对元素这个概念已经有了一定认识，下面介绍一个空页面应该具备的基本结构，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

这就是一个空页面，只要你要写一个 html 文档，或者说写一个页面，第一步就应该把这个写出来，这也是读者输入 html:5 后按下 tab 键应该生成的内容，下面介绍一下这里每一行都是什么东西。

<!DOCTYPE html> 这个是文档声明，主要是用来说明 HTML 版本的，它并不是一个元素，我们目前使用的 HTML 版本是 HTML 5，所以如果你要写一个 HTML 5 版本的页面，就要在第一行使用这个说明符告诉浏览器我们现在使用的是 HTML 5。

这行代码如果不写其实并不会产生什么大的影响，但如果不写，会导致浏览器进入怪异渲染模式，在渲染过程中浏览器会自动选择一个标准，这可能会导致一些问题，所以肯定还是要给他写上。

我们可以看到，除了 <!DOCTYPE html> 以外，其他的所有内容都是包含在一个 html 元素内的，这个 html 元素就是整个页面的根元素，一个页面只能有一个根元素，该元素也必须是其他所有元素的祖先元素，类似数据结构中树的根节点。但是在 HTML 5 标准中，这个根元素其实是可有可无的，或者说我们哪怕不写这个 html 元素也是符合标准的，这可能和某些教材说的有些出入，部分教材可能会告诉你 html 元素是必须要有的，这里我们参考 mdn 的原文，虽然 html 元素可以省略，但我们还是不要将其省略

读者看到 html 元素有一个 lang 属性，这个属性表示的 language，是用来说明我这个网页是什么语言，en 表示的是英文，cmn-hans表示中文，这个属性在一些场景中会用到，比如一些浏览器可能会提供语音阅读的功能，这个功能就可以使用 html 的 lang 属性来判断应该用哪一个语言的语音包。

如果要表示中文，也可以用 zh-CN，但这是一个过时的写法，现在我们使用 cmn-hans 还有一点要注意，这个 lang 其实是一个全局属性，也就是说任何一个元素都可以有 lang 属性，比如这个网页都是中文，但唯独有一个元素里面的英文，我就可以给这个元素单独设置 lang 属性

html 元素有两个子元素，分别是 head 和 body，这两个元素只能作为 html 元素的子元素，不能出现在其他地方。head 就是文件头，body 就是文件体，文件头的内容并不会显示在页面上。

在 head 元素中，我们可以看到 meta 元素，meta 在计算机科学中表示元，这里的 meta 也表示元数据的意思，这些元数据其实可以认为是附加信息，这些附加信息，也就是额外信息，这些额外信息并不是我们要显示的，我们来看一下它有什么作用

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

我们这里一共有三个 meta 标签，分别记录了三个元数据，第一个 meta 的属性为 charset="UTF-8"，这个元素的作用是告诉浏览器我这个元素的编码是 UTF-8。

编码补充知识：计算机只能存储 0 和 1 这样的二进制数，如果要存下一个英文字符，就需要建立一个二进制数向英文的映射关系，比如我可以让 010 表示 a，011 表示 b，大概就这么个意思，有很多不同的编码规则，如果编码混用会导致乱码的问题，在这么多编码规则中，其中最常用的就是 UTF 8。

第二个 meta 标签，从他的属性也可以看出，它是用来解决 IE 浏览器的问题，IE 浏览器存在大量兼容性问题，很麻烦，当然现在 IE 已经完蛋了，我们不需要为 IE 单独兼容了，在 IE 的一些高版本，已经支持切换 edge 内核了，这个 meta 标签就是告诉这些高版本的 IE 浏览器切换成 edge 内核。

我们再来看第三个 meta 标签，这个 meta 标签是用于设置视口的，也就是 viewport，把视口的宽度设置为设备宽度，主要是为了适应手机端的，仅此而已，这里我们会在移动端详细解释。

除了 meta 标签外，我们可以看到 head 里面还有一个 title 标签，这个标签其实就是网页的标题，显示在如下位置：

我们这个 html 有 head 和 body 两个子元素，上面讲完了 head 元素是干嘛的，下面来介绍 body 元素，所有参与显示的元素都应该放到 body 里面，我们的 HTML 代码绝大多数都写在 body 里面。