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 ,随着浏览器的关闭自动清除

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张图片的字节小于多张图片的字节总和；

减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

缺点：

图片合成比较麻烦；

背景设置时，需要得到每一个背景单元的精确位置，；

维护合成图片时，最好只是往下加图片，而不要更改已有图片。

16、link与@import的区别

一,引入的内容不同,link不仅可以引入样式文件,还可以引入图片,而@import,只能引入样式文件 二,加载顺序不同,link引入的css文件会在页面加载时同时加载,而@import则是在页面完全载入以后再加载 三,兼容性不同,link是XHTML的标签,无兼容性问题,而@import是在css2.1提出的,低版本浏览器不支持 四,link支持js用DOM去改变元素,而@import不支持

17、如何创建块级格式化上下文(block formatting context)

一;绝对定位元素创建,fixed;  二display的属性为inline-block，table-cell，table-caption，flex，inline-flex 三,overflow的属性不为visbie  四,根元素, 五float 的属性不为none

18、清除浮动的几种方式，各自的优缺点

一,overflow:none 优点：简单，代码少，浏览器支持好,缺点: 不能和position一起使用,否则超出的元素会隐藏,  二,使用空标签,clear:both 优点 简单易上手 缺点：会添加很多无意义的空标签，有违结构与表现的分离 三,定义伪类after和zoom  优点:浏览器支持好，不容易出现怪问题,缺点:代码多，要两句代码结合使用，才能让主流浏览器都支持 四,定义父类元素的height优点：简单，代码少，容易掌握 缺点：只适合高度固定的布局 五,overflow的auto,优点,简单易上手,缺点,如果内部高度超出父级div就会出现滚动条

19、为什么要初始化CSS样式?

因为浏览器的兼容性问题,不同的浏览器某些标签的样式不同,初始化css样式可以更好的解决因为浏览器的不同而产生的页面的差异

20、css3有哪些新特性

圆角;border-radius:像素 阴影:box-shadow:像素 对文字加特效;text-shadow 线性渐变（gradient），旋转（transform）  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜  Animation动画特效 css弹性盒子模型  css选择器 last-child匹配父元素的最后一个子元素,nth-child()匹配父元素的第几个子元素 last-nth-child(),匹配父元素的倒数第几个子元素

21、display有哪些值？说明他们的作用

None:隐藏对象 block,指定元素为块元素,flex;弹性伸缩盒 inline,内联元素 table作为块级元素的表格, box作为弹性伸缩盒显示 inline-flex::作为内联块级弹性伸缩盒显示。 inline-block::行内块元素。 list-item: 此元素会作为列表显示。 inherit : 规定应该从父元素继承 display 属性的值

22、介绍一下标准的CSS的盒子模型？

盒模型：包括内容(content)、填充(padding)、边界(margin)、 边框(border)一起组成了css盒子模型 IE的content部分包含了 border 和 padding;

23、CSS优先级算法如何计算？

根据权重高低来判断 内敛样式>id选择器>类选择器,属性选择器,伪类>类型选择器  CSS 优先级是基于每列进行比对的 ID选择器的优先级大于多个类选择器叠加的优先级,如果优先级相等,则会选择最后一个进行渲染 属性值后添加!Import则会使优先级无效 元素会先使用该属性值 如果两种选择器的同一属性都添加了!Import 则会使用优先级高的哪一组

24、谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

25、position的值， relative和absolute`定位原点是

 absolute 生成绝对定位的元素，相对于 第一个父元素进行定位，若父元素都没有定位,则相对于html的根元素 （浏览器窗口）定位。

relative生成相对定位的元素，相对于其原来所在的位置进行定位。

26、display:inline-block 什么时候不会显示间隙？

元素之间不换行  margin负值使用  font-size:0  letter-spacing word-spacing

27、PNG,GIF,JPG的区别及如何选

GIF：

1：256色

2： 无损，编辑 保存时候，不会损失。

3：支持简单动画。

4：支持boolean透明，也就是要么完全透明，要么不透明

JPEG：

1：millions of colors

2： 有损压缩， 意味着每次编辑都会失去质量。

3：不支持透明。

4：适合照片，实际上很多相机使用的都是这个格式。

PNG：

1：无损，其实PNG有好几种格式的，一般分为两类：PNG8和truecolor PNGs；

与GIF相比：

它通常会产生较小的文件大小。它支持阿尔法（变量）透明度。无动画支持

与JPEG相比：文件更大。无损。因此可以作为JPEG图片中间编辑的中转格式。

结论：JPEG适合照片。GIF适合动画。PNG8适合其他任何种类——图表，buttons，背景，图表等等。