前端面试题：H5新增特性？CSS3新增特性？

一、H5新增特性

1、拖拽释放(Drap and drop)API ondrop

拖放是一种常见的特性，即抓取对象以后拖到另一个位置在HTML5中，拖放是标准的一部分，任何元素都能够拖放

2、画布canvas；

getContext()方法返回一个用于在画布上绘图的环境

Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前 唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该 对象导出一个二维绘图 API

cxt.stroke() 如果没有这一步 线条是不会显示在画布上的

canvas 和 image 在处理图片的时候有什么区别?

image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.

3、自定义属性 data-id

4、用于媒介播放的video和audio，如果浏览器不支持自动播放怎么办？在属性中添加autoplay

5、新的语义化标签：article，header，nav，section，footer, aside；

6、新的本地存储：localStorage（长期存储浏览器关闭后数据不丢失），sessionStorage；

7、新的表单控件：calendar , date , time , email , url , search , tel , file , number;

8、新的技术：websocket，web worker，geoloacation（基于地理位置的应用）。

二、CSS3新增特性

1. 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}；
2. 弹性盒模型 display: flex;
3. 多列布局 column-count: 5;
4. 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
5. 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
6. 颜色透明度 color: rgba(255, 0, 0, 0.75);
7. 圆角 border-radius: 5px;
8. 渐变 background:linear-gradient (red, green, blue);
9. 阴影 box-shadow:3px 3px 3px rgba (0, 64, 128, 0.3);
10. 倒影 box-reflect: below 2px;
11. 文字装饰 text-stroke-color: red;
12. 文字溢出 text-overflow:ellipsis;
13. 背景效果 background-size: 100px 100px;
14. 平滑过渡 transition: all .3s ease-in .1s;
15. 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
16. 转换：旋转 transform: rotate(20deg)、倾斜 transform: skew (150deg, -10deg)、缩放 transform: scale 、位移 transform: translate (20px, 20px);