HTML5超文本标记语言
- 新增语义化标签：header、footer、main、nav等等
- 新增多媒体功能：视频、音频
- 新增画布功能canvas功能
- 新增存储功能（本地存储、会话存储）
- 新增移动端开发
css3
- 背景系列样式
- 选择器
- 新增动画功能（2D、3D）
- 圆角、渐变、字体、文本效果、过渡
语义化标签
语义化标签便于浏览器底层解析，有助于网站优化
页面结构清晰，便于代码维护与管理
良好的html架构，利于搜索引擎建立索引和抓取
HTML5 特性
1.标签可省略type属性
2.标签的属性值可省略双引号
布局标签
1.header头部标签
2.footer底部标签
3.main 网页主要部分
4.nav 导航标签
5.aside 侧边栏标签
6.section 段落标签
7.article 文章标签
小语义化标签
1.address 地址 ->标签文本无非倾斜，百度地图名片->
地图名片生成器
2.bdo 设置文本方向
dir属性：ltr（左到右）；rtl（右到左）
3.cite 引用文本 <cite>杜甫</cite>
4.code 引用代码，使用code标签包裹
5.details 标签需要结合summary标签使用
6.pre 预保留格式标签，文本编写，页面怎么显示
7.ruby 文字上加拼音效果，结合rt标签使用
<ruby>小猪皮<rt>xzp</rt></ruby>
8.template 标签内部嵌套的文本、子元素不可见
新增的表单元素
1.input type-> range 区间选择滑动条
min-最小值，max最大值
type-> color 颜色选择器
type-> date 日历选择框 年/月/日
type-> week 第几周
type-> time 时间
type-> email 邮箱
type-> url 网址
type-> search 搜索框
type-> number 计数器 step 步数大小
type-> submit 提交按钮
2.placeholder 占位符 - 结合文本框使用，提示文本
disable 禁用输入框
autofocus 自动聚焦
<input type='text' autofocus />
readonly 只可以读取数据，不能输入
datalist
<input type='text' list='box' />
<datalist>
<option>js</option>
<option>html</option>
</datalist>
视频【video】
-
video基本属性讲解
视频支持格式：MP4、ogg、webM
video 内联双闭合标签，src视频路径，默认宽高300 *150
video 内联双闭合标签，src视频路径，默认宽高300 * 150；
controls -> 视频控制，显示默认控制条
poster -> 视频封面
autoplay -> 自动播放，IE11可以，Google浏览器需要静音
muted -> 静音
loop -> 视频循环播放 video-js控制的方法
let video = document.querySelector('video');
video.play(); // 播放
video.pause(); // 停止
// 获取/设置 视频时间
video.currentTime;
video.currentTime = 60;
// 获取视频总时长
video.duration
// 获取/设置视频音量
video.volume;
video.volume = 1; // [0, 0.5, 1]
// 监测视频的事件
video.onplay = function(){
// 播放视频执行函数
}
video.onpause = function(){
// 视频停止执行函数
}
video.ontimeupdate = function(){
// 视频播放时间发生改变，执行函数
}
音频【audio】
支持音频格式：MP3，ogg，wav；
音频无poster封面，其它与视频一致
浏览器的存储功能
1.本地存储 localStorage
存储数据上限 5MB
// 本地存储新增
localStorage.setItem('name','xzp');
// 本地存储与会话存储->字符串，对象需要使用 JSON.stringify()
localStorage.setItem('goto',JSON.stringify({age:18}));
获取数据
let name = localStorage.getItem('name');
let obj = JSON.parse(localStorage.getItem('goto'));
2.会话存储 sessionStorage
与本地存储几乎一致
数据存储为非持久化的，页面关闭即消失
选择器
1.属性选择器
div[class='xzp']{}
input[name^='xzp']{}
2.子类选择器
div:fist-child{}
div:last-child{}
匹配父节点的N个索引值
div:nth-child(n){} // 单数
div:nth-child(2n){} // 双数
p:first-of-type{} // 匹配父元素内部P元素的第一个子节点
p:last-of-type{} // 匹配父元素内部P元素的最后一个字节点
div:nth-of-type(index){}
3.关系型选择器
A+B {} a标签同级的相邻的b标签
a~b {}
4.伪类选择器
div:hover,div:disabled,input:focus，input:empty
5.伪选择器（双冒号）
div::first-letter{} // 段落的首字符
div::first-line{} // 段落的第一行
div::section{} // 选中文本
伪元素（after，before）
1.双闭合标签->伪元素
2.伪元素拥有content属性
3.伪元素脱离文档流
div::after{}
div::before{}
border-radius 圆角设置
border-radius: [lt]px/% [rt]px/% [rb]px/% [lb]px/%;
圆角->左上，右上，右下，左下
shadow 阴影
1.box-shadow 盒子阴影（外阴影）
box-shadow: 2px 2px 3px green,
4px 4px 3px yellow;
右侧阴影x轴，底部阴影y轴，阴影模糊程度（越大越模糊），
阴影颜色；阴影可以写入多个。
box-shadow: inset 2px 2px 3px green;
内部阴影
2.text-shadow 文本阴影
与盒子阴影参数一致（无内部阴影）
background-origin
设置背景图的起始位置
border-box,padding-box,content-box；
默认padding-box
background-clip
背景图裁切
border-box,padding-box,content-box,text；
裁切掉区域以外的部分，text需要考虑兼容问题，
相当于给文字加背景
浏览器前置
Google -webkit-
Firefox -mz-
IE -ms-
transition 过渡动画
过渡动画需要事件触发
样式属性需发生变化
transition: 过渡动画的属性(transition-property),
过渡动画的事件(transition-duration),
过渡动画的速率(transition-timing-function),
过渡动画的延迟时间(transition-delay);
transition-timing-function -> linear：均速
ease-in：慢速开始过渡动画
ease-out：慢速结束过渡动画
ease-in-out：慢速开始，慢速结束
ease：慢速开始，慢速结束
.test{
margin: 100px auto;
background-color: lightpink;
width: 250px;
height: 250px;
/* transition: width 3s linear 0s,
height 4s linear 0s; */
transition: all 3s linear 0s;
}
.test:hover{
width: 400px;
height: 400px;
}
transform 变换
2D动画：比例缩放（scale），平移（translate），旋转（rotate)
/*
元素等比缩放，大于1放大，小于1缩小
参数w，宽放大缩小比例，参数h，高放大缩小比例
参数无单位，.5=0.5
*/
transform:scale(w,h);
transform:scale(5,5);
/* 旋转中心是元素的几何中心进行旋转，单位deg */
transform:rotate(30deg)
/* 平移：参数x，x轴平移；参数y，y轴平移；单位为px */
transform:translate(x,y);
transform:translate(10px,5px);
3D动画：3D旋转，3D平移
需要嵌套于父元素中，父元素需要设置景深perspective
/* 3D旋转 单位deg */
transform:rotateX();
transform:rotateY();
transform:rotateZ();
transform:translateX();
transform:translateY();
transform:translateZ();
animation动画
给元素添加动画--综合、复合样式
animation: 动画名称 动画总时间 动画速率 动画延迟时间
动画执行次数;
/* 声明动画 */
@-webkit-keyframes try-test{
from{
left:0;
}
to{
left:100px;
}
}
/* 动画调用 */
.div-animation{
animation: try-test 2s linear 0s 5;
}
flex布局（弹性布局）
容器设置为弹性布局
.container{
display:flex;
display:inline-flex; // 行内元素
}
设置flex布局，子元素的float、clear、vertical-align失效
容器的属性
1.flex-direction->主轴方向，row(水平)，row-reverse(反向水平)；
竖轴方向，column(竖直)，column(竖直反向)
2.flex-wrap->换行，nowrap(默认)，wrap，wrap-reverse
3.flex-flow:flex-direction flex-wrap;
4.justify-content->flex-start，flex-end，center，space-between，space-around
主轴对齐方式
5.align-items->交叉轴对齐方式
flex-start，flex-end，center，baseline，stretch
6.align-content->多根轴线对齐方式
flex-start，flex-end，center，space-between，space-around，stretch
项目的属性
1.order 排序顺序
2.flex-grow 放大比例
3.flex-shrink 缩小比例
4.flex-basis 多余空间分配
5.flex: flex-grow flex-shrink flex-basis;
6.align-self 单个项目对齐方式
flex-start，flex-end，center，baseline，stretch
px、em、rem区别
px->相当于显示器的分辨率而言的
em->相对父元素的字体大小而言的
rem->相对html根元素的字体大小而言的，css3新增元素
回流与重绘
回流->渲染树元素大小、结构或某些属性发生变化，浏览器重新渲染部分或全部页面。
更改dom元素(插入、删除、更新、移动)、样式添加或删除
窗口大小改变、字体大小改变、伪类激活、改变样式属性
更改元素的className、位置计算、修改页面内容
重绘->页面元素样式发生改变且不会影响元素在文档流中的位置
重绘示例：color、background-color
避免频繁回流与重绘：
1.减少table布局
2.减少css表达式的使用
3.减少dom操作
4.对于复杂的动画元素使用绝对定位，脱离文档流
5.减少使用内联样式
BFC触发方式
- 设置浮动元素flat
- overflow不为visible
- dispaly:inline-block / table
- position:absolute / fixed
触发bfc作用
防止垂直方向margin重叠（margin塌陷）
不与浮动元素重叠
清除元素内部浮动
绘制三角形
设置边框宽度，其他三个边框设为透明
div{
height: 0;
width: 0;
border: 10px solid;
border-color: pink transparent transparent transparent;
}
