Web前端面试题

HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

*HTML5 现在已经不是 SGML(标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言) 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

*拖拽释放(Drag and drop) API

  语义化更好的内容标签（header,nav,footer,aside,article,section）

  音频、视频API(audio,video)

  画布(Canvas) API

  地理(Geolocation) API

  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

  sessionStorage 的数据在浏览器关闭后自动删除

*支持HTML5新标签：

* IE8/IE7/IE6支持通过document.createElement方法产生的标签，

  可以利用这一特性让这些浏览器支持HTML5新标签，

  浏览器支持新标签后，还需要添加标签默认的样式：

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

 

*如何区分： DOCTYPE声明\新增的结构元素\功能元素

css3中的transform有哪些属性？分别用来实现什么效果？

*transform 可用于内联(inline)元素和块级(block)元素，它有几个属性值参数：

translate 位移：基于 X 和 Y 坐标重新定位元素，当使用一个参数时表示 X 轴和 Y 轴的参数相同，效果类似 position:relative 。

scale 缩放：可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数，当使用一个参数时表示 X 轴和 Y 轴的缩放相同。

rotate 旋转：通过传递一个度数值来转动一个对象。

skew 倾斜：参数是度数，当使用一个参数时表示 X 轴和 Y 轴的参数相同。

matrix 矩阵变换：基于 X 和 Y 坐标重新定位元素，它使用 6 个参数。

localStorage、sessionStorage、cookie有什么区别？

*sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localstorage和cookie的区别

localStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。

Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，localStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而localStorage仅仅是为了在本地“存储”数据而生。

什么是同源策略？你都知道哪些解决跨域的方法？

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

同源

域名、协议、端口相同，也就是在同一个域里。

JSONP的基本原理 动态添加一个