最近结合公司招聘需求，我也做了一些面试题的汇总，来考验我们的同行挚友，在这里也简单跟大家分享一下，有需要的朋友敬请关注，后续章节仍有面试题更新。
1、前端需要注意哪些SEO
①Html代码要符合w3c的规定，②非装饰的图片必须加alt，③重要的html内容一定要放在前边，搜素引擎的抓取是从上到下的，万一有长度限制，会出现抓取的问题，④合理的title、description、keywords，title值强调重点即可，重要的关键词不要出现太多次，并且要靠前，description进行页面概括，每个页面都需要一个description，keywords列举出重要的关键词，他们三个都是<meta>里边的，尽量不要使用iframe标签，搜索引擎可能抓取不到，⑥提高网站速度
2、<img>的title和alt有什么区别
①title是对元素的注释或者说明，当鼠标放在元素上是对元素进行一种说明，alt 是给搜索引擎的识别，当img属性不显示的时候对img进行一种说明，如网速太慢或者浏览器禁止加载图片的时候，对img属性的说明
②title 不作为搜索引擎抓取img属性时候的参考，alt则是作为搜索引擎抓取时的图片与文字是否相关的参考
3、HTTP的几种请求方法用途
①get请求：向服务器发送请求来获取某一资源
②post请求：向url指定的资源提交或者修改数据
③delete请求;删除服务器上的某一资源
④head请求：与get请求差不多，返回的响应没有具体内容，主要就是请求URL的有效性跟日期的更新
⑤put请求：从客户端传送到服务器的数据取代指定的文档数据
⑥OPTIONS请求：查询所请求的资源所支持的方法
⑦TRACE请求：将请求的内容进行返回
⑧CONNECT请求：在于代理服务器传输时，建立一个隧道，然后对传输的内容进行加密后，通过网络隧道传输
4、从浏览器地址栏输入url到显示页面的步骤
地址栏输入url后按下回车 2，查找当前所输入的url是否存在缓存中，并比较缓存是否过期3，DNS进行解析url相对应的ip 4 http发起请求 5，根据IP建立TCP的连接 6，服务器处理请求，浏览器接受http响应 7，渲染页面构建DOM树 8,关闭 TCP连接
5、如何进行网站性能优化
①减少HTTP请求，合并css js 图片 将浏览器一次需要访问的合并成一个文件，多张图片合并成一张图片 ②使用浏览器缓存，设置浏览器的缓存天数 ③在服务器端对文件进行压缩，减少传输的数量数 ④减少cookie的传输，静态资源可以使用独立的域名进行访问 ⑤使用CDN加速，或者使用代理服务器 ⑥ajax使用get请求，避免src为空的img标签 ⑦将样式表放到页面的顶部，将js放到页面的尾部，将js和css从外部引入，压缩js跟css删除不必要的脚本 ⑧组件要小于20k ⑨延迟加载的内容或者使用懒加载（就是点击查看更多）
6、HTTP状态码及其含义
① 信息状态码： 100 继续 服务器返回 确认后发送具体参数信息
② 成功状态码：200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求，但尚未处理
③ 重定向： 301，请求的网页换位置了 302，临时重定向 303临时重定向 使用get请求新的url 304 从上次请求后请求的网页未修改过，
④ 客户端错误： 400 服务器无法理解请求格式，换方式进行请求 401 请求未授权 403 禁止访问 404 找不到与url相匹配的资源
⑤ 服务器错误 500 服务器端错误 503 服务器暂时无法处理请求
7、语义化的理解
代码结构清晰容易阅读，利于开发和维护，方便其他设备解析，根据语义渲染页面，有利于搜素引擎的优化，减少差异化
8、介绍一下你对浏览器内核的理解
主要有两个部分组成，js引擎跟渲染引擎
Js引擎：解析脚本来实现网页的动态效果
渲染引擎：获取网页的内容，整理信息，计算网页的显示方式，输出到显示器
9、html5有哪些新特性、移除了那些元素？
新特性: localStorage 本地离线储存 sessionStorage的数据在浏览器关闭后自动删除Geolocation 地理定位websocketsocket通信 新的技术webworker(专用线程) 表单控件，calendar、date、time、email、url、search ; 语意化更好的内容元素，比如article、footer、header、nav、section; 用于媒介回放的 video和 audio 元素 ; 绘画 canvas;
移除的元素:<basefont> 默认字体，不设置字体，以此渲染 <font> 字体标签 <center> 水平居中 <u> 下划线 <big> 大字体<strike> 中横线 <tt> 文本等宽框架集:<frameset> <noframes> <frame>
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
原理:在用户没网时,可以正常进行访问,在连接时更新缓存文件 , h5离线储存是基于一个新建的.appcache文件的缓存机制,通过文件解析所需要离线储存的资源,这些资源就会像cookie一样保存下来,然后当网络处于离线的时候,浏览器会根据被储存下来的数据进行页面的展示
使用:1,在页面头部加入一个manifest的属性；2在cache.manifest文件的编写离线存储的资源 3:在离线状态时，操作window.applicationCache进行需求实现
11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
(1) 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后 浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资 源并进行离线存储。
(2)离线的情况下，浏览器就直接使用离线存储的资源。
12、请描述一下 cookies，sessionStorage 和 localStorage 的区别
（1）cookie在浏览器和服务器间来回传递， sessionStorage和localStorage不会。
（2）sessionStorage和localStorage的存储空间更大。
（3）sessionStorage和localStorage有更多丰富易用的接口。
（4）sessionStorage和localStorage各自独立的存储空间。
Cookies 有时间的限制,localstoared的值会一直存在浏览器中,除非清除缓存跟卸载否则一直存在, sessionStorage ,随着浏览器的关闭自动清除
Cookies的存值是在浏览器,而sessionStorage 是在服务器
13、iframe有那些缺点？
1,会产生很多页面不易管理,2如果框架过多则会出现上下左右滚动条,导致用户体验差,3代码复杂,一些搜索引擎无法引到,会不利于搜索引擎的优化4,设备兼容性差5增加服务器的http请求
14、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素: a、b、span、img、input、strong、select、label、span、button、textarea标签
块级元素;div ul、li、dl、dt、dd、p、h1-h6标签
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
15、css sprite是什么,有什么优缺点
网页图片应用处理方式就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
其优点在于：
减少网页的http请求，提高性能，减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点：
图片合成比较麻烦；
背景设置时，需要得到每一个背景单元的精确位置，；
维护合成图片时，最好只是往下加图片，而不要更改已有图片。
16、link与@import的区别
17、如何创建块级格式化上下文(block formatting context)
18、清除浮动的几种方式，各自的优缺点
19、为什么要初始化CSS样式?
20、css3有哪些新特性
21、display有哪些值？说明他们的作用
22、介绍一下标准的CSS的盒子模型？
23、CSS优先级算法如何计算？
24、谈谈浮动和清除浮动
25、position的值， relative和absolute`定位原点是
26、display:inline-block 什么时候不会显示间隙？
27、PNG,GIF,JPG的区别及如何选择使用？
以上仅限于个人总结，仅作交流学习。