使用vscode选择h5语言，回车，vscode会帮我们新建一个html文件
大致结构如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
</body>
</html>
<!--
1 html:负责网页结构的
2 css:负责网页样式的
3 html:由标签组成
4 单标签：没有内容
5 双标签：开始标签和结束标签 可以放内容的
6 所有写在元素开始标签之中的都是该标签的属性
7 <!DOCTYPE html>：用来声明文档类型
8 <html></html> 代表了整个网页，这个元素包裹了整个完整的页面，是一个根元素。
9 <head></head>用来写网页的一些配置信息
10 <meta charset="UTF‐8"> 声明文档的编码格式
11 <title></title> 负责网页标题
12 <body></body>负责网页内容
13 格式：标签换行， 开始标签和结束标签要对齐（一条竖线）
14 子父级之间相差一个tab键
-->标签
标签分为单标签和双标签，其中类似有头有尾的标签为双标签
而这种只有单个的为单标签
div标签
div标签写在body标签内，是body的子标签
作用是把文档分割成独立的，不同的部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div>
</div>
</body>
</html>样式
内联样式
直接写在div标签内，可以定义块级元素的样式，如宽、高、颜色等
<div style="width: 200px;height: 200px;background-color: aqua;">
</div> 内部样式
使用内联样式定义div样式显得代码可读性很差，当div标签很多时，很不容易分辨
所以可以使用内部样式，将div的样式定义在head中的style标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
div{width:50px;height:50px;background-color:yellow}
</style>
</head>
<body>
<div></div>
</body>
</html>当有很多div标签是可以使用class和id为标签命名，class为类名，id为属性名。
id不可以重复，开发中要做到见名知意
class在style标签内前用.进行调用，id用#调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.testClass{width:50px;height:50px;background-color:yellow}
#testId{width:50px;height:50px;background-color:aqua}
</style>
</head>
<body>
<div class="testClass"></div>
<div id="testId"></div>
</body>
</html>外部样式
定义在head中的style标签中其实还是很乱，所以可以使用外部样式，将样式定义在一个单独的css文件中。
在head中使用
<link rel="stylesheet" href="test.css"/>其中href添加css文件所在路径，可以使用相对路径
相对路径的含义为相对于正在编写的html文件所相对的路径，可以使用../返回上一层文件夹
样式的优先级
样式是有优先级的
!important>内联样式》内部样式(id<class<tag)
权值:10000 1000 100 10 1
写在后面的会覆盖前面的样式其中!important只对其中一个属性生效，如
.testClass{width:50px;height:50px;background-color:yellow !important}其中!important只对颜色生效，高度和宽度遇到样式冲突会按照上述规则进行处理
改变元素位置
margin（外边距）
使用margin可以给div上下左右加上外边距
margin-top
margin-bottom
margin-left
margin-rightmargin问题:
- margin塌陷：在子父级关系中使用margin-top，会使子父级分不开，把外边距加到了父级身上，这种情况称为margin塌陷。如果父级也有margin-top，并不会叠加而是会取其中较大的数。
- margin合并：在同级关系中，垂直方向上相邻的margin，会合并为一个。合并后的距离和塌陷问题中相同，会取其中较大的数。
padding（内边距）
使用padding可以给div上下左右加上内边距
padding-top
padding-bottom
padding-left
padding-rightpadding问题：
- 会自动增宽或者增高，保持容积不变。所以用到padding一般会减去padding的数值，保证自己想要的效果。
内联元素的垂直方向的margin和padding都不生效，但左右方向上的margin和padding会生效position（定位）
absolute(绝对定位)：想改变谁的位置，就给谁加绝对定位
绝对定位的元素默认以已定位的父级当参照（既可以是相对定位，也可以是绝对定位，只要被定位了就可以）
relative(相对定位)：想以谁当作参照，就给谁加相对定位
fixed(固定定位)：和绝对定位类似，但会固定以显示器为参照
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lesson3</title>
<style>
.top{height: 50px;
width: 700px;
background-color: aqua;
padding-top: 25px;
padding-bottom:25px;
padding-left: 50px;
padding-right: 50px;
margin-bottom:25px
}
.top_cen{height:50px;width: 700px;background-color: pink;}
.mid{height:500px;width:800px;background-color: aqua;position:relative}
.mid_left{height: 400px;
width:300px;
background-color: pink;
position: absolute;
top: 50px;
left: 50px;}
.mid_right{height: 400px;
width:375px;
background-color: pink;
position: absolute;
top: 50px;
left: 375px;}
.bottom{width:800px;height:100px;background-color: aqua;margin-top: 25px;}
</style>
</head>
<div class="top">
<div class="top_cen"></div>
</div>
<div class="mid">
<div class="mid_left"></div>
<div class="mid_right"></div>
</div>
<div class="bottom"></div>
</body>
</html>元素的默认宽高
父级的默认宽高：
- 默认宽度：父级的百分百（脱离文档流的元素，如浮动的元素）
- 默认高度：由子集+padding+border
浮动元素的默认宽：由子集决定
定位的元素默认宽：由子集决定
首行缩进
text-indent: 2em;表示首行缩进两个字符
div内描边
box-sizing: border-boxoverflow
overflow:hidden 溢出隐藏：自己超出父级的部分不予显示
overflow:auto：超出部分会附加滚动条
overflow-x:scroll/overflow-y:scroll：不管需不需要都添加一个滚动条
清除浮动的方式
- clear:both
- overflow:hidden/auto 都可以清除浮动，但会有副作用。会使子元素显示不全
- 给浮动元素的父级加浮动
- 伪元素（伪元素就是指通过css插入一个html标签，和实际写html标签的效果是一样的）
其中清除浮动首选还是使用clear:both，overflow只要还是用于处理溢出部分。overflow能清除浮动的原理主要为BFC（块级格式上下文）
伪元素代码示例
.clear:after{display:block;clear:both;content:"";}在元素中加入这个样式，即是指在元素的最后加入这个标签，和在元素后面自己手动加个标签效果是一样的
margin不塌陷的几种情况
- 给父级加描边，即子父级不贴合就不会发生margin塌陷（ps：描边可以设置透明 使用 border:transparent 命令设置)
- 父级加overflow:hidden
- 父级有padding
- 父级使用了定位（绝对定位和固定定位，即脱离文档流）
- 父元素浮动
- 子元素浮动（ps.子父级一起浮动也不会塌陷）
百分比相关
width：参考父级的宽度
height：参考父级的高度（如果父级为body，那么不生效）
margin：不论任何方向，都是参考父级的宽度
padding：不论任何方向，都是参考父级的宽度
position：参考定位的父级的宽和高
border-radius: 参考自身
css中的单位
- px 像素
- em 相对单位，代表一个字符大小
- rem（root em） 其root即代表相对于整个html，经常用于响应式布局
响应式布局的解决方案
- 使用百分比—-最常用，最简单的响应式布局解决方案
- rem—-常使用在移动端布局
- flex布局
- 媒体查询 @media screen（css3）
盒模型
在网页的审查元素中可以看到。
使用box-sizing:border-box 可以将border和padding放在盒子内
关于表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input</title>
</head>
<body>
<!--from表单中action属性填写后端的地址，method规定通信的方式-->
<form action="" methond="get">
<input type="text" placeholder="请输入">
<input type="password" placeholder="请输入">
<button>button</button>
<input type="button" value="button">
<input type="submit"><br>
<!--多选框，value为传给后端的值，name一般用于后端区分种类-->
<input type="checkbox" value="sing" name="hobby">唱
<input type="checkbox" value="dance" name="hobby">跳
<input type="checkbox" value="rap" name="hobby">rap
<input type="checkbox" value="basketball" name="hobby">篮球
<!--radio为单选框-->
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<br>
<!--下拉框，默认显示第一个，但可以通过selected命令显示后面的元素-->
<select>
<option value="sing">唱</option>
<option value="dance">跳</option>
<option value="rap">rap</option>
<option value="basketball" selected>篮球</option>
</select>
</form>
</body>
</html>现在实际开发中不会使用form表单加地址去和后端通信，而是会使用js中的ajex
使用outline:none可以去掉input标签点击后显示的黑边
其他的表单也不常用原生的，实际项目中会一般会进行封装后再使用。
效果：
关于table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-table</title>
<style>
/**border-collapse:collapse ;指折叠边框，两个边框会重叠在一起**/
table{border-collapse:collapse ;margin: auto;width: 1200px;}
table,th,td{border: 1px solid;text-align: center;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>111</td>
</tr>
<tr>
<td>2</td>
<td>张四</td>
<td>18</td>
<td>111</td>
</tr>
<tr>
<td>3</td>
<td>张五</td>
<td>18</td>
<td>111</td>
</tr>
<tr>
<td>4</td>
<td>张六</td>
<td>18</td>
<td>111</td>
</tr>
</tbody>
</table>
</body>
</html>表格在过去会被用来做布局，但现在基本不会使用，表格只作为表格使用，不会应用在布局上
th和td只是样式上有些差别，本质差不多，th会比td看着粗一点，实际使用都用td也是可以的
实际效果:
flex布局
flex布局是独立于常规布局的另一种布局解决方案
优点
- 简单，界面不容易错乱，语法简单，经常用于移动端布局
缺点
- flex不太不适用于精准布局
传统布局的解决方案，基于传统的和模型，依赖display+position+float，对于特殊布局稍显复杂，如垂直布局就要通过margin或者定位来进行布局。
采用flex布局的元素，称为flex容器
要开启flex布局，要在要布局的容器中（即父级）写上 display:flex开启flex布局
开启flex布局后，要在容器中添加一些属性
flex-direction规定元素排列方向（即主轴方向），默认为row（水平排列）
- flex-direction:column 垂直排列
- flex-direction:row 水平排列
- flex-direction:row-reverse 水平反转排列
- flex-direction:column-reverse 垂直反转排列
flex-wrap规定是否换行
在flex布局中，如果子集将要超出父级，flex布局会将元素中的每个子集等比缩小来防止子集超出父级
- flex-wrap:nowrap 默认值，不会默认换行，如果子集超过父级，会等比缩小子集避免换行
- flex-wrap:wrap 换行，换行后样式也会自适应父级避免错乱
- flex-wrap:wrap-reverse 反向换行
flex-flow 是flex-direction和flex-wrap的简写
如
<!--指在一行上显示，切会自动换行-->
flex-flow: row wrapjustify-content定义在主轴上的对齐方式
传统布局如
<div>
<div class="test">test</div>
<div class="test">test</div>
</div>类似这种布局，如果想要使中间的两个子集div居中对齐，如果在不套一个额外的div的话是非常费劲的，但在flex布局中
使用
justify-content:center可以轻松实现两个子集元素的居中对齐
- justify-content: flex-start 左对齐
- justify-content: flex-end 右对齐
- justify-content:center 居中对齐
- justify-content: space-between 等间距对齐（两端会顶头）
- justify-content: space-around 等间距对齐(两端不会顶头)
align-items定义了垂直轴上的对齐方式
- align-items: center 居中对齐
- align-items: flex-start 上对齐
- align-items: flex-end 下对齐
- align-items: baseline 基线对齐
- align-items: stretch 没设置高度的话会默认占满垂直方向的父级
align-content定义多行垂直轴的对齐方式
order定义了子集元素的排列顺序，加在子集上。数值越小，排列越靠前，默认为0
.item{
order: 0
}flex-grow定义了元素的放大比例，加载子集上，默认为0，代表如果存在剩余空间，也不会放大
.item{
flex-grow: 1
}flex-shrink属性定义了元素的缩小比例，默认为1，即如果空间不足，该项目会缩小
flex-basis属性定义了在分配多余空间之前，元素占据主轴的空间，默认值为auto，即元素本来的大小
flex属性为flex-grow，flex-shrink和flex-basis的简写
align-self属性允许单个元素拥有与其他元素不同的对齐方式
html 5
video：视频标签
html 5之前都必须使用flash插件才可以进行媒体视频的播放。在html 5之后支持视频标签，可以在网页中直接播放视频。
<!--video标签可以不设置宽高,默认为视频的宽高
controls为唤出视频控件（暂停，音量调节，全屏等），没写值即为布尔值，相当于controls="true" autoplay为自动播放 loop为循环播放-->
<video width="400px" height="240" controls autoplay loop>
<!--src中为视频的地址 -->
<source src="xxx.mp4" type="video/mp4">
</video>audio：音频标签
<audio controls>
<source src="xxx.mp3" type="audio/mpeg">
</audio>css 3
边框
- border-radius 圆角
- box-shadow 盒阴影
- border-image 边界图片，即描边可以使用图片，一般没什么用处
背景
- background-image: url(xxxx.jpg)
- background-position: right bottom,left top
- background-repeat: no-repeat,repeat
渐变
- 线性渐变 (Linear Gradients)- 向下/向上/想做/向右/对角线
- 径向渐变(Radial Gradients) -由中心定义
#grad{
height:200px;
background-image: linear-gradient(to bottom right,red,yellow)
}文本效果
文本投影
参数分别为水平阴影，垂直阴影，模糊距离，阴影的颜色
h1{
test-shadow:5px 5px 5px red
}字体
以前的css中，字体只能选择用户电脑上已经安装的字体。
但在css 3以后，网页设计的时候可以使用任何喜欢的字体。
@font-face{
font-family:"xxx"
src: url();
}
p{
font-family:"xxx"
}使用的时候使用@font-face将字体引入，在font-family中定义引入字体名字，src中填入字体路径。
之后就可以在别的标签中通过font-family属性将刚才引入的字体加入到该元素的样式之中
2D转换
2D转换可以让元素进行转换，元素中添加transform属性使用
- rotate —-旋转
div{
width:200px;height:200px;background-color:red;transform: rotate(-45deg)}deg为角度，-45deg即为让元素逆时针旋转45度
- sclae —-缩放
div{
width:200px;height:200px;background-color:red;transform: scale(2,3)}scale中的第一个数代表水平放大多少倍，第二个数代表垂直放大多少倍，且放大部分不会占位置，只是视觉效果变大，本身的宽高不会改变
scale中可以给小数，即代表缩小。同理一样只是视觉效果缩小，本身宽高不会改变
- skew —-倾斜
transform: skew(45deg)- translate —-位移
transform:translate(50px,100px)translate方法可以使元素从当前位置移动，第一个参数代表水平位移，第二个参数代表竖直位移
3D转换
- rotateX —-沿x轴旋转
transform: rotateX(45deg)- rotateY —沿y轴旋转
transform: rotateY(45deg)过渡
transition: width 1s,margin 1s
/**参数写上all 所有变化都会有过渡效果**/
transition:all 1stransition是指将来如果元素的样式发生变化（如通过hover），其变化的样式如果在transition所规定，则会添加一个样式变化的过渡效果。
第一个参数规定想要添加过渡效果的属性，如宽度，margin，rotete都可以，如果写all则为所有。第二个参数为过渡需要的时间。
可以使用transition-timing-function规定过渡动画的时间曲线。
默认为linera 匀速
| 值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 慢速开始，然后变快，然后再慢速结束 |
| ease-in | 慢速开始 |
| ease-out | 慢速结束 |
| ease-in-out | 慢速开始和结束 |
| cubic-bezier(n,n,n,n) | 自己定义数值，可能的值在0-1之间 |
- 延迟
transition-delay:1s动画延迟，可以让变换经过规定的时间后再生效
动画
使用@keyframes定义一个动画
@keyframes myanimate{
from{width:10px;}
to{width:100px}
}也可以定义多端变换
@keyframes myanimate{
0%{width:10px;}
50%{width:100px;}
100%{width:1000px;}
}定义之后就可以在在其他元素的样式中引用定义好的动画，如
div{
animation:myanimate 1s
}如果希望动画播放后不返回初始状态，在@keyframes中添加
animation-fill-mode: forwards动画延迟
animation-delay: 1s规定动画播放次数
animation-iteration-count: valuevalue可以写入数字，也可以使用infinite使动画无限次播放
响应式布局解决方案
- 使用百分比宽度
- 使用flex布局
- rem布局
- @media screen 媒体查询
css 3提供的@media screen媒体查询，可以针对不同的屏幕尺寸，提供多套不同的样式。
@media screen and (min-width:1200px){
.box{width:200px;height:200px;background-color:red}
}以上代码表示这只有在大于1200px的屏幕上，box的样式才会生效。
.box{width:200px;height:200px;background-color:red}
@media screen and (min-width:1200px){
.box{width:200px;height:200px;background-color:red}
}
@media screen and(min-width:1400px){
.box{width:200px;height:200px;background-color:red}
}通过编写顺序，可以实现在想要的区间内获得不同的样式。如上述代码，在1400px之上为一套样式，1200px到1400px为一套样式，1200px以下一套样式。
@media screen and (max-width:1200px){
.box{width:200px;height:200px;background-color:red}
}上述代码代表这条样式会在1200px以下时生效
rem布局除了使用js控制之外，同样也可以使用css 3中的媒体查询进行使用
@media screen and (min-width:1200px){
html{font-size:10px}
}
@media screen and(min-width:1400px){
html{font-size:20px}
}
.box{width:10rem;height:10rem;background-color: red}BFC
BFC：块级格式上下文
BFC是一个独立的布局环境，BFC内部和BFC外部的元素互不影响，本质其实就是一个盒子
BFC需要主动开启
BFC的布局规则
- 内部的元素会在垂直方向上一个接一个排列
- 盒子在垂直方向上的距离由margin决定，兄弟关系的margin会合并，父子关系会塌陷
- 每个块左边缘紧贴父级块的左边缘
- 开启了BFC的盒子不会与浮动的盒子重叠，会贴着浮动元素显示
- BFC是一个独立的容器，里外不会影响
- 计算BFC高度时，浮动的子集元素也会算在内
开启BFC
- 根元素本身就是BFC，即html本身即为BFC
- 浮动的元素
- 定位的元素（不包含相对定位）
- display:inline-block/flex等
- overflow:hidden/auto
.red{width:200px;height:200px;background-color:red;margin-bottom:200px;}
.blue{width:200px;height:200px;background-color:blue;margin-top:100px}<div class="red"></div>
<div class="blue"></div>因为html本身就是一个BFC，red和blue同处于html，也就是同时处于一个BFC中，所以会由于上述的BFC的规则会发生margin合并。
如果想要消除margin合并，可以让两个元素处于不同的BFC中即可
.red{width:200px;height:200px;background-color:red;margin-bottom:200px;margin-top:100px}
.blue{width:200px;height:200px;background-color:blue;margin-top:100px}
.box{overflow:hidden}<div class="box">
<div class="red"></div>
</div>
<div class="blue"></div>同理两个不处于一个BFC中的元素也不会发生margin塌陷
.red{width:200px;height:200px;background-color:red;float:left}
.blue{width:200px;background-color:blue}<div class="blue">
<div class="red"></div>
</div>如果类似这样不给父级高度，子集浮动，那么父级的高度会为0
如果这时将父级设置为BFC容器，会由于BFC的规则，子集的高度就可以被父级计算在内了
因为这个原理，在子集浮动时，父级也设置浮动的话，由于BFC的原则，子集不需要清除浮动
.red{width:200px;height:200px;background-color:red;float:left}
.blue{width:300px;height:300px;background-color:blue}<div class="blue"></div>
<div class="red"></div>上述样式，由于浮动的元素会脱离文档流，所以红色块会覆盖在蓝色快的上方显示。
此时如果将蓝色开启BFC，由于BFC的原则，两个盒子就不会重叠，而是会紧贴显示
使用此特性可以实现双流式布局，即左侧固定宽度，右侧自适应
.red{width:200px;height:200px;background-color:red;float:left}
.blue{height:300px;background-color:blue;overflow:hidden}<div class="blue"></div>
<div class="red"></div>代码类似以上这种
查缺补漏
box-sizing:border-box可以忽略border和padding给容器体积带来的影响
其中box-sizing的默认值为content-box
vw 和 vh
vw(view width)
vh(view height)
简单来说vw和vh会将可见的屏幕平均分割成100份
div{
width:100vw;height:100vh;background-color:red
}是一个占满全屏的红色块
使用opacity设置透明度，同时opacity可以继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>opacity</title>
<style>
/*
opacity
默认 1, 完全不透明
0 完全透明
*/
.box1 {
width: 100px;
height: 100px;
background-color: #FF9500;
position: fixed;
z-index: 11;
/*半透明*/
opacity: .5;
}
.box2 {
width: 100px;
height: 100px;
background-color: #0f88eb;
position: fixed;
left: 33px;
top: 33px;
z-index: 9;
opacity: .5;
}
.box3 {
width: 100px;
height: 100px;
background-color: #A1D8AD;
position: fixed;
left: 66px;
top: 66px;
z-index: 8;
opacity: .5;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>margin-auto只适用于块元素，即使给img设置宽度，margin-auto也是不生效的。要使用的话要设置
display: block顺带一记，text-align对于img是生效的。
text-align对块元素不生效
图片和文字的对齐方式默认是低对齐，如果要调整起对齐方式，如居中，可以使用
vertical-align:middlea标签中如果将target属性设置为
target="_blank"会在新标签页内打开，默认为self，代表当前窗口打开超链接
百分比的参照物
父元素的宽度：padding，margin，width
其中即使是padding-top:10% 参考的一样也是父级的宽，并不会参考父级的高，这点要注意
父元素的高度：height （如果父元素为body的话不会生效）
