一、引入
上课之前，我们先看几张图片来感受一下HTML，做的很粗糙，就凑合凑合看吧。
这是第一张图片（基本结构、标题标签<h1>、段落标签<p>、图像标签<img>）
这是第二张（块元素<div>、输入标签<input>、按钮标签<button>、斜体标签<em>、链接标签<a>）
第三张（行内元素<span>）
看完这几张图片感觉怎么样，是不是感觉比普通文本酷一点，是不是对HTML有一点感兴趣了，是不是想立马开始学HTML，不感兴趣也没关系，这个有可能是你们必须要学的。
二、正文
接下来让我们进入正题，正式开始学习HTML
想要学习HTML，使用HTML，我们就得有个能写HTML的软件，因为有门才能进房间，才能使用房间里的东西，有编辑器我们才能写HTML，现在市面上最常用的就是vscode，成本低性能好，所以我们选择vscode作为HTML的编辑器。
那我们开始安装vscode吧
（一）vscode安装
1.打开浏览器搜索vscode官网，选中我框的那个
2.点进去就会出现下边的画面
3.这时我们可以看到有两个按钮，红色框起来的那两个
左边这个是下载Windows版本，如果你的电脑不是Windows系统，就点右上角那个蓝色的东西选择要下载的版本
4.这是三个操作系统，你们电脑是哪个就下载哪个
5.下载完以后它会弹出一个安全警告的窗口，点击运行
6.同意协议，进入下一步
7.这个时候它会问你想要下载到哪个位置。如果你的C盘足够大，完全不用担心内存问题，你可以把它放到C盘里，如果你的C盘很小，可以放到D盘或者E盘；当然即使你的C盘很小，但你就想把它放到C盘里边或者说你手速很快，我还没讲到你就已经“啪”的放到默认的C盘里了，这些都是没有问题的，完全看个人喜好，不做强制性要求。不要着急不要着急，看到浏览前边那个框了吗，为了我们以后打开文件夹方便，我们在前边这个框里，给文件夹改个名，它不是叫Visual Studio Code吗，我们干脆取首写字母，叫它vscode好了，这样以后当我们看到vscode这个文件夹的时候，就能很容易的知道这个是Visual Studio Code的文件夹了。
做完这些工作以后就可以下一步了
8.倒数第二个不要选
9.然后确认信息，看看是不是我们刚刚选的，如果不是就返回上一步重新选，是的话就点安装
安装都是要点的，因为就算你刚刚选错了，你后来改对了还是会出现这个东西，所以说安装都是要点的
10.点完安装就会出现这个下载任务，我们等它下载完成就可以使用了
11.如果出现这个东西的时候，恭喜你，已经完成下载了
（二）HTML使用
1.安装中文包插件
（1）这是我们第一次打开vscode的样子
（2）安装中文包
方法1：右下角
方法2：在扩展（左侧第四个图标，一个小虫子和一个三角形那个）里搜索Chinese插件并安装
2.安装Live Server（开发者Ritwick Dey)插件
（1）扩展中搜索Live Server，点击安装
（三）HTML超级简单的介绍
HTML全称Hyper（/'haiper/) Text Makeup Language，是一种超文本标记语言。那么什么叫超文本标记语言呢。“超”，字面意思就是“超于、超过”，是超出文本的一种标记语言。比文本内容更丰富、功能也更强大，像插入图片或者超链接这种，HTML都能够轻松的实现并且达到我们想要的结果。
既然它的好处那么多，那它的标记语言和文本一样吗，当然不一样，如果一样，它们的功能应该相同，而且也没有必要费时费力制定两套不同的规则去干同一件事。
基于功能强大、内容丰富的特点，HTML的标记也更加复杂，它不像文本、笔记那样只是直接打字，需要特定的符号标记，比较典型的就是<>的使用。
当我们想要使用HTML的时候，就需要给网页传达一个指令，告诉它们我们输入的这个东西这个不是普通的文本，是HTML，它们应该怎么怎么做。
<!DOCTYPE html>就是声明文档，是我们给网页传达的指令，当我们输入<!DOCTYPE html>的时候就是在告诉网页我要用HTML语言了，你们都注意了，都要小心了，都要好好配合，按照我打的执行。
（四）HTML基本结构
接下来我们说说网页的基本结构，就像人的骨骼结构一样，每个人的骨骼结构都是一样的，框架都是一样的，只是某些特征不太一样
人的骨骼结构反映在网页里边就是网页的基本结构，我们来打一个网页的基本结构看看
基本结构（快捷键方式：必须在英文状态下，shift+！+enter）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
</body>
</html>
我们现在来剖析一下基本结构里的东西
人有头有身体，网页也有头和身体，但是因为在网页里边，所以头部在网页中叫做页头，身体在网页中叫页身，这应该很好理解吧，很好理解。head（头部）在网页中就是页头，用户不可见内容；body（身体）在网页中就是页身，是用户可见部分，开发者期待用户看到的内容都会在<body>标签里边显示。
因为在很多网页中，直接输入中文会出现乱码等问题，所以我们需要找一种不会出现乱码的语言，来支持文档的正确读取。“UTF-8”是大多数书写语言的字符，能够处理几乎所有文本内容，能避免出现上边我们说过的乱码问题，也能避免出现一些其他问题，所以UTF-8是我们首选也没理由不选的字符。
<meta charset="UTF-8">定义了网页的编码格式是UTF-8字符，现在我们就不用担心乱码问题了。
但是有时候我们明明已经定义了“UTF-8”，为什么还会出现乱码呢？
对于设置“UTF-8”标签后出现的网页乱码问题，其实归根到底就是：你通过 <meta> 标签设置的编码和网页文件在保存时所使用的文档编码不相同造成的！但是不用担心，大多数情况你输入“UTF-8”都是可以的，只有很少情况不可以，我们现在先不去讨论，因为目前还不会遇到。
这句<meta name="viewport" content="width=device-width,initial-scale=1.0">是视口元素，避免因页面太宽而被移动端浏览器缩放，缩放后显示在网页上就没那么优雅，我们只需要加上这句话就可以让它变优雅。
（五）HTML标签
前边我们说到过“网页的基本结构都是一样的，只是某些特征不一样，这些不一样的特征就是靠<body>里边的标签和属性等体现的”。为什么每个人做出来的网页不一样，也是因为这个原因，你们使用的标签和属性不同，导致网页的呈现效果不同，网页呈现的效果本质上是你在发挥想象力和创造力。
现在我们进入标签的学习
文本有标题、段落、链接、图像等，HTML也有标题、段落、链接、图像等，这些元素在HTML中都用特殊的标签表示，也就是<>。
如果是一般标签，我们需要用起始标签和结束标签把内容给保护起来。如果是自闭合标签，就不需要结束标签，它本身就可以实现闭合，用不到结束标签。结束标签就是在起始标签的基础上加一个斜杠，斜杠用来区分起始、结束标签。
例如：一级标题，<h1>一级标题</h1>，<h1>是起始标签，</h1>是结束标签，中间就是我们的第一个标题。
那一般标签有哪些，自闭合标签又有哪些呢
1.一般标签
一般标签主要有标题、段落、链接、图像、加粗、斜体等等。
（1）标题（有的叫head有的叫header还有的叫heading，不管叫什么都简称为小写字母h，标题1写作<h1>，标题2写作<h2>）
注意：h后边要加数字，因为标题靠数字来区分等级，数字的范围只能在1到6之间，因为标题只规定了1到6这六个等级，超出等级就会无效。
标题的六个等级，分别是h1、h2到h6，h1字体最大，h2次之，以此类推。
（2）段落（paragraph，简称小写字母p，写作<p>）
（3）链接（anchor，简称小写字母a，写作<a>）
因为链接已经引用了外部资源，不只是单纯从键盘输入就OK的，所以想要使用这个外部资源就需要告诉网页这个链接的地址，这时我们就需要用到属性href，告诉它链接的位置。
具体写法：<a href="完整的网址">内容</a>
实现网页的跳转：在当前页签中打开，添加target=“_self”；在新建页签中打开，target=“_blank”
（4）图像（image，简称小写字母img，写作<img>）
同样的，图像也是对外部资源的引入，也需要告诉网页图像的地址，这时我们用标签src告诉网页图像的位置。
举个栗子：<img src="./img/2.jpg" width="70" height="60" title="home">
width（宽度）：用来调整图片的宽度；height（高度）：用来调整图片的高度；属性title的作用就是当你把鼠标放在图片上时，它会显示title引号里的东西
注意： 不同的属性中间用空格隔开，用空格提示浏览器该属性结束
（5）加粗（strong，写作<strong>）
作用：实现字体的加粗，起到一个强调的作用
（6）斜体（emphasize，简称em，写作<em>）
2.自闭合标签
（1）换行（break，简称小写字母br，写作<br>或</br>)
(2）分割线（horizoned rule，简称小写字母hr，写作<hr>)
（六）HTML注释
那我们学了那么多内容，不可能一下就能记住，当我们回头看知识点的时候很有可能会出现看不懂的情况，注释就是很好的笔记，能够帮助我们迅速的回忆起之前的知识。
注释的形式有多种，第一种是最简单的两道斜杠；第二种稍微复杂一点，例如：<!--空白-->，中间这块空白的地方就是我们写的笔记。
但是注释不可以嵌套，HTML无法识别多个注释的嵌套，很有可能把你中间的注释标签当作文本呈现给用户，因此有几个注释就要写几个注释。
（七）HTML绝对路径与相对路径
前边我们在学习链接和图像的时候都提到过地址、位置，我们不仅要告诉网页链接和图像的地址，我们还要告诉网页它们的路径，应该怎样获取。通常把路径分为两种，绝对路径和相对路径。
1.绝对路径
包括本地绝对路径和网络绝对路径
（1）本地绝对路径
这个绝对路径就很绝对，它本来在哪个地方，绝对路径就在哪个地方。比如说你在C盘的某个文件夹新建了一个文件，这个文件的绝对路径就是C盘那个文件夹里的文件，如果你把它放到D盘，它的绝对路径就会发生改变，变成了D盘下你写的那个文件夹中的文件。
使用本地绝对路径的一个致命缺点就是更换设备后可能会导致网页图片不显示，因为你调用的是你本地设备的资源，现在的设备上并没有你所引用的资源，除非你在现在的设备上，在同一位置上放置好你引用的资源，才有可能显示。
为什么说是有可能呢，我们不是已经放置好了吗，为什么还是引用不成功，怎么还是看不到？比如有一天你引用了电脑E盘中的某个文件写了一个网页，你同学一看，整挺好，不错，一直联系你说想要这个网页，但是很不幸，他的电脑并没有E盘，那他无论如何也没办法放到同一个位置，因为他连引用这个资源的E盘入口都没有。从那以后你这个同学可能再也没有找过你，这个城市又多了一个伤心的人哈，所以不推荐使用。
（下图是一个本地绝对路径的例子：C盘下的Users文件夹里的Lenovo文件夹里的Desktop文件夹里的VScode文件夹里的html文件夹里的GXY.html文件。是不是很绕口，但是等你理解了以后就会觉得这讲的什么啊，怎么这么啰嗦，这不是一看就明白吗，但是为了理解，我们初期要详细介绍，可以原谅可以原谅）
（2）网络绝对路径：通俗来讲就是一个图像的完整网址
我们来爬一个人民日报的图片（右击->在新标签页中打开图像），就可以看到图片的网络绝对路径
可能有同学会疑惑，为什么要用人民日报举例子？因为我们在使用网络绝对路径的时候，其实是引用了别人的资源，如果别人在图片上加了防盗链，那我们就不能完成引用了，所以我们引用网络绝对路径的时候，要注意图片是否加了防盗链。
2.相对路径
相对路径就是说它不是绝对的，它是相对于当前文件的路径，以我们现在打开的网页为起点，分别有同级、上一级、下一级。
（1）同级：与当前所编辑的文件位于同一文件下，它们是平行并列关系（CSS和HTML就是同级关系）
（2）上一级：位于当前所编辑文件的上一级（HTML就是html和img的上一级）
（3）下一级：位于当前所编辑文件的下一级（img的下边有1.jpg、2.jpg和3.jpg等等，这些1.jpg就是img的下一级）
（八）常见图片格式
既然我们<img>标签是对图片的引用，在相对路径和绝对路径中图片也经常出现，由此看来学习图像知识必不可少。
现在让我们一起详细的学习图片的知识
图片的格式有很多种，像jpg格式、png格式、bmp格式、gif格式、webp格式、base64格式，这些格式最常见也最典型。
1.jpg格式：不支持透明背景和动态图，但占用空间小、颜色丰富
jpg通常会丢掉一些肉眼不可见的细节来减少对空间的占用，但会降低图片的画质，图像放大越明显失真显示的也就越明显，适用于对图像没有极高要求的场景。比如说如果有一天一个你特别讨厌的人问你要什么什么图片，你特别不想给但又不能不给，这个时候你就甩给他一个图片的jpg格式啊，给了又没完全给，让他体验一波朦胧美。
2.png格式：不支持动态图、占用空间较大，但颜色丰富
png是一种无损压缩格式，能够高质量的呈现原图像，通常用在一些对图像要求比较高的场景，像公司的logo图、高质量呈现设计师体现个性设计的一些图片、重要配图。由于它太高清、太清晰了，占用的空间自然比jpg格式大，而且png格式支持复杂的透明背景，也用在一些图像有透明背景的场景。
3.bmp格式：不支持透明背景和动态图、占用空间极大，但颜色丰富
bmp格式是一种不进行压缩的格式，占用空间极大，适用于对图片要求极高的场景，例如大型游戏中，网页里很少见。
4.gif格式：支持简单透明背景（线条边缘简单清晰，不算特别复杂）和动态图，但颜色较少
gif格式主要适用于网页动态图片的呈现，仅支持256种颜色，相对较少。
5.webp格式：支持透明背景和动态图、占用空间少、颜色丰富，但兼容性差
webp是谷歌新推的一种格式，用来显示网页各种图片，具有以上所有优点，但目前有些浏览器不支持webp格式，你用webp格式它根本看不了，因此兼容性不是很好。
6.base64格式：图片转文本，通过浏览器显示
（绿色粗体是每个格式的优点，蓝色字体为要求）
