HTML标签的分类：
1. 块儿级标签 默认独占一行（整个浏览器的宽度） 可以设置长和高
2. 行内标签（内联标签） 长度由自己的内容来决定的。无法设置长和高
HTML嵌套的规则：
1. 块儿级标签可以嵌套行内标签 （div标签可以嵌套div标签）
2. p标签不能嵌套div标签
form表单系列：
注意事项：
1. form 不是 from
2. input标签 必须要带一个name属性
3. 如果form里面有文件提交的话 必须加一个属性：enctype="multipart/form-data"， 同时使用post方式提交
4. 提交按钮必须是 <input type="submit">
input标签
1. text
2. password
3. submit
4. radio
5. checkbox
6. file
select下拉框
1. 普通下拉框
2. 多选下拉框 multiple
3. 分组的下拉框 optgroup
textarea (大段文本)
2. CSS（改变网页的外观效果）
0. 前提
如何在HTML文件中使用（引入）CSS？
三种方式
1. 直接在标签里通过style属性来定义CSS样式
2. 在head标签中通过 style来定义
3. 把样式（CSS）文件单独写在一个.css文件中，然后通过 link标签来与HTML文件建立联系
CSS语法：
选择器 {
样式1：值1;
样式2：值2;
...
}
1. 找标签
CSS选择器
1. 基本查找
1. 标签选择器 （改所有/设置默认样式）
2. ID选择器 （针对某一个特定的标签修改样式）
3. 类选择器 (根据需求修改某一类标签的样式)
2. 通用（全选）
1. *
3. 组合选择器(HTML标签的层级关系)
1. 后代选择器 （从x的子子孙孙找y标签）--> x y
2. 儿子选择器 (x的儿子y标签) --> x>y
3. 毗邻选择器 (紧挨在x下面的y标签) --> x+y
4. 弟弟选择器 (下面所有的xx标签) --> x~y
↑上面常用
4. 属性选择器
更多用于找input[type="text"]
5. 分组和嵌套
1. 分组 （减少重复的CSS样式代码） 逗号分隔的两个选择器
2. 上面的选择器都支持混搭使用
6. 伪类选择器
1. div:hover { color: red;}
7. 伪元素选择器
1. p:before {} 在内容前面加
2. p:after {} 在内容后面加
CSS选择器的优先级：
0. 继承的优先级最低
1. 当选择器相同的时候，谁靠近标签谁样式生效
2. 当选择器不同的时候，我们按照权重计算公式来判断哪个样式生效
（内联样式1000>ID选择器100>类选择器10>元素选择器1）
不常用也不推荐使用的 !import
2. 改样式(CSS属性)
1. 字体相关
1. color 修改字体颜色
2. font-size 字体大小
2. 文本
1. color 字体颜色
2. text-align 对齐方式
3. text-decoration 文字装饰 (去掉a标签的下划线 text-decoration: none;)
3. 背景相关属性
1. background-color
2. bakground-image
1. 把很多小图片合并成一张大图片
2. 鼠标滚动 背景不动（姑娘一直在看着你）
4. 边框
1. border: 1px solid red;
2. 画圆：border-radius=宽/高的一半
5. display
1. block 显示成块级标签
2. inline 显示成行内标签
3. inline-block 既有块儿标签右有行内标签的特点
4. none 隐藏
6. CSS盒子模型
由内到外：
1. content 内容
2. padding 内填充 （用于调整内容和边框之间的距离，撑大标签）
3. border 边框
4. margin 外边距 （用于调整标签和标签之间的距离）
7. float 浮动（失去原来的位置）
1. left 往左浮
2. right 往右浮
3. none 不浮（默认值）
浮动的规则：
1. 无论什么标签 一旦浮动就变成了块儿级标签（可以设置宽高）
2. 浮动的标签总是浮向前一个浮动的标签，如果摆不下就挪到下一行开始
8. 清除浮动 clear --> 指的是清除浮动带来的负面效果
1. left 我的左边不能有浮动元素
2. right 我的右边不能有浮动元素
3. both 我的两边不能有浮动元素
最常见应用：
.clearfix {
content: "";
display: "block";
clear："both"
}
9. 定位
1. 相对定位 relative （相当于标签原来所在的位置来定位）
2. 绝对定位 absolute (相对于已经定位过的祖先标签来定位) 失去原来的位置
3. 固定定位 fixed （固定在屏幕的某个位置) 失去原来的位置