html html5区别
HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），
因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。
html5新特性
1.标签
header — 头部标签 nav — 导航标签 article — 内容标签
section — 块级标签 aside — 侧边栏标签 footer — 尾部标签
2.属性
text 默认文本
button按钮
password 密码
radio单选 checkbox多选
submit提交
reset重置
number数字
date日期
file上传文件
email邮箱
tel手机号码
url 网址
search搜索
color颜色
3.视频
source兼容不同视频格式
autoplay视频加载完成后自动播放
controls给视频添加控件
loop循环播放
muted静音播放
poster用户下载时显示的图像 ,值为url
preload边加载边播放
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source> -->
音频
<!-- <audio src="../11111.mp3" autoplay controls></audio> -->
placeholder表单提示文字
required校验表单不能为空
multiple选择多个文件上传
autocomplete 启用on 关闭off 提交记录
min max 通常与数字和日期类型一起使用
pattern表单正则验证
step给默认数字类型上下箭头提供跳跃的数字
readonly只读属性
disabled禁用属性
4.标准盒子模型
box-sizing: content-box;
5.IE盒子模型||怪异盒子模型
box-sizing: border-box;
== flex 属性用于指定弹性子元素如何分配空间
flex-direction 属性指定了弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse
r（左对齐），默认的排列方式。
row-reverse ow横向从左到右排列反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column 纵向排列
column-reverse 反转纵向排列，从后往前排，最后一项排在最上面。
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch
- flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。==
6.密钥
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage -用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
sessionStorage.setItem(key,value) ：存储数据
sessionStorage.getItem(key) ：获取数据
sessionStorage.removeItem(key) ：删除数据
sessionStorage.clear() ：删除所有数据
localStorage.setItem(key,value) ：存储数据
localStorage.getItem(key) ：获取数据
localStorage.removeItem(key) ：删除数据
localStorage.clear() ：清空数据 / 删除所有数据
7.内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content: flex-start | flex-end | center | space-between | space-around
- flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。 - flex-end： 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。 - center： 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。 - space-between： 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。 - space-around： 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）
8.align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐
align-content: flex-start | flex-end | center | space-between | space-around | stretch
- stretch - 默认。各行将会伸展以占用剩余的空间。 - flex-start - 各行向弹性盒容器的起始位置堆叠。 - flex-end - 各行向弹性盒容器的结束位置堆叠。 - center -各行向弹性盒容器的中间位置堆叠。 - space-between -各行在弹性盒容器中平均分布。 - space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
9.flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。 flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。 flex-flow: flex-direction flex-wrap
flex-direction代表的值有：row|row-reverse|column|column-reverse
flex-wrap代表值有：nowrap|wrap|wrap-reverse
10.align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
注：给子元素设置
align-self: auto | flex-start | flex-end | center | baseline | stretch
- auto
如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
- flex-start
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
- stretch
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
11.背景
background ： [background-color] | [background-image] |
[background-position][/background-size] | [background-repeat] |
[background-attachment]设置背景图像是否固定或者随着页面的其余部分滚动
| [background-clip] | [background-origin]
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
默认情况：从上到下
background-image: linear-gradient(颜色, 颜色,...);
从左到右to right|left|top|bottom
background-image: linear-gradient(to right,red,orange);
对角方式to bottom right
设置角度90deg
background-image: linear-gradient(90deg,red,#000);
使用透明度
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
重复线性渐变
background-image: linear-gradient(red,black 20%,green 10%);
径向渐变（Radial Gradients）- 由它们的中心定义
12.2D移动、缩放、转动、拉长或拉伸 注：只设置一个X或Y
transform: translate()
translate(x,y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
translateX(x),translateY(y)
transform-origin(x,y)设置旋转中心点
transform-originX(X)
transform-originY(Y)
rotate()在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
rotateX(),rotateY()
scale(宽度,高度)
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 缩放：
设置为负数镜像方式放大缩小
scaleX(X),scaleY(Y)
skew(Xdeg,Ydeg)
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，
则默认为0，参数为负表示向相反方向倾斜。
skewX(Xdeg)
skewY(Ydeg)
不常用
matrix(1,2,3,4,5,6)复合属性
transform:matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移);
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
13.过渡
简写属性，用于在一个属性中设置四个过渡属性。
transition: css名称|all 过渡时间(必须参数) 运动曲线 开始时间
s|mslinear 匀速 默认值。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候
14.动画
name需要绑定到选择器上
animation: 动画的名称 时间 运动曲线 开始时间
播放次数 是否反向播放 是否运用结束的样式 动画是否运行或暂停animation-name 指定要绑定到选择器的关键帧的名称 animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。
infinite无限播放
normal 默认值。动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后（由
animation-iteration-count 决定），动画将应用该属性值。 backwards 动画将应用在
animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当
animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当
animation-direction 为 “reverse” 或 “alternate-reverse” 时）。 both 动画遵循
forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 paused 指定暂停动画 测试
running 指定正在运行的动画
@keyframes move{
/* from{
width: 200px;
background-color: pink;
}
to{
background-color: aqua;
height: 500px;
width: 500px;
} */
0% {
width: 200px;
background-color: pink;
}
25% {
background-color: aqua;
height: 500px;
width: 500px;
}
50% {
background-color: orange;
height: 500px;
width: 500px;
}
100% {
background-color: green;
height: 500px;
width: 500px;
}
}
</style>
</head>
<body>
<!-- @keyframes 规则是创建动画。 -->
<button type="button" onclick="func1()">按钮1</button>
<button type="button" onclick="func2()">按钮2</button>
<div class="boss">123123</div>
</body>
<script type="text/javascript">
var boss = document.getElementsByClassName("boss")[0];
function func1(){
boss.style.animationPlayState = "paused"
}
function func2(){
boss.style.animationPlayState = "running"
}
</script>
</html>
