html5 内嵌网页_HTML5与CSS3基础语法自学教程（二）

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！

导读： 本小节主要讲解 HTML 的基础语法内容，将通过编写第一个 HTML 页面来学习 HTML 的基本结构、声明、元素和注释等内容。通过本小节的学习可以对 HTML 的基础语法有个全面的掌握，这也是我们后续学习 HTML 其他内容时必须要用到的。

提示：学习 HTML 基础语法需要用到开发编辑器，这里使用 Visual Studio Code 编辑器。当然，你也可以选择你更熟悉的开发编辑器来使用。关于 Visual Studio Code 编辑器的基本操作可以参考本小节中扩展阅读。

HTML 基本结构

创建第一个 HTML 页面

打开 Visual Studio Code 编辑器新建一个文件，并且保存为 .html 或 .htm 扩展名的文件。然后，在新建的 HTML 文件中输入 HTML，这时 Visual Studio Code 编辑器会弹出提示框。

如下图所示展示了输入之后的提示框：

根据 Visual Studio Code 编辑器的提示，选择【html : 5】这个选项，就创建好了一个 HTML 的基本结构。

如下图所示展示了创建之后的 HTML 模板内容：

 Document

说明：【html : 5】选项表示使用 HTML5 版本的模板。

HTML 模板简要说明

创建了 HTML5 版本的基本结构，接下来我们以从上到下的顺序，对这个基本结构中比较核心的内容进行简单地初步了解。

1. 声明

在 HTML5 基本结构的第一行，这块内容被称为 HTML 声明。HTML 声明的作用是浏览器运行该 HTML 页面时，告知浏览器当前 HTML 页面的版本。

`2. HTML 基本结构`

除了第一行的 HTML 声明之外，其余内容才算是 HTML 的基本结构。接下来我们进行分别说明：

元素：表示当前 HTML 页面的根元素，用来包含所有其他 HTML 元素。
元素：表示当前 HTML 页面的头部，用来定义当前 HTML 页面的基本信息，例如标题、关键字、作者等内容。
元素：表示当前 HTML 页面的主体，用来定义最终显示在浏览器窗口的内容。

声明

HTML 页面的第一行一般都是编写 HTML 声明。HTML 声明的作用就是当浏览器运行该 HTML 页面时来告知浏览器当前 HTML 页面的版本，这样浏览器会准确地进行解析并展示其内容。

HTML 声明必须要编写在 HTML 页面的第一行，一般都是在元素之前。并且 HTML 声明之前不能存在空行或者空格，不然会导致 HTML 声明失效。

浏览器发展至今，其功能也非常的强大。所以，如果 HTML 页面没有定义声明的话，浏览器也可以正确地解析该 HTML 页面并进行显示。但是，还是建议在编写 HTML 页面时定义声明。

再有，我们需要注意 HTML5 版本和 HTML 4.01 版本的声明是不同的。

如下示例代码所示展示了 HTML5 版本的声明：

HTML 4.01 版本的声明分别存在三个版本。
HTML 4.01 Strict

该声明是严格型约束，该 DTD 文件包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(比如 font)，也不允许框架集(Framesets)。

HTML 4.01 Transitional

该声明是过渡型约束，该 DTD 文件包含所有 HTML 元素和属性，包括展示性的和弃用的元素(比如 font)，但不允许框架集(Framesets)。

HTML 4.01 Transitional

该声明是框架集约束，该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

通过两个版本的 HTML 声明内容，我们也可以看出 HTML5 版本的声明内容简化了不少。不仅没有了版本信息，也不需要约束文件。

说明：约束文件指的是如上述 strict.dtd、 loose.dtd 或者 frameset.dtd 文件。HTML 的约束文件是用来定义 HTML 的元素以及编写规范。

`HTML 元素`

除了 HTML 声明之外，其他内容都是 HTML 元素。首先，需要搞清楚元素(Element)和标签(Tag)之间的区别，如下图所示：

元素(Element)：是用来包含文字、图片或者音视频的内容，一般是由标签和内容组成。
标签(Tag)：是元素的组成部分，一般分为开始标签和结束标签。

HTML 元素

HTML 元素是 HTML 的重要组成部分之一，如下图所示展示了 HTML 元素的语法结构：

HTML 元素可以分为闭合元素和空元素两种类型：

闭合元素：具有开始标签和结束标签，而且开始标签和结束标签是成对出现的。如下示例代码展示了闭合元素：

文本内容

空元素：只有开始标签，而没有结束标签。如下示例代码展示了空元素：

注意：在编写 HTML 元素时，如果是闭合元素不要忘记结束标签，如果是空元素不要编写结束标签。目前的开发编辑器会有相应的提示功能。

由于 HTML 是大小写不敏感的，所以 HTML 元素的元素名写成大写或小写都是允许的，例如

、

和

是一样的含义。

但是 W3C 组织早在 HTML4 版本时，建议元素名使用小写形式。后来出现的 XHTML 是强制元素名必须使用小写形式。所以，元素名的编写还是尽量使用小写形式，而且现在的开发编辑器的提供功能也都是小写形式的。

注意： 元素是比较特殊的元素，称为根元素。在一个 HTML 页面中只能存在一个元素，即使编写了多个元素，运行 HTML 页面时浏览器也会自动忽略。

HTML 标签

HTML 标签实际上是 HTML 元素的组成部分之一，分为开始标签和结束标签。

开始标签(Opening Tag)：表示某个元素是从这里开始的。
结束标签(Closing Tag)：表示某个元素是到这里结束的。

无论是开始标签还是结束标签都具有的结构：

左尖角号
元素名
右尖角号

如下图所示展示了标签的结构：

而结束标签相比开始标签多了个结束符( /)。如下图所示展示了结束标签的结构：

HTML 元素的属性

属性是 HTML 元素的重要组成部分，用来定义某个元素的信息。例如为

元素定义 ID 属性，就是定义了唯一标识。

属性定义在元素的开始标签中，这样无论是闭合元素还是空元素都可以正常使用属性。属性的语法结构是键值对形式的。如下图所示展示了属性的语法结构：

属性名(attribute name)：其数量和作用都是 HTML 给定的。
属性值(attribute value)：属性对应的值，建议使用一对双引号进行包裹。

注意：不同的属性，对应不同类型的值。

与元素的情况类似，属性的编写 W3C 组织也是建议使用小写形式。目前开发编辑器的提示功能也都是提供小写形式的。

同一个元素是允许编写多个不同的属性的，但在同一个元素中不能同时定义多个相同的属性。再有，HTML 元素的属性可以划分为以下 4 种：

标准(通用)属性：HTML 元素几乎都具有的属性，例如 id、name、style 和 class 属性等。
专有(私有)属性：HTML 中某些元素特有的属性，例如元素的 action 属性等。
事件属性：用来为 HTML 元素注册 DOM 事件的属性，例如 onclick 属性等。
自定义属性：第三方框架中为了完成某个特定功能而定义的属性，例如 Vue 框架的 v-if 属性等。

HTML 头部

HTML 头部具体是指

元素以及该元素所包含的所有元素，其作用是用来定义当前 HTML 页面的基本信息，例如 HTML 页面的标题、编写格式、作者、关键字以及描述等内容。

元素

元素：定义 HTML 页面的标题，显示在浏览器的标题或标签页上。如下示例代码所示展示了元素的用法：

Document

元素：定义 HTML 页面中所有相对 URL 的根 URL。如下示例代码所示展示了元素的用法：

注意：一个 HTML 页面只能定义一个元素。如果一个 HTML 页面定义了多个元素的话，则只有第一个元素有效。

元素：定义 HTML 页面引入的外部资源，比较常见的是引入外部 CSS 文件或图标文件等。
如下示例代码所示展示了通过元素引入外部 CSS 文件：

如下示例代码所示展示了通过元素引入外部图标文件：

元素：定义 HTML 页面的元数据信息，例如编码格式、作者、关键字等。如下示例代码所示展示了通过元素的用法：

- 元素：定义当 HTML 页面的脚本代码不被支持或者浏览器关闭了脚本执行时的替代内容。如下示例代码所示展示了元素的用法：
```
 这是一个链接
```
- 元素：定义 HTML 页面允许用户可以调用的命令。该元素已被废弃！
元素

元素是用来定义不能由、、