二、认识 HTML5 骨架

<!--文档类型声明DTD-->
<!DOCtype HTML>
<!--<html></html> 标签对--><html lang="en">
  <!--<head></head> 标签对-->
  <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>标签对-->
  <body></body>
  </html>

1、文档类型声明 DTD

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。`
<!DOCTYPE> 声明不是 HTML 标签，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

SGML（Standard Generalized Markup Language）

即标准通用标记语言) SGML 是国际上定义电子文档和内容描述的标准。
HTML5 不基于 SGML，所以不需要引用 DTD

提示：

请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

不写 DTD 会引发浏览器的一些兼容问题
不同版本的 HTML 有不同的 DTD 写法

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。
在 HTML5 中只有一种（如下所示）：

1.1、HTML5 标准

<!DOCTYPE html>

<!DOCTYPE > 声明没有结束标签。
<!DOCTYPE > 声明对大小写不敏感，以下任意方式都可以。但，建议使用 <!DOCTYPE html>

<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>

1.2、HTML4.01 严格版

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1.3、HTML4.01 过渡版

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

1.4、HTML4.01 框架版

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

当前

HTML5 已经一统江湖了，早期的 HTML4 及以前的版本都已不用，只做 HTML 发展历史了解就好。

那么，是谁在制定这些版本，就是 W3C 组织

2、W3C 组织

Tip

W3C 指万维网联盟（World Wide WEB Consortium）是万维网的主要国际标准组织
W3C 创建于 1994 年 10 月主要负责制定 Web 标准
W3C 由 Tim Berners-Lee（蒂姆·伯纳斯·李）创建，被誉为 "互联网之父"
W3C 是一个会员组织
W3C 的工作是对 web 进行标准化
W3C 创建并维护 WWW 标准
W3C 标准也被称为 W3C 规范
主要是 HTML 和 CSS

W3C 组织官网：https://www.w3.org/(opens new window)

JavaScript 由 Brendan Eich 于 1995 年发明，并于 1997 年成为 ECMA 标准。

3、网页组成

网页主要由三部分组成：

结构（Structure）、表现（Presentation）和行为（Behavior）

标准	简介	描述
结构	用于对网页元素进行整理和分类，即当下学习的 HTML	网页的骨骼
表现	表现用户设置网页元素的排版、颜色、大小修饰等外观样式，即 CSS	网页的皮肤
行为	行为是指网页模型的定义、交互等编写，即要学习的 JAVAScrIPt	网页的神经

Web 标准提出的最佳体验方案：

结构、样式、行为相分离
即：结构写在 HTML 文件中，表现写在 CSS 文件中，行为写在 JavaScript 文件中

4、html 标签

<!--文档类型声明-->
<!DOCTYPE html>
<!--
    <html></html>标签
    lang 表示网页的语言，en表示英语，zh表示中文 ,不修改也行
    什么时候修改呢：如果网站有多国语言时修改，中文版、英语版、日语版、法语版等等，具体案例可参考 小米官网源码
-->
<html lang="en">
  <!-- <head></head>标签对，是网页的配置，不要认为是网页的头部 -->
  <head> </head>
  <!-- <body></body>标签对中书写网页的内容，包括网页的头部、主要内容、页脚等各个部分 -->
  <body></body>
  </html>

5、字符集

TIP

meta 元标签，表示网页的基础配置
charset 字符集
UTF-8 是一种字符集

<meta charset="UTF-8" />

在中国常见的字符集有两种 UTF-8 和 GB2312

字符集	涵盖字符	1 个汉字的字节数	适用场景
UTF-8	涵盖全球所有国家、民族的文字和大量图形字符	3	开发有非汉字文字的网页
gb2312（gbk）	收录所有汉字字符（简体、繁体）和英语、少量韩文、日语和少量图形字符	2	开发只有汉语和英语的网页，由于 1 个汉字仅占 2 个字节，网页文件尺寸大小明显减少

注：

与 UTF-8 相比一个汉字节省一个字节

更改网页的字符集

无论使用哪种字符集，一定要在 VSCode 中将文件也设置为相同的字符集，否则会出现乱码

<meta charset="UTF-8" /><meta charset="gb2312" /><meta charset="gbk" />

注：

Live Serve 插件不支持 gb2312、gbk 字符集，只支持 UTF-8 字符集

文件编码集与 meta 标签编码不一致网页会出现乱码

老六blog