前端入门学习资料大全（HTML、CSS、JavaScript、HTTP、性能优化、Vue框架、小程序）

看到此篇文章请先自问

• 我的前端基础牢固么？
• 我脱离的度娘,Google还能写东西么？
• 我写的东西真的可以上线么？

对上面有疑问的，特别是刚刚入行的前端小白。不确定，那么您就给我好好看，好好背下面的面试题，不单单是应付面试，更多是，对自己的知识填充。

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.为什么利用多个域名来存储网站资源会更有效？

点击查看更多知识点、源码笔记

获取方式

以下文档我也整理了很长一段时间，拿来复习非常合适，对这些学习文档感兴趣的工程师朋友们可以关注我评论区留言【前端资源】即可拿走！整理不易，看完这篇文章觉得对您有帮助记得帮忙点赞收藏一波哦！！！！

✨ 面试题

✨ 学习视频