WEB前端开发面试题

三大类：HTML,CSS,Javascript(jquery)

HTML:

什么是语义化的HTML?有何意义？为什么要做到语义化？（高频率考题）
a、什么是语义化的HTML？
语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

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

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

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

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

行内元素和块元素分别有哪些？（高频率）

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
　行内元素：span, strong, em, br, img , input, label, select, textarea, cite,

严格模式与混杂模式的区分？如何触发这两种模式？（高频率）

区分DOCTYPE（是Document Type文档类型的简写）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人这个文档的类型风格。

区别：严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
，混杂模式则是一种向后兼容的解析方法。
触发：根据不同的DTD触发，如果没有声明，那么默认为混杂模式。

Doctype 是什么？有啥作用

DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。

HTML与XHTML的区别
1、XHTML元素必须被正确地嵌套

2、XHTML 元素必须被关闭，空标签也必须被关闭。如

3、XHTML 元素必须小写

4、XHTML 文档必须拥有一个根元素

5、XHTML属性名称必须小写，属性值必须加引号，属性不能简写。如：
6、XHTML用 id 属性代替 name 属性。

注意：应该在 “/” 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容

7、语言属性（lang）lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。如果在某元素中使用 lang 属性，就必须添加额外的 xml:lang，　　像这样：

Heia Norge!

HTML5以什么标签开头？

HTML5的网页文件开头是声明标签是
　　（页面头部，不同与）

Div与span的区别
1、它2个都是用来划分区间但是没有实际语义的标签；
2、差别就在于div是块级元素,不会其他元素在同一行;span是内联元素_{可以与其他元素位于同一行}
Img的alt和title有啥区别？各自作用？
　　alt:图片替代文字（IE6会提示）
　　title:鼠标提示文字
HTML5的离线储存
　　它的优势在于与平台的无关性，无论你是windows，unix，linux，mac，都可以观看html5格式的内容。
iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
*SEO不利，对爬虫不友好。

CSS:

CSS盒模型原理（高频率）

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

CSS的导入方式：import与link方式的区别？优缺点？（高频率）
　　两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

CSS的优先级？内联和important哪个优先级高？（高频率）

id选择器值：100
　　类选择器值：10
　　标签选择器： 1

盒子垂直居中方法（高频率）

position: absolute;
　　left:50%;
　　top:50%;
　　width:400px;
　　height:400px;
　　margin-left:-200px;
　　margin-top:-200px;

浮动元素清除浮动方法（高频率）
　　四种方法：
　　1、使用空标签清除浮动
　　2、使用overflow属性。（overflow:auto；zoom:1″用于兼容IE6）
　　3、使用after伪对象清除浮动。该方法只适用于非IE浏览器。
　　4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。
常见兼容性问题（高频率）
　　
浮动:

1.双倍边距bug 块浮动横向margin display：inline

2.li本身没浮动内容浮动 ie6 li 内容浮动给li加浮动 li加vertical-alian

其实就是浮动块状元素前面不能有内联文本的出现

ie6 下，下margin消失

当一行子元素占有的宽度之和和父级的宽度相差超过3px，或者有不满行状态的时候最有一行的子元素的下margin值就会失效、

ie6下文字溢出bug

原因 1.浮动元素前面有注释或者内联元素

内联元素越多，溢出越多

子元素的宽度和父级的宽度相差小于3px的时候

解决办法用div包起来或者把父级元素宽度调大

CSS的定位属性，各自区别，应用场景

static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，　　　　　　　　　　　　absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed（固定定位）这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

谈谈CSS3 Media Queries
Diplay:none与visibility：hidden的区别（高频率）

visibility:hidden隐藏，但在浏览时保留位置；
display:none视为不存在，且不加载！

10.谈谈CSS hack

各游览器常用兼容标记一览表:

标记 IE6 IE7 IE8 FF Opera Sarari
[*+><] √ √ X X X X
_ √ X X X X X
\9 √ √ √ X X X
\0 X X √ X √ X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} X X X X X √
.bb , x:-moz-any-link, x:default X √ X √(ff3.5及以下) X X
@-moz-document url-prefix(){.bb{}} X X X √ X X
@media all and (min-width: 0px){.bb {}} X X X √ √ √

+html .bb {} X √ X X X X
游览器内核 Trident Trident Trident Gecko Presto WebKit

11.CSS中em和px的关系和区别

em的值并不是固定的；
em会继承父级元素的字体大小。
　　12px = 1.2em

12.。。。。。

Javascript：

闭包的理解，javascript的作用域（高频率）

a、闭包就是能够读取其他函数内部变量的函数。
　b、在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

JS中作用域的概念：

表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函　　数来区分的。

Ajax的跨域问题和缓存原理？同步与异步的区别？（高频率）
数组的增删查找（高频率）
http://blog.csdn.net/lxp1021/article/details/6632678
DOM节点的创建、移动、复制、删除、查找。（高频率）

(1）创建新节点

  createDocumentFragment()    //创建一个DOM片段

  createElement_x_x()   //创建一个具体的元素

  createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

  appendChild()

  removeChild()

  replaceChild()

  insertBefore()

（3）查找

  getElementsByTagName()    //通过标签名称

  getElementsByName()    //通过元素的Name属性的值

  getElementById()    //通过元素Id，唯一性

1.创建元素节点
document.createElement_x_x() 方法用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点

1 var div = document.createElement_x_x(“div”); //创建一个div元素
2 div.id = “myDiv”; //设置div的id
3 div.className = “box”; //设置div的class
创建元素后还要把元素添加到文档树中

2.添加元素节点
appendChild() 方法用于向childNodes列表的末尾添加一个节点，返回要添加的元素节点

1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul
2 var li = document.createElement_x_x(“li”); //创建li
3 li.innerHTML = “项目四”; //向li内添加文本
4 ul.appendChild(li); //把li 添加到ul子节点的末尾

appendChild() 方法还可以添加已经存在的元素，会将元素从原来的位置移到新的位置
1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul
2 ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

insertBefore() 方法，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法，该方法接受2个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点

1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul
2 var li = document.createElement_x_x(“li”); //创建li
3 li.innerHTML= “项目四”; //向li内添加文本
4 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前

1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul
2 var li = document.createElement_x_x(“li”); //创建li
3 li.innerHTML= “项目四”; //向li内添加文本
4 var lis = ul.getElementsByTagName_r(“li”) //获取ul中所有li的集合
5 ul.insertBefore(li,lis[1]); 　　　　//把li添加到ul中的第二个li节点前
添加后:

3.移除元素节点
removeChild() 方法，用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点，注意被移除的节点仍然在文档中，不过文档中已没有其位置了

1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul
2 var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点

1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul
2 var lis = ul.getElementsByTagName_r(“li”) //获取ul中所有li的集合
3 ul.removeChild(lis[0]); 　　　　　　//移除第一个li，与上面不同，要考虑浏览器之间的差异
4.替换元素节点
replaceChild() 方法，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点

1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul
2 var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点

1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul;
2 var li = document.createElement_x_x(“li”); //创建li
3 li.innerHTML= “项目四”; //向li内添加文本
4 var lis = ul.getElementsByTagName_r(“li”) //获取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li
5.复制节点
cloneNode() 方法，用于复制节点，接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

1 var ul = document.getElementByIdx_xx_x(“myList”); //获得ul
2 var deepList = ul.cloneNode(true); //深复制
3 var shallowList = ul.cloneNode(false); //浅复制

SetTimeout与setInterval区别

因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次
而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
面向对象编程:b怎么继承a
编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
varobj = parseQueryString(url);
alert(obj.key0) // 输出0
JS关键字与保留字的选择：parent，class，void,main。
ajax属于javascript？

js是语言, ajax是javascript的一种应用, 两者没有比较性.

10.Var a = ‘abc def ghi’,把每三个字中的首字母转为大写。
name = ‘aaa bbb ccc’;
uw=name.replace(/\b\w+\b/g, function(word){
return word.substring(0,1).toUpperCase()+word.substring(1);}
);

11.Ajax的执行过程

12.JSON与XML的区别？优缺点？
　　http://www.cnblogs.com/SanMaoSpace/p/3139186.html

13.写一个tab菜单切换程序
　　http://blog.csdn.net/sx1989827/article/details/3814006

14.写一个点击input能够弹出当前input索引的函数。

15.与=的区别

1、对于string,number等基础类型，和=是有区别的
1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等
2）同类型比较，直接进行“值”比较，两者结果一样

2、对于Array,Object等高级类型，和=是没有区别的
进行“指针地址”比较

3、基础类型与高级类型，和=是有区别的
1）对于==，将高级转化为基础类型，进行“值”比较
2）因为类型不同，===结果为false

http://blog.csdn.net/wxdzxl/article/details/8502119

16.Null与undefined的区别
　　http://www.cnblogs.com/eastday/archive/2010/03/03/1677324.html

17.Js如何实现多重继承
　　http://blog.csdn.net/nengyu/article/details/7591811

18.Eval是啥？谈谈对它的理解

19.事件、IE与火狐的事件机制有什么区别？

20.。。。。

其他：

对bootstrap的理解（高频率）
bootstrap就是从一个原始样本中进行有放回的重复采样，采样大小和原始样本大小相同，采样次数根据计算量而定。从每个重新样的样本中可以计算某个统计量的bootstrap 分布，比如说均值，多个重采样样本的均值构成了原始样本均值的bootstrap分布。在采样完后需要检查待研究统计量的bootstrap分布是不是符合正态分布。此外，统计量的bootstrap标准误等于该统计量bootstrap分布的标准差。
网站性能优化的方法（高频率）

1）将css和js文件放在独立外部文件中引用
2) 使用gzip压缩网页内容
3）将CSS放在页面顶端，JS文件放在页面底端
4）使JS文件内容最小化
5）尽量减少外部脚本的使用，减少DNS查询时间
（文件合并

文件最小化/文件压缩

使用 CDN 托管

缓存的使用（多个域名来提供缓存）

其他）

响应式布局（高频率）
前端由哪些部分组成（高频率）
　　
a、网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

b、网页的表示层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

c、网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

W3C标准是啥
W3C标准是一些列标准的集合！在各个企业的基础上做一定的整合，形成一套标准集，便于推广和使用！根据网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。在具体的XHTML标准（如属性值加引号，不允许单标记，大小写等等比较多）！语法上比，我们目前使用的html标记较为严格！更为具体的信息楼上可以参见百度百科，XHTML等相关术语！也可参见，W3C发布的使用文档！
渐进增强与优雅降级的理解
优雅降级和渐进增强印象中是随着css3流出来的一个概念。由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，所以在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

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

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

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

参考资料：http://stackoverflow.com/questions/2550431/what-is-the-difference-between-progressive-enhancement-and-graceful-degradation

为什么利用多个域名来提供网站资源会更有效？

除了节约cookie带宽的因素，另一个重要因素是节约主域名的连接数，从而提高客户端网络带宽的利用率，优化页面响应。因为老的浏览器（IE6是典型），针对同一个域名只允许同时保持两个HTTP连接。将图片等资源请求分配到其他域名上，避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接（比如ajax请求）。
8. http中的404状态码是什么意思
　　
404:请求的网页不存在或已删除(不排除日后该链接有效的可能性)；
410:请求的网页不存在(永久)；
200:服务器成功返回网页
302:网址临时重定向(跳转
301:网址永久重定向

常用的测试工具、开发工具有哪些？

开发：sumline text 、 VIM 、DW
　　测试：firebug 、 IEtester 、

10.Jpeg、gif、png格式的优缺点，应用场景

jpg高画质（图片）
　　gif 色质单一（图标）
　　png 透明

11.谈谈对前端的理解
　　1、前端主要包括三门技术html、css及javascript(下称js)，其中以js为主为难。
　 2、底层学起，然后框架，然后新技术（h5、css3）

12.你认为做前端最需要的品质

13.你最近看过的文章是什么

14.有没有逛技术网站的习惯？请列举这些网站

w3cfun 、博客园、web开发者

WEB前端开发面试题

猜你喜欢