前端Web开发HTML5+CSS3+移动web（基础-flex）
网页设计套路：从上到下，从整体到局部
１：HTML定义：
（1）超文本是点击可以页面来回切换的链接
（2）标记就是标签语言
２：标签的语法
（1）：有单标签，双标签
（2）：单标签：不需要包裹内容（例如换行，水平线）
（3）：双标签：需要包裹内容（例如加粗文字）
３：标签之间的关系
４：HTML基本骨架
５：注释
（1）：快捷键：ctrl+/
（2）：加了注释页面就看不见了
6：标题标签
（1）：h1最大且每个网页只能用一次，h2-h6没有使用限制次数
（2）：他们都独占一行，后面的内容将在下一行显示
（3）：标题标签一般用于题目已经产品
7：段落标签
（1）：标签里面内容独占一段，标签后面的内容将在下一段显示
（2）：标签里面的字比较多且自动换行
（3）：段落之间还存在间隙
8：换行和水平线标签
9：文本格式化标签
1：一般都用左边的格式化标签
2：两个文本格式化标签在一行不会换行
10：图像标签
他是一个单标签
11：路径
相对路径：
./：表示进入当前文件所在的文件夹
../：表示进入当前文件所在的文件夹的上一级文件夹
进入哪个文件夹就用文件名+/
绝对路径：
从电脑的盘符开始查找
写文件的完整的路径
找自己电脑中的文件一般用相对路径
找别的网站的文件一般用绝对路径
12：超链接
作用：点击跳转到其他页面
13：音频标签
标签属性可以叠加
14：视频标签
综合案例一：个人简介
网页制作思路：从上而下，先整体在局部，逐步分析制作，还要写一点就要刷新浏览器看效果
综合案例二：vue简介
15：列表标签
（1）无序列表
（2）有序列表
（3）定义标签
16：表格标签
th标签：自动加粗和剧中
td标签：普通的单元格
border：为表格增加边框线
一个<tr><tr>代表一行
<table>
这是第一行里面有一格单元格
<tr>
<th>111</rh>
</tr>
这是第二行里面有一格单元格
<tr>
<td>111</td>
</tr>
</table>
表格结结构标签
是给浏览器看的，人眼是看不见的
合并单元格
不能跨结构合并
17：表单
（1）表单input标签
text是文本框：输入什么就显示什么，它是单行文本，输入的内容不会换行
password是密码框：输入什么都显示点
radio单选框：只能选一个
checkbox多选框：可以多选
file上传文件：可以选择上传的文件
input标签占位文本
当我们输入文字后提示信息就消失，消除文字后提示信息就出现
单选框详解
1：我们可以给单选框分组，名字一样的为一组，一组的单选框只能选一个
2：给单选框增加check代表默认选中，我们刷新页面时就已经默认选中了
多选框详解
1：给多选框增加check代码默认选中
文件上传详解
1：只能选一个文件
2：给上传文件增加multiple可以多选文件，上传多个文件
（2）表单下拉菜单标签
1：下拉菜单默认显示第一个选项
2：想要默认显示别的选项加上selected属性
（3）表单文本域标签
1：输入文字超过文本域的长度会换行
2：标签中间是提示信息，显示在文本域当中
（4）表单label标签
1：增大了表单标签的点击范围，与表单控件绑定
label标签的写法
（5）表单按钮标签
1：想按钮的功能可以用要把表单控件放到form标签里面
2：form标签的作用是把表单控件放到一个区域内管理
18：无语义的布局标签
div和sqan标签
1：div占一整行，是大盒子
2：span不占一整行，是小盒子
字符实体
网页的特点
1：在代码中敲键盘的空格，网页只识别一个
2：所以我们用 
3：如果我们原样显示<p>，网页会认为他是标签，怎么让他认为普通字符呢，那就左括号<，右括号>
19：css
（1）什么是css
他给浏览器看的放到head里面，一般放到title下面，css的代码写在<style></style>里面
（2）css引入方式：
1：内部样式表css代码写到style里面
2：外部样式表css代码写到css文件里面，不用加style,直接在title标签下面引用就行了
3：行内样式写在标签的style属性值里
（3）css选择器：
标签选择器
1：使用标签名设置css样式
2：所以的同名标签都会设置相同的样式
类(class)选择器
1：一个标签可以有多个类名，中间用空格隔开
2：多个标签可以使用相同的类名
id选择器
通配符选择题
用途：清除所有标签的默认样式
20：画盒子
21：文字控制属性
字体大小默认是16px
字体粗细：正常400或者normal，加粗700或者bold
字体倾斜：正常normal.倾斜：italic
行高：用于设置多行文本的间距，写数字+px或者直接写数字也行（直接写数字是当前属性值的倍数），行高的30px，文字的高度加上下间距一共是30px
行高垂直剧中：把字体的行高设置为盒子一样的高度，只限文字在一行内
字体族：直接字体名，可以写多个字体名，浏览器从前往后找，找到就显示哪个，最后一个建议使用无衬线字体
字体复合属性：从左到右按顺序写属性值
文本缩进：写法数字+px或者数字+em（1em是当前标签的字号大小，2em就是2倍），一般使用em，1em代表缩进1个字节的大小，em会随着字体的改变而改变
文字对齐：给文字或图片剧中，看他在哪个标签里面，在哪个标签里面给哪个标签加css样式让他剧中
修饰线：none:无 underline:下划线 line-through:删除线 overline:上划线
颜色：
总结：想要给文字或者图片设置css样式，看它在那个标签里面，给所在的标签设置css样式
22：调试工具
右键点击检查
1：如果有黄色的代表这个代码是错误的
2：如果前面能勾选代表这个样式生效了，如果不能勾选代表没有生效
23：复合选择题
（1）后代选择题
（2）并集选择题
1：最后一个标签不用加逗号
（3）交集选择器
1：同时满足多个条件用交集选择题
（4）伪类选择器
1：设置鼠标停在那个地方的悬停状态，直接任何选择器＋:hover
（5）伪类选择器扩展
24：css三大特性
（1）继承性
1：我们设计父级的字体样式，他的子级中的字体也会继承下来
2：子级有自己的样式就显示自己的样式就不继承父级的
（2）层叠性
1：设置相同的属性后面的覆盖前面的
2：设置不同的属性都会生效
（3）选择器优先级
1：范围越大优先级越小
2：!important将选择器的优先级提到最高
（4）优先级的计算规则
1：如果一个标签被多个选择题选择，生成的样式按优先级，优先级的对比按顺序从左到右进行对比
2：!important优先级提到最高
3：继承的权重最高
25：Emmet写法
1：div可省略，直接.
2：标签乘以几就显示几个
3：css里面的属性也可以省略
26：背景属性
（1）：背景图默认是平铺
（2）：可以用repeat设置平铺方式
（3）：position可以设置背景图的位置，正负控制上下左右
（4）：背景图缩放
cover或者100%:让图片完全覆盖盒子，但是图片可能显示不全
100%图片的宽度和盒子的宽度一样，高度按等比例缩放
contain:等比例缩放，直到图片和盒子的尺寸一样,盒子可能覆盖不全
（5）：背景图固定
可以设置背景图固定，不随着滑动
（6）背景图复合属性
1：后面直接写css的属性
26：显示模式
（1）块级元素
例如：div
1：独占一整行，一行只显示一个
2：增加宽高生效
3：宽度默认是父级的百分之百
4：高度如果没有设置默认由内容撑开
（2）行内元素
例如：span
1：不换行
2：增加宽高无效
3：宽高尺寸由内容撑开
（3）行内块元素
例如：图片标签img
1：不换行，一行可显示多个
2：增加宽高生效
3：宽高尺寸由内容撑开
（4）转换显示模式
27：结构伪类选择器
选择题：frist-child选择第一个标签
选择题：nth-child(n):n为多少那个标签生成
28：伪元素选择器
1：必须设置content属性，不然不显示
2：这个元素是行内显示模式
29：PxCook软件
测量距离用的
30：盒子模型组成
内容和盒子之间用内边距(盒子变大，内容不变)
边框线用border（盒子变大）
盒子和盒子之间用外边距（整个盒子不变，外面撑大）
（2）盒子模型边框线
（3）盒子模型内边距
记忆方法：顺时针，哪个没有看对面
（4）盒子模型尺寸计算
盒子模型尺寸：内容+内边距+边框线
padding：本来是内容尺寸不变，盒子尺寸变大
想要盒子尺寸不变有两种方法：
手动减：内容尺寸减去padding的尺寸，通过缩小内容尺寸来固定盒子的尺寸不变
自动减：加上box-sizing：内容变小，盒子不变，原理：通过缩小内容尺寸来维持盒子不变
（5）盒子模型外边距
出现盒子的外边， 改变外边距，盒子尺寸不变，整体移动，不会撑大盒子
剧中设置：margin：0 auto
版心剧中要求盒子有宽度，否则无法做剧中
（6）清除默认样式
清除标签的默认样式
去掉列表的项目符号用list-style:none
（7）盒子模型——元素溢出
（8）外边距问题——合并和塌陷
1：两个盒子上下都有margin取最大值
1：给子级的盒设置上边距就会导致父级向下移动
解决办法：
第二个和第三个解决的办法是让浏览器正确识别父级的位置，只在子级身上实现正确的样式
推荐使用padding来改变
（9）行内元素——内外边距问题
给span元素增加margin和padding只会改变左右的距离不会改变
（10）盒子模型——圆角
多值写法：从左上开始，顺时针开始，如果没有值看对角
1：圆形设置的是最大为百分之50
2：胶囊设置为高度的一半px
（11）盒子模型——阴影
（12）标准流
（13）浮动
1：浮动的盒子顶对其
2：具有行内块的特点
3：浮动的盒子会脱离标准流的控制
4：如果浮动的盒子超出父级的宽度则会掉下去
清除浮动：
子级浮动，父级的高度不存在，浏览器认为子级和父级的盒子都不存在，下面的盒子会下来，那想要子级浮动了还想撑开父级的高度，就要清除浮动
简单来说清除浮动的作用就是：让盒子有浮动的效果，并且浏览器能够识别浮动的高度，撑开父级的高度
31:flex布局
1：通过父级控制子级
2：解决的子级脱标的问题
（2）flex组成
父级是弹性容器，子级是弹性盒子
（3）flex布局
（4）主轴对齐方式
属性值：
后三个常用
center：集中
space-between：两边没有，中间有空
space-around：中间的空是两侧的两倍
space-evenly：中间的空和两侧的空大小一样
（5）侧轴对齐方式
属性名：
aligh-items：控制全部的弹性盒子（直接在父级里面加）
aligh-self：控制单个弹性盒子（控制谁加给谁）
属性值：
前两个常用
stretch：弹性盒子向下拉伸，如果弹性盒子有高度则无效
（6）修改主轴方向
只用第二个就行其他不用记
1：column：从上到下依次排列
2：在flex里面，改了主轴方向，侧轴也跟着改变
（7）弹性伸缩比
1：想要哪个盒子占几份就给哪个盒子加
2：flex控制弹性盒子在主轴方向的尺寸，占盒子剩余部分几份
（8）弹性盒子换行
1：弹性盒子默认自动挤压和拉伸
2：想要换行使用flex-wrap
（9）行对齐方式
上下中
space-between：两行中间的间距（行间距）
space-around：行中间的是最上和最下的两倍
space-evenly：行的上中下间距一样
1：只有一行效果不生效
常见问题
1：背景图片的位置由backgroud-position控制的，不受内边距的影响
2：在flex里面，改了主轴方向，侧轴也跟着改变
3：在flex里面，弹性盒子没有设置高度和宽度，默认情况下主轴按内容撑开，侧轴默认拉伸