一，HTML是什么
1，什么是HTML？
HTML（超文本标记语言）是用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源。HTML文件的文件扩展名为.htm或.html。
就HTML本身来说是一个纯文本，
2，什么是超文本？
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。（文字，图片，视频，音频，程序，链接…）
二，HTML的基本语法
1，HTML的基本骨架？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
<body>
....
</body>
</html>
2，HTML的标签的分类
- 结构：html head body title meta
- 文章：hn p br （em，i）都使文本倾斜，em具有强调意味； （strong，b ）都使文本加粗，strong具有强调意味；
- 超链接：a
- 图片：img
- 配合布局：div span
- 列表类：ul+li（无序列表，使用较多） ol+li（有序列表） dl+dt+dd（自定义列表）
- 表格类：table+tr+th+td+thead+tbody
- 表单类：form（表单） input（输入框） select+option（选择输入框 selected设置默认显示值） textarea（标签定义多行的文本输入控件）
- 浮动框架：iframe（引入第三方窗口）
3，HTML的基本语法
1.语法非常松散
2.不区分大小写
3.对于单标签（最后的 / 可加可不加）
4.属性值可以不加引号（在JS中单引号和双引号是一样的）
4，书写HTML的好习惯
1.必须写上HTML的基本骨架
2.标签全部使用小写
3.属性名不加引号，属性值加上引号
4.标签可以嵌套，但是不能交叉
5.一定要正确的结束标签
三，HTML中的基本标签
1，标题标签
< hn > < / hn > （headline）
应用场景：新闻/文章中：一级标签
2，段落标签
< p > < /p >（paragraph）
应用场景：一个段落 有时候需要配合br标签来用
3，超链接标签
< a > < / a >（anchor锚点的意思）；使用较多，会用于插入背景链接图片；
场景：超连接 文字 图片
分类：站内连接 站外连接 锚点连接 其它连接
路径：相对路径 和 绝对路径
target: _self 跳转当前页面； _blank跳转新的页面；
4，图片标签
< img > image（插入图）
场景：网页上的图片（网页上的图片也可能是背景图）
路径：相对路径 和 绝对路径
alt: 当出现问题时候弹出的提示信息；
5，表格相关的标签
只是在特别的地方使用，表格也是可以用于页面布局的，但是现在表格布局基本被淘汰；现在使用最多的布局是float、flex布局方式；
6，表单相关的标签
表单：< form > < / form >标签
表单元素：
- input ：属性（button、 checkbox、 color 、date 、datetime 、datetime-local 、email 、file 、hidden 、image 、month 、number 、password 、radio 、range 、reset 、search 、submit 、tel 、text 、time 、url 、week）
- select+option（ 定义下拉选项；option元素定义下拉列表中的一个选项（一个条目）selected属性定义默认的选项显示；disabled属性规定此选项应在首次加载时被禁用；optgroup属性定义下拉框中同类型条目的标题；具体格式为：select+optgroup+option）
- textarea（标签定义多行的文本输入控件，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier），控件可以通过 cols 和 rows 属性来规定 textarea 的尺寸，但是不推荐这种方式，一般设置css中的height，width）
7，标签的分类（行内元素,行内块元素,块级元素）
男标签（块级元素）：独占一行的标签， hn、 p、 div、 列表类、 表格类
女标签（行内元素）：并排显示的标签， a、 span、 strong、 em、 i、 b
人妖标签（行内块元素）：除了可以并排显示其他属性和男标签属性一样， img、 input
这里所说的男、女、人妖标签是为了便于理解基于所划分的。而不是原本的定义
四，浮动框架
< iframe > < / iframe>（创建包含另外一个文档的内联框架（即行内框架））可以引入自己写好的页面，也可以引入第三方网页；
五，其它标签
- opacity（表示给背景图片或者背景颜色加透明度；范围：0~1）
- display （相当于给标签做手术，可对三种类型标签进行转换）
- display: none; – 让标签消失(隐藏元素并脱离文档流)和text-indent：-99999px效果一样；
- display: inline; – 行内元素（可将元素变为行内元素）；
- display: block; – 块级元素(可将女盒子变为男盒子)；
- display: inline-block; – 既有inline的属性也有block属性；
- cursor：pointer 可以在鼠标选中标签时候光标变为手型的效果；
- vertical-align： 给文本垂直居中，和对文本加line-height属性实现效果一样；
- placeholder：在input表单中加属性placeholder="请输入商品名称、地址等"表示输入框中有默认字体，如果输入内容时候，点击输入框显示内容会消失，会直接聚焦进行输入；（和value属性不同的是，value点击文字不能消失）修改placeholder属性颜色，加代码：
input::-webkit-input-placeholder {
color: #dadada;
}