前端面试题汇总：HTML&CSS必考知识点解析与实战技巧

前端面试题总结 Part 1 HTML&CSS 1. 浏览器分类 4. Box-sizing 常用属性 5. Doctype 功能、标准模式和兼容模式 6. HTML5 为什么只需要写<Doctype html>？

如果浏览器是基于SGML的，则需要引用DTD； H5不是基于它的，HTML4.01是基于它的

Doctype用于规范浏览器行为，H5需要引入它来控制

7、页面导入样式时，使用link和@import有什么区别？语法角度：

链接是一个 XHTML 标签。除了加载CSS之外，还可以用来定义RSS、定义rel连接属性等；

@import是CSS提供的语法，只能用于加载CSS；

浏览器解析视角

页面加载时，链接会同时加载，@import引用的CSS会等到页面加载完成后再加载（标准浏览器）；

兼容性问题

import是CSS2.1提出的，只能被IE5以上识别，而link是XHTML标签，不存在兼容性问题。

总之，link比@import更好，这决定了它的适应性更广，加载速度更快，兼容性更强。

8.浏览器内核内核分类浏览器内核

铬、Safari

网络工具包

歌剧

急速=>眨眼

FF

壁虎

IE

三叉戟

内核分类

渲染引擎和JS引擎

适用范围：所有网络浏览器、电子邮件客户端以及其他需要编辑和显示网络内容的应用程序都需要内核。

9. html5 与 html4.01

HTML5 不再是 SGML 的子集。主要是增加了图像、定位、存储、多任务等功能。

理解语义标签：使用正确的标签做正确的事情。

语义化：HTML语义使页面内容结构化、更加清晰，更容易被浏览器和搜索引擎解析；有利于SEO：即使没有样式CSS，它也以文档格式显示，易于阅读；

搜索引擎爬虫还依赖 HTML 标记来确定各个关键字的上下文和权重；

离线存储方式 数据源信息卷接口 存储空间独立

曲奇饼

乙+乙

小的

小的

依靠

会话存储

大的

许多

独立的

本地存储

大的

许多

独立的

10.常见浏览器兼容性问题problemdescribehack

png24位图片

iE6 浏览器出现背景

制作成PNG8

边距/填充

不同浏览器显示不同

{边距：0；填充：0；}

IE6 双边距错误

xx

百度

获取属性()

在Firefox下，只能使用getAttribute()来获取自定义属性； IE 也可以工作

通过getAttribute()统一获取自定义属性

偶数对象

IE下有x和y属性，但没有pageX和pageY属性； Firefox 下反之亦然

（有条件评论）缺点是IE浏览器下可能会增加额外的HTTP请求。

铬合金

默认情况下，小于12px的文字在中文界面中会强制以12px显示。

通过添加 CSS 属性 -webkit-text-size-adjust:none;

左心室血流动力学

访问超链接后，将不再出现悬停样式。单击和访问的超链接样式不再具有悬停和活动状态。

更改 CSS 属性的顺序 a:link{}a:visited{}a:hover{}a:active{}

第 2 部分 CSS 1. 盒模型 2. CSS 选择器以及继承和优先级算法、伪类

选择器

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li: nth - child）

继承性

就近原则：相同重量下，以最接近的款式定义为准，加载样式以上次加载定位为准；优先级算法：!important > id > class > tag3。 CSS3 中的新伪类

p:first-of-type 选择属于其父元素的第一个元素

每个元素的

元素。

p:last-of-type 选择属于其父级的最后一个元素

每个元素的

元素。

p:only-of-type 选择属于其父元素的唯一元素

每个元素的

元素。

p:only-child 选择作为其父元素的唯一子元素的每个元素

元素。

p:nth-child(2) 选择属于其父元素的每隔一个子元素

元素。

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

:checked 单选按钮或复选框被选中。

4. 居中显示问题 5. 显示与位置

显示：块|内联块|列表项|无

位置

JavaScript事件代理/事件委托（delegation）

当我们需要给很多元素添加事件时，我们可以给它们的父节点添加事件。

委托给父节点来触发处理函数。这主要是浏览器的事件冒泡机制造成的。

函数（客户端，clientMethod）{返回函数（）{返回clientMethod.apply（客户端，参数）; } } var agentMethod = delegate (客户端, clientMethod);代理方法（）；

简单的例子

var resources = document.querySelector('#resources'), log = document.querySelector('#log'); resources.addEventListener('mouseover', showtarget, false);函数 showtarget(ev) { var target = ev.target ; if (target.tagName === 'A') { log.innerHTML = 'A 链接，带有 href:' + target.href; } if (target.tagName === 'LI') { log.innerHTML = '列表项'; } if (target.tagName === 'UL') { log.innerHTML = '列表本身'; }} //便利文档 .getElementById("parent-list").addEventListener("click", function(e) { if(e.target && e.target.nodeName == "LI") { console.log("列表项 ", e.target.id.replace("post-"), " 被点击！"); } });

这个对象使用场景作为函数调用，this绑定到全局对象，浏览器环境全局对象是window。内部函数的this也绑定到全局对象

（它应该绑定到与其外部函数对应的对象。这是 JavaScript 中的缺陷。用那个替换它。）当用作构造函数时，this 绑定到新创建的对象。用作对象方法时，this 绑定到对象。使用 apply 或 call 调用此函数将显式设置为函数调用的第一个参数。原型继承原则

每个函数都有一个原型对象属性（F.prototype），并且每个函数都可以是一个构造函数。

也就是说，你可以通过new关键字创建任何函数的实例。

原型继承原理：JS中没有类，所有的继承都是基于原型的继承。调用对象的属性或方法

当 时，js引擎会首先搜索对象本身的属性或方法。如果没有，它将在对象的构造函数中搜索。

逐级递归搜索，直到原型链的顶层。

哈希表

哈希表是一种根据键值对直接访问对象在内存中存储位置的数据结构。也就是说，它是

通过函数计算键值并将其映射到表中的某个位置来访问记录，这样可以加快查找速度。这个映射

称为哈希函数，存储记录的数组就是哈希表。

Null 和 undefinedJS 宿主对象和本机对象数组去重

//方法一、遍历数组方法

函数 beUnique(arrs){

var newArr = [];//临时数组

arrs.forEach(函数(arr){

if(newArr.indexOf(arr)==-1){

newArr.push(arr);

});//forEach方便性更好，适合伪数组处理，for循环将伪数组的空元素处理成undefined

返回新的Arr；

//笨方法，排序+比较前后是否相等

函数 beUnique(arrs){

arrs.sort();

var newArr=[];

//forEach||for-in 方便失效

for(var i,i=0;iif(arrs[i+1]==arrs[i]){

newArr.push(arrs[i]);

返回新的Arr；

//ES6语法糖

Array.from(new Set(arr));

//对象键值配对方法

函数unique2（数组）{

var n = {}, r = [], len = array.length, val, 类型;

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

val = 数组[i];

类型 = val 的类型；

如果 (!n[val]) {

n[值] = [类型];

r.push(val);

} else if (n[val].indexOf(type) < 0) {

n[val].push(类型);

r.push(val);

返回 r；

//与call/apply结合使用，效率更高

函数unique1() {

var newArray = [];

this.forEach(函数（索引）{

if (newArray.indexOf(index) == -1) {

newArray.push(索引); } });

返回新数组；

unique1.apply(arr);

//对象键值配对方法

Array.prototype.unique3 = 函数 () {

// 构造一个新数组来存储结果

var newArray = [];

//创建一个空对象

var 对象 = {}; // for循环过程中，每次取出一个元素与对象进行比较

// 如果该元素不重复，则将其存入结果编号中

// 同时将此元素的内容作为对象的属性，并赋值为1，

// 存储在步骤2中创建的对象中

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

// 检查object对象是否包含遍历到的元素的值

if(!object[typeof(this[i]) + this[i]]) {

// 如果不包含，则将对象中存储的元素的值压入结果数组

newArray.push(this[i]);

// 如果不包含，则将object对象中存储的属性名的值设置为1

对象[typeof(this[i]) + this[i]] = 1;

} }

返回新数组；

数组和

var arr=[1,2,3,4];变量总和=0； //forEach arr.forEach(function(item){ sum+=item; }); //map arr.map(function(item){ sum+ =item }); //减少arr.reduce(function(pre,cur){ return pre+cur })

评估

将对应的字符串解析成JS代码并运行；

你应该避免使用eval——它不安全并且非常消耗性能（两次，一次解析成js语句，一次执行）。

从 JSON 字符串转换为 JSON 对象时，可以使用 eval，var obj =eval('('+ str +')')。

DOM 如何添加、删除、移动、复制、创建和查找节点？新的运营商具体是做什么的？

（1）创建一个空对象，this变量引用该对象，同时也继承该函数的原型。

(2)给this引用的对象添加属性和方法。

(3)新创建的对象通过this引用，最后隐式返回this。

你了解 JSON 吗？

JSON（JavaScript 对象表示法）是

轻量级数据交换格式

它基于 JavaScript 的一个子集。数据格式简单，易于读写，占用带宽小。格式：使用键值对，例如：{'age':'12', 'name':'back'}

call() 和 apply() 有什么区别和作用？

apply() 函数有两个参数：第一个参数是上下文，第二个参数是参数数组。

如果上下文为空，则使用全局对象。例如： function.apply(this,[1,2,3]);

call()的第一个参数是上下文，后面是实例传入的参数序列。例如： function.call(this,1,2,3);