前端之路 day1 html和css

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 （固定在屏幕的某个位置) 失去原来的位置