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仅仅是为了在本地“存储”数据而生。

html5+css3面试题合集（一）相关推荐

2020中高级前端面试题合集
2020中高级前端面试题合集 "全方位总结一下所遇到的面试题目,与大家共同学习,也是对自己的一次总结" 文章同步到我的公众号<前端小时>,欢迎大家关注! 01 前言 2 ...
9个非常有趣的HTML5 Canvas动画特效合集
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
9012年大厂面试题合集：Java技术栈为什么竞争越来越激烈？
就今年大环境来看,跳槽成功的难度比往年高很多,一个明显的感受:今年的Java技术栈面试,无论一面还是二面,都特别考验Java程序员的技术功底. 最近有人搜集了93套腾讯.阿里.美团.百度.网易等公司9 ...
前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
小猿圈WEB前端之HTML5+CSS3面试题（一）
越来越多人喜欢前端岗位,毕业季已经悄然来临,很多毕业生面临找工作,那你们在狂欢快乐最后恋恋不舍之际,是否想着过几天招工作的危机.如果想要毕业之后,走向前端的岗位,那看到小编的文章后好好做一下这套题,今 ...
Java面试核心知识点（283页）Java面试题合集最新版（485页）
阿里.腾讯两大互联网企业传来裁员消息,很多人都陷入担心,不安情绪蔓延-- 其实大家应该更冷静和理性地看待大厂裁员.每年三四月都是大厂人员调整期,这个季节是各个公司战略调整.战略规划的一个关键期,肯定会 ...
大学“电路分析基础”试题合集第四章
大学"电路分析基础"试题合集第一章大学"电路分析基础"试题合集第二章大学"电路分析基础"试题合集第三章 "电路分析基础&quo ...
大学“电路分析基础”试题合集第六章（文末附PDF文档与Word文档）
大学"电路分析基础"试题合集第一章大学"电路分析基础"试题合集第二章大学"电路分析基础"试题合集第三章大学"电路分析基础&q ...
2019年大厂面试题合集：Java架构师技术栈为什么竞争越来越激烈？程序员必看！
2019年大厂面试题合集:Java架构师技术栈为什么竞争越来越激烈?程序员必看! 就今年大环境来看,跳槽成功的难度比往年高很多,一个明显的感受:今年的Java技术栈面试,无论一面还是二面,都特别考验J ...

html5+css3面试题合集（一）

html5+css3面试题合集（一）相关推荐

最新文章

热门文章