1、HTML基本介绍
定义：HTML(hyper text markup language)超文本标记语言，其中的超指的就是它能表述的不仅仅是文字，还有视频等（也有人认为超就是超链接）
HTML语言的发展历史：在互联网最初的时候没有HTML，我们只能通过网络传输最简单的文字内容，随着用户的要求越来越多，同时我们的技术不断发展，就出现了一种可以表达文字内容之外的语言……html1.0---->xhtml1.0（过渡）---->xhtml2.0（放弃）---->html5(代替以前的纯文本)
2、HTML网页骨架
网页是通过HTML语言来书写， 网页中有一些结构是默认存在的，这种结构我们叫做网页（html）骨架。
DOCTYPE（Document type文档类型）
html是网页中最大的一个标签，成为根标签
head网页的头，在它里边放置有用的信息，这些信息是给浏览器看的
head里默认有两个子标签，meta里边的charset设置当前文档的字符集、编码
title里边的文字是显示在浏览器标签上的网页标题
body里的内容显示在网页的空白区域
3、HTML语法和标签基本介绍
标签：是HTML语言的发明者人为定义好的一些“单词”，相当于汉语中的字
语法：语法就是定义这些字应该如何去解析和书写的规则
HTML标签中常见标签及基本语法：
1)我们认为的将HTML标签分为单标签和双标签两种
单标签<标签名/>
双标签 <标签名称></标签名称>
2)常见的标签
标题标签：在HTML当中人为的定义了六种标签分别为h1-h6，一个网页中只允许有一个h1 <h1>标题1</h1>
段落标签：<p>段落1</p> 中间的内容手动敲换行没有用，手动敲空格，无论敲多少，只显示一个空格
Ctrl+？：加注释，重复操作取注释
<br/>换行
 ；空格（只占一个字节，重复三个相当于空一格）
在HTML中允许嵌套书写，不允许交叉嵌套
4、图片标签
img单标签，添加图片：
<img src="地址"/>中的src=""称为标签属性
标签属性与标签名之间用空格隔开
标签属性由名字和值两部分组成，属性名与属性值之间用=进行连接
属性值要放在引号里，单引号双引号都可以
如果属性值是数字，那么可以省略引号
alt当图片加载失败的时候会显示它里边的文字。
Alt属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的在浏览器无法加载图像时替换文本属性高速读者他们失去的信息，此时，浏览器将显示这个替代性的文本而不是图像，为页面上的图片都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说非常有用。
<!--正常的图片--> <img src="03.jpeg"\> <br /> <!--宽度--> <img src="03.jpg" width="360"/> <br /> <!--高度--> <img src="03.jpg" height="360"/> <br /> <!--带标题的图片，鼠标悬停的时候可以看到标题--> <img src="03.jpg" title="非主流" width="360"/> <br /> <!--地址错误时图片为小×，鼠标悬停的时候可以看到标题--> <img src="04.jpg" title="非主流"/>
5、超链接标签
语法：<a href="目标地址" target="_blank">内容</a>
作用：可以实现在当前页面向新页面的跳转
属性：
1)target这个标签可以设置新页面在哪个窗口打开，当属性值为_blank的时候可以在新窗口打开
2)href的属性值设置为#的时候，为空链接，它的作用就是当用户再点的时候不发生跳转。
<!--a 双标签 href中写的是目标网页的地址 空链接一般出现在生产开发阶段，因为很多页面的线上真实地址 还没有写出来，所以先用空链接占位 --> <a href="03图片属性.html">图片属性测试</a> <br /> <!--空链接、自己跳自己--> <a href="#">百度一下</a> <br /> <a href="https://www.baidu.com" target="_blank">百度一下</a>
6、常见的图片类型
- Jpg（jpeg）：这是一种可以高度保留图片色彩信息的格式。
- Png：该类型的图片可以实现透明。
- Gif：图片所占体积小可以实现动图。
- Psd：它是一种分层的图片
7、路径
所谓的路径我们可以看成是程序代码中用来查找某个具体的资源所走过的路。
绝对路径：一般是以盘符为起点进行查找，或着就是一个绝对的URL地址（浏览器地址eg：https://www.baidu.com/img/bd_log1.png）。
相对路径：是相对于某一个已知的文件为起点进行资源的查找
相对路径的用法：路径是一个通用的存在，我们当以查找图片为例来讲解路径的使用，在实际工作中，相对路径使用的频率是最高的，我们人为的将相对路径分为三种：同级路径、下级路径、上级路径。（以查找图片为例的含义就是我们在HTML网页中插入一张HTML文件之外的图片，同时采用相对路径，所以这里的相对起点就是HTML之外的图片。）
1.同级-路径：同级指的就是HTML网页和目标图片在同一级目录里，对于同级路径的使用，我们只要在src中写入目标图片的名称即可。
2.下级路径：下级指的就是图片在HTML文件的下级目录下，此时我们需要一个/来向下进行穿透查找
3.上级路径：上级指的就是图片在HTML文件的上一级目录下，此时我们需要../来向上回退进行查找。
<img src="01.jpg" title="同级路径" width="360"/> <img src="img/02.jpg" title="下级路径" width="460"/> <img src="../03.jpg" title="上级路径" width="360"/> <img src="../../01.jpg" title="上上级路径" width="360"/> <img src="../../img/02.jpg" title="上上级文件夹img下的02图片" width="360"/>
注意：上述规则虽然都是以查找图片为例，但是总结的规律适用于其他类型资源的查找； /表示向下级查找，可以无限查找；../表示向上级返回，同样可以无限级返回。
7、表单
表单：就是一种在互联网上用于收集用户信息的一种结构，在HTML当中事先定义好的一个标签来完成这件事，标签名叫form，它是一个双标签，我们称之为表单域。
<form action="" method="get"> 用户名：<input type="text" name="username"/> <br /><br /> 密码框：<input type="password" name="mima"/> <br /><br /> <input type="submit"> </form>
注意：form标签就是HTML当中定义好的一个用来表示整个表单结构的双标签，我们称之为表单域；
form默认就相当于一张白纸，如果想要通过表单来收集用户的信息，HTML里又准备了很多标签，这些标签里使用最多的叫input；
action属性值表示将当前表单中的数据提交到哪里
Method属性值表示以什么样的形式来提交当前表单中的数据，最常见的get，post，其中get就表示将当前数据以明文方式通过URL地址进行传输，不安全，而post方式就是指将数据写在http请求的请求体当中，看不到填写的内容。
常见的表单元素
form标签只负责定义具体的表单整体，它里如果想要收集用户数据，就必须再有一些能够让用户进行输入填写的模块，此时HTML当中就定义了许多的比哦啊单标签来让用户完成输入，最常见的表单标签就是input，因为标签名称都叫input，所以HTML当中就设置通过type属性来区分。
1.文本输入框：<input type="text" name="username"/> 2.密码输入框：<input type="password" name="mima"/> 3.提交按钮：<input type="submit"> 4.单选框：<input type="radio" name="性别"/>男 5.复选框：<input type="radio" name="性别"/> 6.文本域：<textarea name="" rows="行数" cols="列数"></textarea> 7.下拉框：<select name=""> <option value="选项一">选项一</option> </select> 8.重置按钮：<input type="reset" value="点击重置"/> 9.普通按钮：<input type="button" value="点击"/>
表单元素注意细节
name属性：form表单通过不同的表单元素来收集数据，在这个过程中很多的表单元素名都叫input，如果直接将这些数据提交到后台就会出现数据无法区分的问题，此时为了分清哪个数据属于什么样的表单项，我们就人为的在input身上设置name属性，这样一来数据到达后端之后就会变成以下格式，username=“03167057”，pwd=“123456”，gender=“男”...这样就容易区分数据了。
value属性：定义某些表单元素的默认显示内容（文本输入框、提交按钮、重置按钮、普通按钮）
checked属性：属性值等于属性名，可以只写属性名，用来设置单选框和
复选框的默认选项
selected属性：这也是一个属性值=属性名的属性，添加在下拉选项身上，实现某个选项为默认选项。