前端面试题目（都是一些总结的，从各处摘抄的题目）

àì夳堔傛蜴生んèń 2022-05-29 02:40 183阅读 0赞

*  前端遇到哪些兼容性问题，怎么解决？

答：（1）不同浏览器margin和padding不同，解决方法：\*\{margin:0;padding:0\}统一格式

（2）ie6中，父级元素浮动以后，内部元素内容撑不开宽度。解决方法：元素内部的块级元素也设置浮动

（3）标签嵌套不规范，如p和h1-h5里面嵌套div，解决方法：请正确的嵌套元素标签

（4）ie6小于19px，会当成19px处理，也就元素宽高小于19px的bug，解决方法：overflow:hidden

（5）在IE6下不支持1px的dotted边框样式，解决方法：可以采取切背景平铺的方法

（6）在IE6和IE7下父级有边框的时候，子元素的margin会失效，解决方法：触发haslayout，父级元素设置zoom：1；

（7）浮动后的元素在ie6下出现横向的双边距bug，解决方法给元素添加display：inline；

（8）多列均分（border兼容问题和计算数值问题），解决方法：在计算数值的时候一定要准确，不然的话兼容ie的时候布局非常麻烦，另外border这个也会出现一定问题，ie有些低版本的浏览器的内容部分包含border，其他浏览器不包含

/\*1、注意这个是没有边框的情况下数值是width+margin\*8（八个左右边距），如果不准确的话 ，ie浏览器会出现很多问题

因为当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况的时候，最后一行的子级元素的                  margin-bottom会失效

2、有边框的情况下数值在常规浏览器下是width+margin\*8（八个左右边距）+border（八个边框）

ie7中width+margin\*8（八个左右边距）+border（八个边框）另外底部需要用hack 设置padding-bottom的值

ie5和ie6中width+margin\*8（八个左右边距）

background: black;

overflow: hidden;/\*清除浮动\*/

.box div \{

width: 100px;

height: 100px;

background: red;

margin: 10px;

/\*border:5px solid blue; 此处我给注释啦，如果需要边框自己测试下\*/

float:left;

display: inline;/\*此处处理双边距bug问题\*/

（9）在IE6,7下，li本身没有浮动，li里面的元素有浮动，li下出现间隙的问题，解决方法：常规下给li加vertical-align:top 如果最下间隙和最小高度bug共存的时候，利用hack给li添加浮动；

（10）在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效，解决方法：不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把子标签包起来  
（11）在IE6.7下，子级元素有相对定位，父级overflow包不住子级元素，解决方法：给父级也加相对定位  
（12）在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差，解决方法：尽量将父级宽高设置非奇数  
（13）ie相关浏览器的透明度兼容问题，解决方法：给元素设置filter:alpha(opacity=50);代码如下：  
html：  
<div class="box"></div>  
css：  
body \{  
height: 2000px;  
background: red;  
\}  
.box \{  
width:200px;  
height: 200px;  
background: yellow;  
position: fixed;  
top:30px;  
left:100px;  
opacity: 0.5;  
filter:alpha(opacity=50);/\*此处解决透明度问题\*/  
\}  
（14）在IE6.7下 输入型的表单标签控件上下会有1px的间隙。  
解决方法：给input加浮动，代码如下：  
html：  
<div class="box">  
<input type="text">  
</div>  
css：  
.box \{  
width:200px;  
height:32px;  
border:1px solid \#000;  
\}  
input \{  
width:100px;  
height:30px;  
border:1px solid blue;  
margin:0;  
padding:0;  
float:left;  
\}  
（15）行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug，这个和上面那个有点类似，解决方法：在display:block;后面加入display:inline;display:table;  
（16）图片布局的问题，在布局的时候有的浏览器会出现间距，解决方法：使用 float浮动  
（17）使用ie下判断ie的版本语句兼容，解决方法：

*  盒子模型？

答：盒子本身有自己的border，盒子里的内容到盒子边框的距离成为padding，盒子边框与其他盒子之间的距离为margin

*  SVG和Canvas的区别

1）SVG是矢量图，放大不失真，而Canvas是位图，由像素点组成，放大会失真   
2）Canvas相较于SVG，支持的颜色数更多，更便于绘制色彩丰富的图像   
3）Canvas基于HTML，而SVG基于XML

*   jQuery原理系列-常用Dom操作详解

（1）事件绑定$(el).bind  
ie使用attachEvent，其它浏览器使用addEventListener，不同的是ie多了个on前缀，this绑定在window上，需要用call和apply修正this 的指向。  
if (element.addEventListener) \{ element.addEventListener(type, handler, useCapture); \} else \{ if (element.attachEvent) \{ element.attachEvent("on" + type, function(e)\{ handler.call(element,e); \}); \} \}   
（2）获取偏移量 $(el).position();  
相对于包含块的偏移量，直接取offsetLeft,offsetTop  
\{left: el.offsetLeft, top: el.offsetTop\}  
（3）获取相对于根元素的绝对位置$(el).offset()  
调用dom元素的getBoundingClientRect方法，这个是鲜为人知的。  
var rect = el.getBoundingClientRect(); \{ top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft \}  
（4）修改css样式 $(el).css(\{color:"red"\})  
style属性是无法直接赋值的，但是给style.cssText属性赋值，可以直接赋值到style属性中，为了不覆盖原有的style，我们在原有的cssText后面追加字符  
el.style.cssText+="background:red";  
（5）修改和获取自定义属性$(el).attr(name,val),  
dom元素的getAttribute和setAttribute可以修改dom的自定义属性，  
el.getAttribute(name)  
el.setAttribute(name,val);  
另外，jquery还有一个prop方法在设置dom节点的固有属性，例如checkbox，radio的checked属性时，用attr可能设置不成功，这时需要用prop ，prop只能用来读写固有属性，而attr是固有属性和自定义都可以，但是有些特殊的固有属性设置不成功时需要用prop  
（6）向上查找元素  $(el).parents(selector),$(el).closest(selector)  
向上查找元素非常有用，原理是遍历parentNode一直到根节点，判断每一级父节点是否与选择器相匹配,高级浏览器通过matchesSelector 判断一个dom元素是否匹配某个css 选择器，不同的浏览器有不同的前缀，  
var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector ||element.oMatchesSelector || element.matchesSelector低版本的ie需要自己实现选择器的判断，为了简化问题，仅以id选择器为例，其它选择器雷同（判断tagName,className,getAtrrbuite等）  
var el=current,selector="\#id1"; while(el.parentNode!=null)\{ if("\#"+el.id==selector)\{ //el.webkitMatchesSelector(selector) return el; \} el=el.parentNode; \}   
（7）事件委托 $(selector).live("click",callback)  
jQuery的live事件绑定机制非常强大，普通的bind只能在dom元素生成后才能绑定事件，而live则可以在任何时候，即使元素还没有生成时就能绑定事件，使用起来相当的多块好省，live的原理自然是通过事件委托（事件代理）实现的，事件委托是指在父元素或根元素上绑定事件，事件委托可以提升性能，只需要一个点击事件绑定就能处理所有元素的点击事件。通过事件冒泡监听，判断当前点击的元素event.target如果是要查找的目标元素，则触发事件回调函数，event.target只有一个，这会带来一个问题，例如一个li元素包含一个a链接，我想在li元素上绑定事件监听a链接的点击，直接通过event.target是不行的，需要查找父级元素，这就需要借助上一步封装的parents或closest查找父级如果是匹配的目标元素，也要触发事件回调，示例代码如下：  
function live(selector,callback)\{ document.body.addEventListener("click",function(e)\{ var target=e.target || e.srcElement; var list=closest(target,selector);//向上查找选择器，需要借助上一步封装的closest或parents函数 if(list.length>0)\{ callback.call(target,e); \} \}); \}  
（8）判断元素可见性 $(el).is(":visible")  
这个是jquery特有的伪类:visible，只要当前元素或其父节点不可见，就会返回false，和向上查找元素的原理一样，一直向上查找到根节点，如果有style.display为none的，或style.visiblity为hidden的祖先元素则返回false，否则返回true，获取style不能直接使用style属性，因为有些样式可能是定义在css文件中的，使用window.getComputedStyle(element)可以得到一个dom元素的计算样式，在ie8以下使用currentStyle获取。

6. SASS和LESS  
相同点：两者都是CSS预处理器，都具有相同的功能，可以帮助我们快速编译代码，帮助我们更好的维护我们的样式代码或者说维护项目吧。  
不同点：语法规则不同，当然功能或许略有差别。

7. SEO包括六个环节: （1）关键词分析（也叫关键词定位） （2）网站架构分析（3）网站目录和页面优化（4）内容发布和链接布置（5）与搜索引擎对话（6）网站流量分析

8.如何解决ajax跨域问题？

答：JSONP

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

添加响应头，允许跨域

addHeader(‘Access-Control-Allow-Origin:\*’);//允许所有来源访问

addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

代理的方式

服务器A的test01.html页面想访问服务器B的后台action，返回“test”字符串，此时就出现跨域请求，浏览器控制台会出现报错提示，由于跨域是浏览器的同源策略造成的，对于服务器后台不存在该问题，可以在服务器A中添加一个代理action，在该action中完成对服务器B中action数据的请求，然后在返回到test01.html页面。

9．Jquery的bind、live、on、delegate有什么区别？

bind：把事件绑定到每一个匹配的元素上，主要特点：兼容性比较好；绑定事件到所有选出来的元素上；不会绑定事件到动态添加的那些元素上；当元素很多时，会出现效率问题，特别是嵌套层次比较深的元素。

live：把所有的事件都绑定到jquery对象$(document) ，主要特点：事件只需要绑定一次，不需要绑定到筛选出来的元素上；动态添加元素后依然拥有绑定事件；不能使用event.stopPropagation() 来阻止事件的冒泡。

delegate：将事件绑定到指定的父元素上，和live类似但比较能活。主要特点：可以用在动态添加的元素上；绑定的父元素可以采用就近原则，减少查询的次数，比live的性能好；在live和delegate两者推荐使用delegate。

On：是jQuery1.7中新增的，前面的三种方法都是依赖on方法来实现的。，主要特点：事件的添加和卸载都要是通过on来实现的，提供一种统一的事件处理方法；增加了使用的难度，对于不熟悉on的使用的，很有可能就勿用，导致性能下降。

10.常见的浏览器内核？

（1）Trident内核：代表作品是IE（2）Gecko内核：代表作品是Firefox（3）Webkit内核：代表作品是Safari（4）Presto内核：代表作品是Opera（5）Blink内核： Chrome内核是Blink

11. js取屏幕中间位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题文档</title>

\#divTest\{

background:\#F1F1F1; border:1px solid \#006699; height:100px; width:100px;

</style>

function move()\{

var obj = document.getElementById("div");

obj.style.display = "";

var clientWidth = document.documentElement.clientWidth;

var clientHeight = document.documentElement.clientHeight;

var objWidth = obj.offsetWidth;

var objHeight = obj.offsetHeight;

var x = ( clientWidth - objWidth ) / 2;

var y = ( clientHeight - objHeight ) / 2;

obj.style.position = "absolute";

obj.style.left = x + "px";

obj.style.top = y + "px";

</script>

</head>

<body>

<input type="button" value="测试" οnclick="move()" />

<div id="divTest" style="display:none">

测试内容

</div>

</body>

</html>

12. JavaScript中alert(1&&2)为2的原因  
（1）只要“||”前面为false，无论“||”后面是true还是false，结果都返回“||”后面的值。  
（2）只要“||”前面为true，无论“||”后面是true还是false，结果都返回“||”前面的值。  
（3）只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;  
（4）只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

13. mouseover和mouseenter的区别

当绑定着两个事件的元素里面没有子元素的时候，这两个事件的触发效果是一致的。当绑定事件的元素里面有子元素的时候，鼠标经过绑定mouseover的当前元素以及它里面的子元素的时候，都会触发，而经过绑定mouseenter的元素时，只会在鼠标刚进入的时候触发，当进入其子元素的时候，是不会再触发的了。

网络上看到的面试题：

1.对WEB标准以及W3C的理解与认识？

（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可

提高搜索机器人对网页内容的搜索几率；

（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的

分离，提高页面的渲染速度，能更快地显示页面的内容；

（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户

所访问、内容能被更广泛的设备所访问、更少的代码和组件，从而降低

维护成本、改版更方便；

（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高

网站易用性；

遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发

者之间更好的交流。

2.xhtml和html有什么区别?

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言；

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select，img是行元素

Css盒模型:内容，border ,margin，padding

行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

(Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

(Q2)兼容性：display:inline-block;\*display:inline;\*zoom:1;

行元素转换为块级元素方式：display：block；

空元素：在HTML元素中，没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素。

4.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

5.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和

important哪个优先级高?

标签选择符类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

6.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

7.css的基本语句构成是?

选择器\{属性1:值1;属性2:值2;……\}

9.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的 使用display：inline；

2.3像素问题 使用float引起的 使用dislpay:inline-3px 或者

margin-right:-3px

3.超链接hover 点击后失效 使用正确的书写顺序 linkvisited hover

active；

4.Ie z-index问题 给父级添加position:relative；

5.Png 透明 使用js代码改；

6.Min-height 最小高度 ！Important 解决’；

7.select 在ie6下遮盖 使用iframe嵌套；

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使

用over:hidden,zoom:0.08 line-height:1px）；

11.图片上title与alt属性的区别是什么?

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，

它会直接输出在原本加载图片的地方；

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没

有了，有点类似jQuery的hover，你可以自己试试，另外，HTML的绝大多

数标签都支持title属性，title属性就是专门做提示信息的；

12.描述css reset的作用和用途？

Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后

重置，让他们统一。例如（有最简单的\*\{margin:0 ; padding:0\}）；

13.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量；

图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。 2）通过整合图片来减小图片的体积。

14.浏览器标准模式和怪异模式之间的区别是什么?

所谓的标准模式是指，浏览器按W3C标准解析执行代码；

怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16.什么是语义化的HTML?

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。

2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。

3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

4.支持多终端设备的浏览器渲染。

（总结：直观的认识标签对于搜索引擎的抓取有好处）

Javascript

1.javascript的typeof返回哪些数据类型

Object、number、 function、 boolean、 underfind、string

2.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）

隐式（== – ===）

3.split() join() 的区别

split()方法：用于把一个字符串分割成字符串数组.

join() 方法用于把数组中的所有元素放入一个字符串。

（总结：前者是切割成数组的形式，后者是将数组转换成字符串）；

4.数组方法pop() push() unshift() shift()

Push()尾部添加； pop()尾部删除；

Unshift()头部添加； shift()头部删除；

5.事件绑定和普通事件有什么区别？

事件绑定就是针对dom元素的事件，绑定在dom元素上

普通事件即为非针对dom元素的事件；

例如：

普通事件

var btn = document.getElementById("hello");

btn.onclick = function()\{

alert(1);

\};

btn.onclick = function()\{

alert(2);

\};

//这个事件只会弹出2；

事件绑定

var btn = document.getElementById("hello");

btn.addEventListener("click",function()\{

alert(1);

\},false);

btn.addEventListener("click",function()\{

alert(2);

\},false); //这个事

件首先会弹出1，然后在弹出2；

6.IE和DOM事件流的区别？

1.执行顺序不一样；

2.参数不一样；

3.事件加不加on；

4.this指向问题；

7.IE和标准下有哪些兼容性的写法

Var ev = ev || window.event

document.documentElement.clientWidth ||

document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别？

1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；

post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程；

2、Get请求有如下特性：它会将数据添加到URL中，通过这种方式传递到服务器，通常利用一个问号？代表URL地址的结尾与数据参数的开端，后面的参数每一个数据参数以“名称=值”的形式出现，参数与参数之间利用一个连接符&来区分。

Post请求有如下特性：数据是放在HTTP主体中的，其组织方式不只一种，有&连接方式，也有分割符方式，可隐藏参数，传递大批数据，比较方便。

3、get传送的数据量较小，不能大于2KB；

post传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异.

4、get安全性非常低，post安全性较高；

（总结：一个在url后面 一个放在虚拟载体里面；有大小限制；安全问题；应用不同 一个是论坛等只需要请求的，一个是类似修改密码的）

9.call和apply的区别？

相同点:两个方法产生的作用是完全一样的

不同点:方法传递的参数不同

Object.call(this,obj1,obj2,obj3)调用一个对象的一个方法，以另一个对象替换当前对象

Object.apply(this,arguments)应用某一对象的一个方法，用另一个对象替换当前对象。

10.ajax请求时，如何解释json数据？

使用eval parse 鉴于安全性考虑 使用parse更靠谱

11.b继承a的方法？

b.prototype=new a;

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)\{

if(!value)\{

if(obj.currentStyle)\{

return obj.currentStyle(attr)

\}else\{

obj.getComputedStyle(attr,false)

\}else\{

obj.style\[attr\]=value

13.事件委托是什么？

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）；

jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法；

14.闭包是什么，有什么特性，对页面有什么影响？

闭包的实质是一个函数，是一个用于返回局部变量值的函数，因为在全局中，受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念。由于闭包时，变量的值都保存到内存中，会导致页面加载时内存消耗很大，IE会导致内在泄露，因此尽量少用或用时要及时删除变量。

16.添加 删除 替换 插入到某个接点的方法？

obj.appendChild()

obj.innersetBefore

obj.replaceChild

obj.removeChild

17.解释jsonp的原理，以及为什么不是真正的ajax？

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象？

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

19.document load 和document ready的区别？

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有$().ready(function)

20.”==”和“===”的不同?

前者会自动转换类型

后者不会

21.javascript的同源策略?

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

22.编写一个数组去重的方法。

function oSort(arr)\{

var result =\{\};

var newArr=\[\];

for(var i=0;i<arr.length;i++)\{

if(!result\[arr\])\{

newArr.push(arr)

result\[arr\]=1

return newArr

4.box-sizing常用的属性有哪些？分别有什么作用？

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5.Doctype作用？标准模式与兼容模式各有什么区别?

(Q1)<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

6.HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

8.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

10.简述一下你对HTML语义化的理解？

用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

2、实现文本三个点的几个条件

text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：

1、容器宽度：width：value；（px、%，都可以）

2、强制文本在一行内显示:white-space：nowrap;

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号：text-overflow：ellipsis;

注：必须是单行文本才能设置本文溢出！！！

IE6+；chrome1.0+；safari3.1+（firefox,opera暂不支持）

3、垂直居中的几个条件

设置一个元素在一个容器中垂直居中，必须更改默认的display属性值为inline-block;

并加上同级元素（标尺）（同级元素\[标尺\]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;）。

三个条件：

1：必须给容器（父元素）加上text-align:center;

2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;

3：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block

4、置换元素与非置换元素

置换元素与非置换元素

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高的原因。

b) 不可替换元素（非置换元素）：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。

6、什么是css层叠样式表？优先级算法如何计算？

a.重要性和来源的优先级排序从低到高是：

1）浏览器默认样式

2）class/id.....选择器的权重

3）行间样式

4）内联或者外联 （书写顺序）

5）!important 最高的

7、display:none与visibility:hidden的区别

前者：隐藏不占位  后者：隐藏但是占位置

9、哪些属性可以继承？

1）文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing

2）列表相关：list-style-image、list-style-position、list-style-type、list-style

3）颜色相关：color

4）透明度（子元素会继承祖元素的opacity，但是无法更改）

注：font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值得时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。

12、定位的属性值都有哪些？每个值得意思？

各属性值的作用：

static：默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

absolute：相对于父级元素的绝对定位，s浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“right”以及 “bottom” 属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)

relative：是相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】

fixed：相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。

13、写出html5新增的标签15个

header nav footer main aside article section figure datalistvideo audio fieldest  legend  label caption

14、一、BFC是什么？作用？怎么产生？

1、块级格式化上下文

2、自适应两栏布局、清除内部浮动、防止垂直margin重叠（放在两个BFC里）

3、根元素、 float属性不为none、 position为absolute或fixed、 display为inline-block，table-cell，table-caption，flex，inline-flex、overflow不为visible

15、.px，em，rem，pt的区别

1）px实际上就是像素，用px设置字体大小时，比较稳定和精确

但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的web页面时，如果对浏览器进行了缩放，这时会使我们的web页面布局被打破。因此，这时就提出了使用“em”来定义web页面的字体。

2）em就是根据基准来缩放字体的大小

em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小

3）rem是相对于根元素字体大小来显示的

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值

4）pt的大小等于1英寸的1/72

磅：他是作为文字的一种计量单位

这种度量方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器

16、实现垂直+水平居中有哪些方法？

1、div\{width:200px;height:200px;background:\#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;\}

2、div\{width:200px;height:200px;background:\#f00;position:fixed;left:50%;top:50%;margin:-100px0 0 -100px;\}

17、渐进增强和优雅降级

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

18、css选择符有哪些？

1）通配选择符      \*

2）类型选择符 /元素选择符     a

3）属性选择符     input\[type="button"\]

4）包含选择符     div .codea

5）子对象选择符    ul.test>li

6）ID选择符     \#

7）类选择符     .

8）群组选择符    body,ul,li

9）伪类及伪对象选择符    div:first-letter     a:hover

10）相邻选择符     li+li

19、animation和transition的区别

相同点：都是随着时间改变元素的属性值。

不同点： transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

20、什么是标准盒模型和怪异盒模型。两者的区别，如何实现怪异盒模型，和标准和模型

标准盒模型：content+border+padding

怪异盒模型：content

一个算盒子的宽度的时候加上border和padding另一个不加

怪异盒模型实现：box-sizing:border-box

标准盒模型：box-sizing:content-box

22、video与audio常用的格式有哪些

用于视频：video/ogg   video/mp4    video/webm 用于音频：audio/ogg   audio/mpeg

23、简单的解释下弹性盒模型的属性和属性值（至少写出6个属性）

display:flex;

flex-direction:

justify-content:

align-items:

align-self:

align-content:

flex-wrap:

23、简单的介绍一下线性渐变和径向渐变、重复渐变的用法

线性渐变：linear-gradient()

径向渐变：radial-gradient()

重复线性渐变：repeating-linear-gradient()

重复径向渐变：repeating-radial-gradient()

24、简单介绍下animation的用法

animation有两部分组成：animation:动画名称  动画执行时间  动画类型 动画延迟时间  动画重复次数 动画方向；@keyframes 动画名字

25、css3D的主要几个属性和属性值

1、景深：perspactive:number;    想要看到的物体越大，那么就把值设的较小，如果要看物体看的越小就把值设的越大

2、3D的舞台：transform-style:preserve-3d;

3、translateZ()  rotateZ()   scaleZ()

26、2D中的主要几个属性

transform:translate()  rotate() skew()  scale()

transform-origin:

27、简单介绍过度动画的属性和属性值

transition:属性名称（可以用all） 动画执行的时间  动画的类型  动画的延迟时间

28、css3中新增的背景属性

background-origin:背景原点

background-clip:背景裁切

background-size:背景图像的尺寸

以下为background-size的三个值

length规定背景图的大小。第一个值宽度，第二个值高度。

Percentage(%)以百分比为值设置背景图大小

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

31、IE的过滤器有哪些？

1、  \_ 下划线属性过滤器

2、  \\9 ：  IE版本识别；其他浏览器都不识别 语法：选择符\{属性：属性值\\9;\}

3、  \\0  :   IE8及以上版本识别；其他浏览器都不识别     语法：选择符\{属性：属性值\\0；\}

一、HTML5 CSS3

CSS3有哪些新特性？

1. CSS3实现圆角（border-radius），阴影（box-shadow），

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器  多背景 rgba

5. 在CSS3中唯一引入的伪元素是 ::selection.

6. 媒体查询，多栏布局

7. border-image

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 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；

支持HTML5新标签：

1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

<!--\[if lt IE 9\]>

<!\[endif\]-->

如何区分：

DOCTYPE声明新增的结构元素、功能元素

本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

如何实现浏览器内多个标签页之间的通信?

调用 localstorge、cookies 等本地存储方式

什么是响应式设计？

响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。

新的 HTML5 文档类型和字符集是？

答：HTML5文档类型：<!doctype html>

HTML5使用的编码<meta charset=”UTF-8”>

HTML5 Canvas 元素有什么用？

答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

HTML5 存储类型有什么区别？

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

用H5+CSS3解决下导航栏最后一项掉下来的问题

CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个<p> 元素的每个 <p> 元素。

p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。

css属性的熟练程度和实践经验

描述下CSS3里实现元素动画的方法

动画相关属性的熟悉程度

你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

\* 首先划分成头部、body、脚部；

\* 实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

处理hack，兼容、写出优美的代码格式

针对服务器的优化、拥抱HTML5。

HTML5的离线储存？

localStorage    长期存储数据，浏览器关闭后数据不丢失；

sessionStorage  数据在浏览器关闭后自动删除。

HTML5和CSS3的新标签

HTML5： nav, footer, header, section, hgroup, video, time,canvas, audio...

CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius,border-image,

border-color, transform...;

自己对标签语义化的理解

在我看来，语义化就是比如说一个段落， 那么我们就应该用 <p>标签来修饰，标题就应该用 <h?>标签等。符合文档语义的标签。

4.简述几个css hack? ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

(1) 图片间隙

在div中插入图片，图片会将div下方撑大3px。hack1：将<div>与<img>写在同一行。hack2：给<img>添加display：block；

dt li 中的图片间隙。hack：给<img>添加display：block；

(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）

hack1：给元素添加：font-size：0；

hack2：声明：overflow：hidden；

表单行高不一致

hack1：给表单添加声明：float：left；height： ；border： 0；

鼠标指针

hack：若统一某一元素鼠标指针为手型：cursor：pointer；

当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状

hack1：给a加display：inline-block；

hack2：给li加float：left；

\\9 ie10之前的ie浏览器解析的代码  
\+或者\* 表示ie7包括7之前的ie浏览器  
\_表示 ie6包括6之前的ie浏览器

6.transform？animation？区别?animation-duration

Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。

Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.

animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

7.nth-of-type | nth-child?

举例说明：

li:nth-of-type(2):表示ul下的第二个li元素

li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）。

建议一般使用nth-of-type，不容易出问题。

8. :before 和 ::before 区别?

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

9.如何让一个div 上下左右居中?

答：有三种方法。

方法1： .div1\{ width:400px;  height:400px; border:\#CCC 1px solid;  background:\#99f; position:absolute;  left:50%;   top:50%;  transform: translate(-50%,-50%); \}  <div class="div1"></div>

方法2： .div2\{ width:400px;  height:400px; border:\#CCC 1px solid;  background:\#99f;  position: absolute;  left:0; top: 0;  bottom: 0;  right: 0; margin: auto; \}  <divclass="div2"></div>

方法3： .div3\{ width:400px;  height:400px; border:\#CCC 1px solid; background:\#9f9;  position:absolute;  left: 50%;  top:50%; margin-left:-200px;  margin-top:-200px;  \}   <divclass="div3"></div>

10.css2.0 和css3.0

答：css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。

11.弹性盒子模型?flex|box区别?

(1) 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。

即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。

在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；

而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

(2) flex和box的区别: display：box 是老规范，要兼顾古董机子就加上它； 父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。 flex是最新的，董机老机子不支持的；

父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。 Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。

12.viewport 所有属性 ？

(1)width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';

(2)initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。

(3)minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。

(4)maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。

(5)height:设置layout viewport的高度，这个属性对我们并不重要，很少使用

(6)user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。

安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素

(7)target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

14.伪类选择器和伪元素？c3中引入的伪类选择器有？c3中伪元素有?

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

伪类选择器：由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器；

c3中引入的伪类选择器：

:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。:root选择器等同于<html>元素。

:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

:nth-child()选择某个元素的一个或多个特定的子元素。

:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。

:only-child表示的是一个元素是它的父元素的唯一一个子元素。

:first-line为某个元素的第一行文字使用样式。

:first-letter 为某个元素中的文字的首字母或第一个字使用样式。

:before 在某个元素之前插入一些内容。

:after 在某个元素之后插入一些内容。

c3中伪元素：

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动

::selection用来改变浏览网页选中文的默认效果

16.placeholder?如何在ie8上兼容placeholder这个效果

方法一：

首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；

当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充

进输入框作为提示信息，同时字体设置成灰色；

当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可

此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。

HTML：

CSS：

.phcolor\{ color:\#999;\}

$(function()\{

//判断浏览器是否支持placeholder属性

supportPlaceholder='placeholder'in document.createElement('input'),

placeholder=function(input)\{

var text =input.attr('placeholder'),

defaultValue =input.defaultValue;

if(!defaultValue)\{

input.val(text).addClass("phcolor");

input.focus(function()\{

if(input.val() ==text)\{

$(this).val("");

\});

input.blur(function()\{

if(input.val() =="")\{

$(this).val(text).addClass("phcolor");

\});

//输入的字符不为灰色

input.keydown(function()\{

$(this).removeClass("phcolor");

\});

\};

//当浏览器不支持placeholder属性时，调用placeholder函数

if(!supportPlaceholder)\{

$('input').each(function()\{

text =$(this).attr("placeholder");

if($(this).attr("type")== "text")\{

placeholder($(this));

\});

方法二：

此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；

当输入框不为空时，去掉背景图；

当输入框为空时，加载背景图；

当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；

当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。

此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。

CSS：

.phbg\{ background:url(img/bg.jpg) 0 0 no-repeat;\}

$(function()\{

//判断浏览器是否支持placeholder属性

supportPlaceholder='placeholder' in document.createElement('input');

if(!supportPlaceholder)\{

//初始状态添加背景图片

$("\#uname").attr("class","phbg");

//初始状态获得焦点

$("\#uname").focus;

function destyle()\{

if($("\#uname").val() != "")\{

$("\#uname").removeClass("phbg");

\}else\{

$("\#uname").attr("class","phbg");

//当输入框为空时，添加背景图片；有值时去掉背景图片

destyle();

$("\#uname").keyup(function()\{

//当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片

destyle();

\});

$("\#uname").keydown(function()\{

//keydown事件可以在按键按下的第一时间去掉背景图片

$("\#uname").removeClass("phbg");

\});

方法三：

使用插件：Placeholders.js

18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式

1、尽量减少HTTP请求次数

2、减少DNS查找次数

3、避免跳转

4、可缓存的AJAX

5、推迟加载内容

6、预加载

7、减少DOM元素数量

8、根据域名划分页面内容

9、使iframe的数量最小

10、不要出现404错误

11、使用内容分发网络

12、为文件头指定Expires或Cache-Control 13、Gzip压缩文件内容

14、配置ETag

15、尽早刷新输出缓冲

16、使用GET来完成AJAX请求

17、把样式表置于顶部

18、避免使用CSS表达式（Expression）

19、使用外部JavaScript和CSS

20、削减JavaScript和CSS

21、用<link>代替@import

22、避免使用滤镜

23、把脚本置于页面底部

24、剔除重复脚本

19.jquery版本?1.11兼容?

Query 2.x系列和 jQuery 1.x拥有同样的API，但是不再支持IE6、7、8。

推荐使用 1.x version，除非你确定IE6、7、8用户不再访问网站。

jquery1.11属于1.x 版本，其兼容IE6、7、8，所以也支持IE9.

21.media属性？screen？All？max-width?min-width?

media 属性规定被链接文档将显示在什么设备上。media 属性用于为不同的媒介类型规定不同的样式。Screen计算机默认屏幕，all适用于所有设备，max-width超过最大宽度就不执行，min-width必须大于最小宽度才执行。

22.meta标签的name属性值？

name 属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是：＜meta name="参数" content="具体的参数值"＞。

其中name属性主要有以下几种参数：

A 、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。

B 、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容.

C 、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow,默认是all。

举例：＜meta name="robots" content="none"＞D 、author(作者)

23.一般做手机页面切图有几种方式?

响应式布局，弹性布局display：flex，利用js编写设定比例，给根元素设定像素，使用rem为单位。

25.sass和scss有什么区别?sass一般怎样编译的

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号(\{\})和分号(;)，而 SCSS 的语法书写和我们的CSS 语法书写方式非常类似。

*  如何对css进行优化处理？

压缩打包，图片整合，避免使用Hack，解决兼容问题，使用简写，让CSS能保证日后的维护。

*  如何对css文件进行压缩合并? gulp ?

使用gulp, 首页全局安装gulp。

1、npm install --global gulp

2、其次局部安装gulp。npm install gulp--save-dev

3、在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');

gulp.task('default', function() \{

// 将你的默认的任务代码放在这\});

4、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp <task> <othertask>）

gulp

合并和压缩JS、CSS文件

压缩JS，CSS文件需要引用如下组件：

gulp-minify-css: 压缩css

*  组件? 模块化编程？

组件化编程: 将js css html包装一起提供方法和效果；

模块化编程: 将相同的功能抽取出来 存放在一个位置进行编程

*  图片和文字在同一行显示?

1 在css中给div添加上“vertical-align:middle”属性。

2 分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行。

3 把图片设置为背景图片。

*  禁止事件冒泡

event.stopPropagation()

*  禁止默认事件

event.preventDefault()

*  a标签中 active hover link visited 正确的设置顺序是什么?

按照link、visited、hover、active顺序

*  a标签中 如何禁用href 跳转页面 或 定位链接

1.e.preventDefault();

2.href="javascript:void(0);

*  手机端上 图片长时间点击会选中图片，如何处理?

οnselect=function() \{return false\}

*  video标签的几个个属性方法

src：视频的URL poster：视频封面，没有播放时显示的图片preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度

*  常见的视频编码格式有几种?视频格式有几种?

视频格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式

视频编码格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1

*  canvas在标签上设置宽高 和在style中设置宽高有什么区别？

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值 。

*   border-image？box-sizing?

Border-image : 图形化边框

Box-sizing : 属性允许您以特定的方式定义匹配某个区域的特定元素。

语法 ：box-sizing：content-box | border-box

Content-box : padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 (Element width = width + border + padding) 此属性表现为标准模式下的盒模型 .

Border-box : padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

*  解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?

IE当padding+border的值小于width或者height:

盒模型的宽度=margin(左右)+width（width已经包含了padding和border的值）

盒模型的高度=margin(上下)+height（height已经包含了padding和border的值）

当padding+border的值大于width或者height:

盒模型的宽度=margin(左右)+padding(左右)+border(左右)

盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默认行高 19px） 所以相当于是padding+border和width或者height比大小，谁大取谁。

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式） CSS3box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

*  animation对应的属性

写法：animation: name duration timing-function delay iteration-countdirection;

下面是对应的属性的介绍

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

*  transition?

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 注意区别transform，transform是进行2D转换的 如移动，比例化，反过来，旋转，和拉伸元素。

*  h5新特性？

1、绘画的 canvas 元素

2、用于媒介回放的 video 和 audio 元素

3、对本地离线存储的更好的支持

4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

*  所用bootstap版本？3.0

*  为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

*  什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法：只要在<head>之间加入一个<link>或者<script>元素就可以了。

*  a点击出现框，解决方法:

a,a:hover,a:active,a:visited,a:link,a:focus\{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-tap-highlight-color: transparent;

outline:none;background:none;

text-decoration:none;border:none;

-webkit-appearance:none; \}

*  为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

*  请谈一下你对网页标准和标准制定机构重要性的理解。

（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

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

*  简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

*  知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）

科普一下Webp

WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。

Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

*  知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

答案：微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

*  在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。

*  一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

Css篇：

*  CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：设置display属性为none，或者设置visibility属性为hidden

技巧性：设置宽高为0，设置透明度为0，设置z-index位置在-1000

*  什么是外边距重叠？重叠的结果是什么？

答案：外边距重叠就是margin-collapse。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

*  rgba()和opacity的透明效果有什么不同？

答案：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

*  css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

答案：垂直方向：line-height水平方向：letter-spacing

letter-spacing的妙用知道有哪些么？

答案:可以用于消除inline-block元素间的换行符空格间隙问题。

*  知道css有个content属性吗？有什么作用？有什么应用？

答案：知道。css的content属性专门应用在before/after 伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

前端面试题目（都是一些总结的，从各处摘抄的题目）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Web前端面试题目汇总

相关前端面试题目总结

相关 Web前端面试题目汇总

相关 2020前端面试题目

相关一些前端编程题目（一）

相关 Go总结的面试题目

相关一些面试题目

相关前端面试题目（都是一些总结的，从各处摘抄的题目）

相关面试题目总结一

相关前端面试常见题目