HTML/HTML5语法和基础标签¶

1、创建第一个网页¶

方法1：

创建一个空文件夹
在文件夹中，右键新建文本文件
然后将文件后缀名.txt修改为.html，再使用Vscode编辑器打开
注意： 设置操作系统"文件扩展名"为可见

方法2：

创建一个空文件夹，直接使用Vscode打开文件夹
使用快捷键Ctrl+N新建文件，保存文件格式为.html后缀名即可
或者点击新建文件按钮或在Vscode资源管理器中右键新建文件

注：我们所看到的网页有各种效果（包括图片、视频、文字等），但HTML文件本身是纯文本。

**生成 HTML 骨架

在Vscode 中，在英文输入法下，输入!后，按tab键，即可自动生成 HTML5 的基本结构骨架。
注：如果未能生成，请检查文件格式是否为.html并已保存。

第一个 HTML 文件示例：

<!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>这是我的第一个HTML网页</title>
</head>
<body>
第一个HTML网页，Hello！
</body>
</html>

2、预览网页的方式¶

方法1：

直接文件夹中双击网页图标，即可查看
建议使用 Chrome 浏览器，记得将 Chrome 浏览器设置为默认浏览器
修改网页内容后，在浏览器中手动刷新后，即可更新内容

方法2：

在 VSCode 中安装 Live Server 插件（实时热更新），修改内容后，保存网页将自动刷新
安装完成后，在当前 HTML 文件中，按快捷键 Ctrl+Shift+P 选择 Open With Live Server 即可打开
使用快捷键注意：网页必须存放在文件夹中，并且 VSCode 已经打开这个文件夹
开发时可以使用分屏模式，一边开发、一边呈现效果，所见即所得

3、常用浏览器¶

浏览器是网页显示、运行的平台。常用浏览器有IE、火狐(Firefox)、谷歌(Google)、Safari(苹果官方)、Opera、Edge(微软)等。

全球浏览器市场份额：https://gs.statcounter.com/browser-market-share

中国浏览器市场份额：https://tongji.baidu.com/research/site

4、浏览器内核¶

浏览器内核（渲染引擎）：负责读取网页内容，整理信息，计算网页的显示方式并显示页面

浏览器	内核	说明
IE	Trident	IE浏览器内核
Edge	WebKit	微软 Microsoft Edge（简称ME浏览器）
Chrome/Opera	Blink	由 Google 和 Opera Software 共同研发，Blink其实是WebKit的分支，以前Google是WebKit内核、现在是Blink
Firefox	Gecko	火狐浏览器内核
Safari	WebKit	苹果浏览器内核
360、猎豹、2345浏览器	Trident+Blink	双内核
UC、搜狗、遨游、QQ浏览器	Trident+WebKit	双内核
百度（已关闭）、世界之窗浏览器	Trident	IE浏览器内核

浏览器内核检测工具：https://ie.icoa.cn/

5、认识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

● 定义和用法

声明必须是 HTML 文档的第一行，位于 <html>标签之前。

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

● SGML (Standard Generalized Markup Language，即标准通用标记语言)

SGML 是国际上定义电子文档和内容描述的标准。

● HTML5

HTML5 不基于 SGML，所以不需要引用 DTD。

● 提示：

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

● 不写 DTD 会引发浏览器的一些兼容问题

● 不同版本的 HTML 有不同的 DTD 写法

**HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE>声明。在 HTML5 中只有一种：

HTML5 标准¶

<!DOCTYPE html>


`<!DOCTYPE html>`声明没有结束标签。

`<!DOCTYPE html>`声明对大小写不敏感，以下任意方式都可以，建议使用 `<!DOCTYPE html>`：


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

HTML4.01严格版

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

HTML4.01过渡版

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

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组织¶

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

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

W3C组织官网：https://www.w3.org/

网页主要由三部分组成：

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

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

Web 标准提出的最佳体验方案：结构、样式、行为相分离

即：

结构写在 HTML 文件中
表现写在 CSS 文件中
行为写在 JavaScript 文件中

(3) html标签¶

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

要点：

<!DOCTYPE html>是HTML5的文档类型声明
<html>标签的lang属性表示网页的语言，常见值有en(英语)、zh(中文)
多语言网站需要根据语言版本修改lang属性
<head>标签用于配置网页，不是网页头部内容
<body>标签中书写网页的实际内容，包括头部、主体、页脚等各个部分

(4) 字符集¶

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

<meta charset="UTF-8">

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

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

注：与UTF-8相比，gb2312(GBK)一个汉字节省一个字节

更改网页的字符集¶

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

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

注： Live Server 插件不支持 gb2312、gbk 字符集，只支持 UTF-8 字符集。

核心要点： 文件编码集与 meta 标签编码不一致网页会出现乱码。