请先阅读：VSCode安装与前端开发必备插件安装
引言
介绍
当用户通过 Internet 浏览网页时，会看到各种文字信息、链接、图表、图片等内容，如图所示。
浏览器是如何显示这个页面内容的呢？
下面通过浏览器来查看这个页面的源代码，如图所示，这些源代码就是浏览器可以理解并展示的一种计算机标签语言—HTML
HTML 是 Hyper Text Markup Language 的缩写，中文翻译为超文本标记语言，是制作网页最基本的语言，它的特点正如它的名称所表示的那样
- Hyper（超）
超（Hyper）是相对于线性（Linear）而言的，HTML 之前的计算机程序大多是线性的，即必须由上至下顺序执行，而用 HTML 制作的网页可以通过其中的超链接从一个网页跳转至另一个网页。
Text（文本）：不同于一些编译型的程序语言，例如 C、C++ 或 Java 等，HTML 是一种文本解释型的程序语言，即它的源代码不经过编译而直接在浏览器中被翻译运行。
- Markup（标记）
HTML 的基本规则就是用标记语言（成对尖括号组成的标签元素）来描述网页内容如何在浏览器中显示。
- Language（语言）
HTML 是一种语言，但它是解释型语言。它所有的标记都会被浏览器翻译成最终显示的效果。
什么是浏览器
浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。Web 信息资源由统一资源标识符（Uniform Resource Identifier，URI）所标记，它是一张网页、一张图片、一段视频或者任何在 Web 上所呈现的内容。使用者可以借助超级链接（ Hyperlinks），通过浏览器浏览互相关联的信息。
当前的主流浏览器有很多，除了使用 Windows 系统自带的 IE 浏览器以外，还推荐使用 Chrome 浏览器。在 Chrome 上可以安装各种常用插件，这对于网页的美化、调试等方面有着非常大的作用。
HTML 发展史
HTML 1.0
1991 年 WWW 在互联网上首次露面，也随之引起了巨大的轰动。1993 年 ITEF（因特网工作小组）发布了一个草案，那时没有 HTML 的官方文档，各种标签（Tag）也很混乱。
这个草案 HTML tags 可以算是 HTML 的第一个版本 1.0。
1994 年，Tim Berners-Lee 创建了非盈利性的 W3C（world wild web consortium 万维网联盟），并邀请了当时的 155 家互联网巨头（如 Microsoft、IBM、APPLE 等公司），致力使得 WWW 有一套更加标准化的协议，能够让资源按照这套标准的协议进行处理与共享。那个时候 W3C 的根本目的就是为了维护互联网的对等性，为了让它保持最起码的秩序。
HTML 2.0
1995 年，HTML 2.0 发布。
HTML 3.2
1996 年，由 Tim Berners-Lee 组织的 W3C 对 HTML 语言进行规范化，HTML 3.2 发布。
HTML 4.0
1997 年发布，W3C 推荐标准。
HTML 4.01
1999 年，HTML 4.01 发布，同一年，W3C 对 HTML 的未来做了展望。他们认为 HTML 存在一些缺陷，例如 HTML 的形式与内容无法分离、标记单一等等，前途不是很光明。于是 W3C 转向语言更加规范的 XML，以便于弥补 HTML 的不足（XML 全称 Extensible Markup Language 可拓展标记语言），但是从 1991 年 HTML 在互联网上出现到 1999 年这个时候已经过去 8 年了，全世界已经有成千上万的网页经由 HTML 编写，突然间更改一种语言是不现实的，故 W3C 只能放慢脚步，开始了 HTML 到 XML 的过渡。于是也就出现了 XHTML。
XHTML 1.0
2000 年发布，XHTML 1.0 与 HTML 4.01 内容是一样的，但是 XHTML 使用了新的语法规则：规定了所有元素、属性必须使用小写字母，属性值必须加引号，规定每个标签都必须有与之对应的结束标签。与这些规则相比起来 HTML 4.01 的语法就显得很松散。
XHTML 1.1
XHTML 1.1 于 2001 年发布，在最开始 W3C 最终的目的就是为了使得 HTML 完全标准化，该版本的 XHTML 强制性的规定了文档必须标注为 xml 而不是 html。
然而很多浏览器并不能很好的解析 XML 格式的文档，W3C 这一步似乎走的太快了。
XHTML 2.0
紧随 XHTML 1.1 之后，XHTML 2.0 也随之发布，XHTML 1.1 那个时候浏览器不能解析 XML 文档的问题还没有得到很好的处理，这个版本又有意不再兼容已有的 HTML 各个版本。开发人员、浏览器厂商也便渐渐放弃了 xml，也许是 xml 太过于规范脱离了实际，又或许是因为 HTML 的生态圈真的太大了。
2004 年，各大浏览器厂商也相继脱离了 W3C，成立了新的小组 WHATWG（超文本应用技术工作组 world hypertext application technique work group）开始对 HTML 进行修缮，开始了向 HTML5 之路的进军。XHTML 生态环境渐渐破碎，2006 年，XTML2 没有实质性进展。Tim Berners-Lee 反思，决定重组 HTML 工作组。
HTML 5.0
2007 年，W3C 工作组重建，在 WHATWG 的基础上继续研究，规范也交付给 WHATWG 来制定。因此，也就出现了现如今的"一种格式，两个版本（HTML/XHTML）"的局面，但随着 HTML5 的到来，一种更加简洁的 doctype（）也逐渐运用到各大网站。2009 年，W3C 也宣布停止 XHTML2 的研究工作。HTML5 是目前最新的 HTML 规范，也已经被 W3C 接纳。截止目前为止，HTML5 标准也已经逐渐被各大网站广泛运用。
HTML 开发工具
如果要做专业的前端开发，使用 EditPlus 等文本编辑器作为开发工具其效率是比较低的，为了提高前端开发工作效率，还是建议使用专业、强大的网站开发工具 JetBrains WEBStrom、VS Code 等。
这些专业工具除了能对 HTML 代码的关键字加亮显示以外，还可以同时显示代码及浏览器展示效果。
这种所见即所得的工具，当页面内容复杂时，使用它可以大大降低代码编写和维护的难度，从而提高程序员或美工人员开发和维护的效率，降低项目用工成本，是编写 HTML 文档不可多得的优秀工具。
标签和属性
标签
所有 HTML 标签都有一个标签名称，有些标签还有一个可选的属性列表。
这些标签在使用时必须用尖括号“<”和“>”括起来，而且一般都是成对出现的，无斜杠的标签表示该标签的作用是开始，有斜杠的标签表示该标签的作用是结束。
HTML 标签是大小写无关的， 与 表示的意思是一样的。
但是 W3C（World Wide Web Consortium ，万维网联盟，制定 Web 规范的权威组织）标准推荐使用小写。
HTML 标签有两种形式：
- 双标签
双标签指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用 <标签名> 表示，结束标签用 表示，只有一对标签一起使用才能表示一个具体的含义。
例如 表示一个 HTML 文档。
<标签名>内容</标签名>
- 单标签
单标签指标签不是成对出现的，也就是只用一个标签就能表示一个具体的含义，例如
表示换行、表示创建一条水平线。为了符合 W3C 规范，单标签必须在标签后面加一个斜杠，即 所以单标签通用格式为 <标签名/>。
<标签名/>
属性
HTML 属性一般出现在 HTML 标签中，是 HTML 标签的一部分，属性能对标签进行补充说明。
例如，如果在一行文本中采用标题标签
<h1>学习“使用前端技术展现Web系统”课程</h1>
可以用属性进一步指定文本居中显示。
<h1 align="center">学习“使用前端技术展现Web系统”课程</h1>
所有属性都放在起始标签的尖括号内，并相互用空格分开，有些属性要求用引号，有些则不要求，大多数属性（只包括字母、数字、连字符和点号的）可以不需要引号。
例如，可以写成 align=center 或 align = “center”，所有浏览器均能用相同方式显示，但是，包括空格、%、# 等其他字符的属性值则需要用引号。
例如用 width 属性表示文档元素占文档窗口宽度的百分数，则必须写成 width=“100%”。同样也是为了符合 W3C 标准，要求所有的属性值都使用引号。
在一个标签中可以设置多个属性，语法形式如下：
<标签名 属性名1="属性值1" 属性名2="属性值2" ... 属性名N="属性值N">内容</标签名>
有多个属性说明标签时，它们出现的先后顺序不影响页面显示的结果。
W3C标准
W3C 标准英文全程是：World Wide Web Consortium。万维网联盟标准不是某一个标准，而是一些列标准的集合。
网页主要有三部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。
对应的标准也有三方面：结构化标准主要包括 XHTML 和 XML，表现标准语言主要包括 CSS、行为标准主要包括（如 W3C DOM）、ECMAScript 等。这些标准大部分是 W3C 起草发布，也有一是其他标准组织制定的标准。
常用的标准规范：
- 是由一对尖括号包裹的单词构成，例如：<html>。
- 标签不区分大小写 <html> 和 <HTML>，推荐使用小写。
- 标签分为两部分：开始标签<html> 和结束标签</html>，两个标签之间的部分我们叫做标签体。
- 有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如：<br/>、<hr/>、<img/> 等。
- 标签可以嵌套，例如：<a><b></b></a>；但是不能交叉嵌套，例如：<a><b></a></b>。
快速上手
创建项目
了解了 HTML 文档的基本结构后，下面就来编写第一个最简单的 HTML 文档。
对于 HTML 文档的编写可以使用记事本，也可以使用 VSCode、WEBStrom、Hbuilder 等工具。
此处使用VSCode
到你的文件资源管理器里随便一个位置，创建一个文件夹，该文件夹就是你的项目文件夹了
然后使用VSCode打开这个目录
找到刚刚创建的文件夹，然后选择即可
创建html文件
然后在窗口中输入文件名，点击确认，即可完成创建。
编写内容
在 index.html 中写入以下内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>我的第一个网页</title> </head> <body> Hello World ！ </body> </html>
单机鼠标右键打开live服务，如果没有请安装插件，详情请看：VSCode安装与前端开发必备插件安装
这样就创建成功了~
注释和特殊符号
为了解释说明 Java 编写的源代码，Java 语言有注释，HTML 也是一种语言，在代码中也需要加入解释说明文字，所以 HTML 也有注释。
另外，在 HTML 中，“<”、“>”这些符号已经作为 HTML 的语法符号，那么如果要在页面中显示这些特殊的符号，该怎么办呢？
注释
在 HTML 文档中，通过注释标签可以插入注释，便于对代码的检查与维护。在 HTML 文档适当的位置添加注释是良好的习惯，因为一旦代码较长或结构复杂，经过一段时间之后，很可能连编写者都很难快速回忆当时的思路，所以适当的注释有助于对源代码的理解。注释部分不会被解析器解释执行，仅用来作为标记使用。
基本语法
<!-- 在此处写注释 -->
作为程序员，在软件开发过程中，注释除了用于进行程序解释说明外，还经常用在调试程序过程中。通过注释标签可以注释掉一部分暂时不用的代码，进行调试和运行，直到达到预期的结果。
特殊符号
在 HTML 文档中，有些符号拥有特殊的含义，可直接写出这些符号，以便浏览器在解释执行的时候，按照其特殊含义进行解释。
如果希望在页面上显示这些特殊符号，则需要在 HTML 文档中使用对应的代码标识，这些代码标识被称为字符实体。
一个字符实体由三个部分组成，分别是“&”符号、实体名称和“;”符合，以下列出了一些常用的特殊符号对应的字符实体。
基本结构
接下来介绍 HTML 文档中三个基本的骨架结构标签，以及对页面的一些基本描述。
<html>标签
<html> 标签标识该文档为 HTML 文档。
<html> 标签置于 HTML 文档最前边，用来标识 HTML 文档的开始，而 </html> 标签恰好相反，它放在 HTML 文档最后边，用来标识 HTML 文档的结束。
两个标签必须成对使用，网页中所有其他的内容都应该放在 <html> 和 </html> 标签之间。
基本语法：
<html> 包含<head>、<body>等其他标签 </html>
<head>标签
<head>父标签
<head> 标签是个容器，包含其他位于文档头部的标签元素。把该标签放在文档的开始处，紧跟在<html>标签后面。<head> 和</head>定义了 HTML 文档的头部，其中包含的内容主要包括对页面的一些基本描述。
如标题、关键字等。 CSS 和 JavaScript 可以定义在 HTML 头部。绝大多数文档头部包含的数据都不会真正作为内容显示给用户，但是其间的元素有各自特殊重要的意义，需要大家掌握。
基本语法
<head> 头部标签元素 </head>
常用的头部标签
其他标签元素将在后续介绍
<title>标签
通过前面的例子，已经了解了如何使用 <title> 标签，以及 <title> 标签的使用效果，这里不再赘述。
接下来简要描述通过 <title> 标签设置的页面标题，主要在以下几个方面发挥作用：
- 可以在浏览者保存该页面时成为默认的保存文件名。
- 可以在浏览者将该网址添加进收藏夹时成为收藏夹中该网址的名称。
- 方便搜索引擎索引页面。
- 搜索引擎显示的页面标题往往就是网页 <title> 标签的内容。
例如，在CSDN中查看文章时，显示的页面标题如图所示
这篇文章的 <title> 标签内容正是“做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】”。
<meta>标签
<meta> 标签的功能是提供关于页面的元信息，能够提供文档作者、关键字、描述等多种信息，在 HTML 的头部可以包括任意数量的 <meta> 标签
下面列举几种最常用的 <meta> 标签。
1、设定关键字
关键字是为搜索引擎提供的，如一个音乐网站，为了提高在搜索引擎中被搜索到的概率，可以设定多个和音乐主题相关的关键字以便搜索，如音乐、流行音乐、港台音乐、欧美音乐、歌曲排行榜、 mp3 下载、在线音乐等。这些关键字虽然不出现在浏览器的显示页面中，但能被搜索引擎准确地获取。如何选择关键字、主页及各级页面设置什么样的关键字是搜索引擎优化（SEO）方面的技术，这里不展开讨论。
需要注意的是，不是关键字越多越好，大多数搜索引擎进行页面抓取时都会限制关键字的数量，过多的关键字反而会影响搜索引擎对该页面质量的评价。
基本语法：
<meta name="Keywords" content="value" />
其中，Keywords 表示关键字定义，content 属性值表示关键字内容，关键字之间要用逗号分隔。
下面列举了一篇文章的关键字，供大家参考。
<meta data-n-head="ssr" data-hid="keywords" name="keywords" content="做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】" />
2、设定描述
对于一个网站的每个页面，都可以在源代码中添加说明，用来将页面的主题描述清楚，这就是页面描述的作用。
但因为搜索引擎在评价页面与用户搜索关键字的相关度时，除了考虑关键字，也会分析描述的内容。所以，为了提高页面的搜索引擎排名，在编写描述时，应注意让搜索引擎更好地对本页面的质量进行评价。
搜索引擎同样对描述文字的字数有一定的要求，所以内容应尽量简明扼要。
基本语法：
<meta name="Description" content="value" />
其中，Description 表示描述定义，content 属性值表示描述内容。下面列举了蓝桥网站首页的描述，仅供大家参考。
<meta data-n-head="ssr" data-hid="description" name="description" itemprop="description" content="把开发的好用工具推荐给大家, 并提供一些思路和灵感 ✨ 一、为什么要开发一个这样的工具❤️ 二、VARBook介绍 三、怎么使用？ 1、快速访问 2、使用案例 四、VARBook有什么特点 1、为中文支持而生 2、命名规范,多种选择 3、急速响应? 4、智能复制 五、目前开发进度 TODO 期待2022年3月前完成❓ 六、VARBook是怎么实现的前端components" />
3、设定字符集
<meta> 标签中的 http-equiv 属性为“名称:值”对提供了名称，并指示服务器在发送实际的页面内容之前，先将这些“名称:值”对发送给用户浏览器。服务器向浏览器发送 HTML 文档时，至少需要发送一个content-type: text/html，告诉浏览器准备接收一个 HTML 文档。
编写一个文档时，需要确定该文档使用的字符集。一个 HTML 文档，可以通过<meta>标签说明该 HTML 文档所使用的字符集。这样浏览器在显示这个 HTML 文档时，就可以根据该标签确定用什么样的字符集显示这个文档。
在中国大陆地区，常用的编码是 GB 码，表示简体中文，字符集应设置为 gb2312 ；中国台湾地区常用的编码是 BIG5 码，表示繁体中文；欧洲地区常用 ISO8859-1 表示英文……对于不同字符集的页面，如果用户的浏览器不支持该字符集的显示，则浏览器中显示的将是乱码。
基本语法：
<meta http-equiv="content-type" content="text/html;charset=value" />
其中，content-type 表示字符集定义，content 属性值表示文档类型和字符集，其中 charset 指定字符编码。下面分别列举了使用 UTF-8 国际化编码的 <meta> 标签内容，后期在开发过程中默认使用 UTF-8 编码。
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
HTML5 字符集设置简化写法：
<meta charset="UTF-8" />
<body>标签
<body> 标签界定了 HTML 文档的主体。在 <body> 标签和其结束标签 </body> 之间的所有部分都被称为主体内容，此标签对必须成对出现。在 <body> 和 </body> 之间放置的是实际要显示的所有内容和其他用来控制显示方式的标签，如 <p></p>、<h1></h1>、<br />、<hr />等，它们中间所定义的文本、超链接、图像、表格和列表等将会在浏览器窗口中显示出来。
基本语法
<body> 主体内容 </body>
完整案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>案例1</title> <meta data-n-head="ssr" data-hid="keywords" name="keywords" content="做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】" /> <meta data-n-head="ssr" data-hid="description" name="description" itemprop="description" content="把开发的好用工具推荐给大家, 并提供一些思路和灵感 ✨ 一、为什么要开发一个这样的工具❤️ 二、VARBook介绍 三、怎么使用？ 1、快速访问 2、使用案例 四、VARBook有什么特点 1、为中文支持而生 2、命名规范,多种选择 3、急速响应? 4、智能复制 五、目前开发进度 TODO 期待2022年3月前完成❓ 六、VARBook是怎么实现的前端components" /> </head> <body> 完整案例 2022 © uiuing.com </body> </html>
