html5+css3面试题合集
CSS3 的新特性
1.css3 实现圆角(border-radius),阴影(box-shadow)，边框图片（border-image）
2.对文字添加特效（text-shadow），线性渐变（gradient），旋转（transform）
3对背景图尺寸修改（background-size）
4. 增加了更多的CSS选择器 多背景 rgba
5. 在 CSS3 中唯一引入的伪元素是 ::selection，用于改变选中文本时，文本的颜色和文本的背景颜色
6. 媒体查询，多栏布局
html5有哪些新特性、移除了那些元素？
新特性：
1.拖拽释放(Drag and drop) API
2.语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
7.sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9.新的技术 webworker, websocket, Geolocation
移除的元素：
1.纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2.对可用性产生负面影响的元素：frame，frameset，noframes；
本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？
Cookies:服务器和客户端都可以访问；大小只有 4KB左右；有有效期，过期后将会删除；
本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到通过 POST 或者 GET 的通道发送到服务器；每个域 5MB；没有过期数据，它将一直保留直到用户从浏览器清除或者使用 Javascript 代码移除
如何实现浏览器内多个标签页之间的通信?
调用 localstorge、cookies 等本地存储方式
你如何对网站的文件和资源进行优化？
文件合并 文件最小化/文件压缩 使用CDN托管 缓存的使用
什么是响应式设计？
它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常
HTML5 Canvas 元素有什么用？
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。
请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明</title>
<style>
body {
margin: 0;
padding: 0;
}
.a {
width: 200px;
height: 100px;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
background-color: aqua;
transition: 2s;
}
.a:hover {
opacity: 0;
}
</style>
</head>
<body>
<div class="a">
</div>
</body>
</html>
你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 “品”字布局 如何设计?
首先划分成头部、body、脚部… 实现效果图是最基本的工作，精确到2px； 与设计师，产品经理的沟通和项目的参与 做好的页面结构，页面重构和用户体验 处理hack，兼容、写出优美的代码格式
描述一下渐进增强和优雅降级之间的不同
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
为什么利用多个域名来存储网站资源会更有效？
CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
web storage和cookie的区别
Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。
除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage仅仅是为了在本地“存储”数据而生。