看到此篇文章请先自问
- 我的前端基础牢固么？
- 我脱离的度娘,Google还能写东西么？
- 我写的东西真的可以上线么？
对上面有疑问的，特别是刚刚入行的前端小白。不确定，那么您就给我好好看，好好背下面的面试题，不单单是应付面试，更多是，对自己的知识填充。
博文目录
- 看到此篇文章请先自问
- HTML面试题
- CSS面试题
- JavaScript面试题
- HTTP面试题
- 性能优化面试题
- 获取方式
HTML面试题
1.你如何理解HTML结构的语义化
- 更符合W3C统一的规范标准，是技术趋势。
- 没有样式时浏览器的默认样式也能让页面结构很清晰。
- 对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
- 对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
- 对SEO友好。
2.说说 title 和 alt 属性
- 两个属性都是当鼠标滑动到元素上的时候显示
- alt 是 img 的特有属性，是图片内容的等价描述，图片无法正常显示时候的替代文字。
- title 属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所
- 有标签，是对dom元素的一种类似注释说明
3.HTML5 有哪些新特性、移除了哪些元素？
- 新增元素：
- 绘画 canvas
- 用于媒介回放的 video 和 audio 元素
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 语义化更好的内容元素，比如 article 、footer、header、nav、section
- 表单控件 ，calendar 、date、time 、email 、url 、search
- 新的技术 webworker 、 websocket 、 Geolocation
- 移除的元素：
- 纯表现的元素： basefont、 big 、center、 font、s、strike、tt 、u
- 对可用性产生负面影响的元素：frame 、frameset 、noframes
- 支持 HTML5 新标签：
- IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
- 可以利用这一特性让这些浏览器支持 HTML5 新标签
- 浏览器支持新标签后，还需要添加标签默认的样式
4.你做的网页在哪些浏览器测试过,这些浏览器的内核分别 是什么?
5.iframe有那些缺点？
6.HTML全局属性(global attribute)有哪些
7.Label的作用是什么？是怎么用的？
8.HTML5 Canvas 元素有什么用？
9.除了 audio 和 video，HTML5 还有哪些媒体标签？
10.HTML5 中如何嵌入视频？
CSS面试题
1.水平居中的方法
- 元素为行内元素，设置父元素 text-align:center
- 如果元素宽度固定，可以设置左右 margin 为 auto ;
- 如果元素为绝对定位，设置父元素 position 为 relative ，元素设left:0;right:0;margin:auto;
- 使用 flex-box 布局，指定 justify-content 属性为 center
- display 设置为 tabel-ceil
2.垂直居中的方法
- 将显示方式设置为表格， display:table-cell ,同时设置 vertial-align：middle
- 使用 flex 布局，设置为 align-item：center
- 绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
- 绝对定位中固定高度时设置 top:50%，margin-top 值为高度一半的负值
- 文本垂直居中设置 line-height 为 height 值
3.link 与 @import 的区别
4.三列布局（中间固定两边自适应宽度）
5.清除浮动的几种方式
6.CSS3有哪些新特性
7.css3 新增伪类 - 伪元素
8.为什么要初始化CSS样式
9.IE盒子模型 、W3C盒子模型
10.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景
11.display:inline-block 什么时候不会显示间隙？
12.行内元素float:left后是否变为块级元素？
JavaScript面试题
1.说几条JavaScript的基本规范
2.闭包
3.变量对象
4.作用域
5.说说你对作用域链的理解
6.JavaScript原型，原型链 ? 有什么特点？
7.什么是事件委托
8.类的创建
9.如何实现继承？
10.谈谈This对象的理解
11.事件模型
12.new操作符具体干了什么呢?
13.Ajax原理
14.Ajax解决浏览器缓存问题
15.如何解决跨域问题?
16.说说你对AMD和Commonjs的理解
17.js的7种基本数据类型
18.介绍js有哪些内置对象
19.JS有哪些方法定义对象
20.null，undefined 的区别
21.谈谈你对ES6的理解
22.如何通过JS判断一个数组
HTTP面试题
1.HTTP 的请求方式场景
2.HTTP状态码
3.从浏览器地址栏输入URL后发生了什么？
4.请你谈谈Cookie的优缺点
5.GET 和 POST 请求的区别
6.tcp 三次握手，一句话概括
7.浏览器输入网址到页面渲染全过程
性能优化
1.SEO优化
2.server优化
3.css优化
4.js方面
5.webpack优化点
6.加载优化
7.页面渲染优化
8.图片优化
9.脚本优化
10.为什么利用多个域名来存储网站资源会更有效？
获取方式
以下文档我也整理了很长一段时间，拿来复习非常合适，对这些学习文档感兴趣的工程师朋友们可以关注我评论区留言【前端资源】即可拿走！整理不易，看完这篇文章觉得对您有帮助记得帮忙点赞收藏一波哦！！！！
✨ 更多面试题
✨ 学习视频
