前端面试题含答案

前端开发面试知识点大纲：

HTML&CSS ：

对Web 标准的理解、浏览器内核差异、兼容性、hack 、CSS 基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应

JavaScript ：

数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、

异步装载回调、模板引擎、Nodejs 、JSON 、ajax 等。

其他： HTTP 、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO 、UED 、架构、职业生涯

作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：

1、DOM 结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、DOM 操作 ——如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件，以及IE 和标准DOM 事件模型之间存在的差别。

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET 请求、怎样检测错误。

5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

7、块级元素与行内元素 —— 怎么用CSS 控制它们、以及如何合理的使用它们

8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 9、HTML 与XHTML ——二者有什么区别，你觉得应该使用哪一个并说出理由。 10、JSON —— 作用、用途、设计结构。

产品部-前端面试题-答案

产品部 Beijing

HTML

一、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

（2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

二、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素：

鲜为人知的是： 三、link 和@import 的区别是？

（1）link属于XHTML标签，而@import是CSS提供的;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

（4）link方式的样式的权重高于@import的权重.

四、浏览器的内核分别是什么?

* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

Web前端开发笔试题集锦(已读)

Web前端开发笔试题集锦 HTML/CSS篇 1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2，截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var efg = str.substr(str.indexOf("efg"), 3); alert(efg); } 3，判断一个字符串中出现次数最多的字符，统计这个次数 //将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } /*遍历这个hash table，获取value最大的key和value*/ var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj[key]) { max = obj[key]; max_key = key; } } alert("max:"+max+" max_key:"+max_key); 4，IE与FF脚本兼容性问题 (1) window.event： 表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象 (2) 获取事件源

前端面试题大全(html篇)

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。最主要的不同： (1)XHTML元素必须被正确地嵌套 (2)XHTML元素必须被关闭 (3)XHTML标签名必须用小写字母 (4)XHTML文档必须拥有根元素 2.什么是语义化的HTML html5的语义化是指用正确的标签包含正确的容，比如nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ (2)html语义化就是让页面的容结构化，便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重，利于SEO。 (4)使阅读源代码的人更容易将分块，便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如：