一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
H5新特性
- 拖拽释放(Drapanddrop)APIondrop拖放是一种常见的特性，即抓取对象以后拖到另一个位置
- 在HTML5中，拖放是标准的一部分，任何元素都能够拖放
- 语义化的内容标签(header,nav,footer,aside,article,section)
- 音频,视频(audio,video)如果浏览器不支持自动播放在属性中添加autoplay
- 画布Canvas
- 地理(Geolocation)API
- 本地离线存储localStorage长期存储数据浏览器关闭后数据不丢失
- sessionStorage的数据在浏览器关闭后自动删除
- 表单控件calendar,date,time,email,url,search,tel,file,number
- webworker,websocket,Geolocation
CSS3新特性
- 颜色:新增RGBA,HSLA模式
- 文字阴影(text-shadow)
- 边框:圆角(border-radius)边框阴影:box-shadow
- 盒子模型:box-sizing
- 背景:background-sizebackground-originbackground-clip
- 渐变:linear-gradient,radial-gradient
- 过渡:transition可实现动画
- 自定义动画animate@keyfrom
- 媒体查询多栏布局@mediascreenand(width:800px){...}
- border-image
- 2D转换;transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)，3D转换
- 字体图标font-face
- 弹性布局flex
H5的浏览器存储
cookie 这个存储用了很久了，但是也很容易被清除。同时cookie会在每一次通信过程中传向服务端。同时cookie有一个很好的地方就是，它本身有一个过期时间属性，可以用来标注一个变量的有效期。而cookie一旦过期就会被自动删除掉 localStorage、sessionStorage
- localStorage:持久存储，只要用户不主动删除就会一直存在。
- sessionStorage：面向session的浏览器存储，因此只存在于一个页面的生命周期内，关闭即清除两者均采用键值对的形式存储数据 indexedDB 内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好indexDB直接操作的存储对象是ObjectStore，这有点类似其他数据库中table概念
块级元素那些是行内元素
- 行内元素:a、span、b、img、strong、input、select、lable、em、button、textarea、selecting
- 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form
- 行内块级元素区别：
- 块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
- 一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效(注意：块级元素即使设置了宽度，仍然是独占一行的)
- 块级元素可以设置margin和padding行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
如何使一个盒子水平垂直居中
- 利用定位
- 利用margin:auto
- 利用display:table-cel
- 利用display：flex;设置垂直水平都居中
- 利用transform
