web前端面试基本知识重点(上)

1、常用那几种浏览器测试？有哪些内核(Layout Engine)?
　　答：
(1) 浏览器：IE，Chrome，FireFox，Safari，Opera。
　　 (2) 内核：Trident，Gecko，Presto，Webkit。

2、 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）
答：
　　(1) 行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
　　块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
　　(2) 兼容性：display:inline-block;*display:inline;*zoom:1;
　　
3、 谈谈浮动和清除浮动，清除浮动有哪些方式？比较好的方式是哪一种？

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。
　 答：
(一)
　　 （1）父级div定义height。
　　 （2）结尾处加空div标签clear:both。
　　 （3）父级div定义伪类:after和zoom。
　　 （4）父级div定义overflow:hidden。
　　 （5）父级div定义overflow:auto。
　　 （6）父级div也浮动，需要定义宽度。
　　 （7）父级div定义display:table。
　　 （8）结尾处加br标签clear:both。
　　 (二) 比较好的是第3种方式，好多网站都这么用。
　　
4、box-sizing常用的属性有哪些？分别有什么作用？
答：
　　(1)box-sizing: content-box|border-box|inherit;
　　(2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5、Doctype作用？标准模式与兼容模式各有什么区别?
　　答：
(1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
(2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

6、HTML5 为什么只需要写 ？
答：
　　HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

7、 页面导入样式时，使用link和@import有什么区别？
　　答：
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
　　（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
　　（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
　引入方式3种：行内添加定义style属性值，页面头部内内嵌调用和外链调用，
区别：
1.link是xhtml标签，除了加载css外，还可以定义RSS等其他事务，@import只能加载CSS
2.link引用CSS时候，页面载入的时候同时加载，@import需要页面网页完全载入后加载
3.link是XHTML标签，没有兼容问题，@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用javascript控制DOM去改变样式，但是@import不支持。

8、介绍一下你对浏览器内核的理解？
　　答：
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
　　渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
　　JS引擎则：解析和执行javascript来实现网页的动态效果。
　　最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
　　
9、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？　　
答：
(一)
　　HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
　　(1)绘画 canvas;
　　(2)用于媒介回放的 video 和 audio 元素;
　　(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
　　(4)sessionStorage 的数据在浏览器关闭后自动删除;
　　(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
　　(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;

(二)
　　IE8/IE7/IE6支持通过document.createElement方法产生的标签，
　　可以利用这一特性让这些浏览器支持HTML5新标签，
　　浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim，

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

   <!--[if lt IE 9]>

   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

   <![endif]-->

如何区分： DOCTYPE声明\新增的结构元素\功能元素

10、简述一下你对HTML语义化的理解？　　
答：
用正确的标签做正确的事情。
　　html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
　　即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
　　搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
　　使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

11、position的值， relative和absolute分别是相对于谁进行定位的？
•
absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
•
•
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
•
•
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
•
•
static 默认值。没有定位，元素出现在正常的流中
•
•
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

12、 什么叫优雅降级和渐进增强？
答：
　　优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
　　渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

13、display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
CSS中link 和@import的区别是？
(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重 高于@import的权重.

14、position:absolute和float属性的异同

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

15、介绍一下box-sizing属性？
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

16、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
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）

17、CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），

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

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

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

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

媒体查询，多栏布局

border-image
CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：
content-box（默认）
布局所占宽度Width：
Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right) + border-left + border-right

布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

18、对BFC规范的理解？
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

19、说说你对语义化的理解？
（1）去掉或者丢失样式的时候能够让页面呈现出清晰的结构

（2）有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

（3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

（4）便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

20、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
（1）<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

21、你知道多少种Doctype文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks

（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

22、HTML与XHTML——二者有什么区别
区别：
（1）所有的标记都必须要有一个相应的结束标记
（2）所有标签的元素和属性的名字都必须使用小写
（3）所有的XML标记都必须合理嵌套
（4）所有的属性必须用引号""括起来
（5）把所有<和&特殊符号用编码表示
（6）给所有属性赋一个值
（7）不要在注释内容中使“–”
（8）图片必须有说明文字

23、常见兼容性问题？
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

#box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入
_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css

  .bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
 _background-color:#1e0bd1;/*IE6识别*/
}

怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发
怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在
可以使用html5推荐的写法：<doctype html>
上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

24、ie各版本和chrome可以并行下载多少个资源
IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个
Firefox，chrome也是6个

25、谈谈你对重构的理解
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化， 在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

1. 表格(table)布局改为DIV+CSS
2. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
3. 对于移动平台的优化
4. 针对于SEO进行优化

深层次的网站重构应该考虑的方面

1. 减少代码间的耦合
2. 让代码保持弹性
3. 严格按规范编写代码
4. 设计可扩展的API
5. 代替旧有的框架、语言(如VB)
6. 增强用户体验
7. 通常来说对于速度的优化也包含在重构中
8. 压缩JS、CSS、image等前端资源(通常是由服务器来解决)
9. 程序的性能优化(如数据读写)
10. 采用CDN来加速资源加载

26、什么样的前端代码是好的
高复用低耦合，这样文件小，好维护，而且好扩展。

27、对web标准以及w3c的理解和认识
答:标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率。使用外链css和js脚本，结构行为表现分离，内容能被更多广泛的设备所访问,更少的代码和组件，容易维护，改版方便，不需要变动页面内容。

28、.Html和xhtml有什么区别?
html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。
最主要的不同:
XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。

29、.严格模式和混杂模式的区分，以及如何触发这2种模式?
严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
混杂模式是一种向后兼容的解析方法。
触发标准模式或者说严格模式很简单，就是Html前申明正确的DTD，触发混杂模式可以在html文档开始不声明DTD，或者在DOCTYPE前加入XML声明

30、.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:br、meta、hr、link、input、img

31、CSS选择符有哪些?优先级算法如何计算?内联和Important哪个优先级高
回答：CSS选择符有类选择符，属性选择符，ID选择符，优先级算法是基于特殊性值进行计算的。分别如下：ID属性 0.1.0.0
类属性选择器，属性选择器，伪类 0.0.1.0 元素选择符，伪元素选择符 0.0.0.1
通配选择器对特殊性没有任何贡献值。
important优先级高

32.前端页面有哪三层构成，分别是什么，作用是什么?
结构层：html 表示层:css 行为层：js
8.页面的哪些浏览器你测试过，分别内核是什么?
IE(IE内核)，火狐(Gecko),谷歌(webkit),opera(presto)
9.img标签上的title和alt属性区别是什么?
alt是当图片不能正常显示的时候，用文字代替
title该属性提供信息

33、GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

34、HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
（1）页面头部像下面一样加入一个manifest的属性；
（2）在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
（3）在离线状态时，操作window.applicationCache进行需求实现。

35、浏览器是怎么对HTML5的离线储存资源进行管理和加载的
在线的情况下，浏览器发现Html头部有manifest属性，它会请求manifest文件，如果是第一次访问APP，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过APP并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。

36、xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：①XHTML 元素必须被正确地嵌套；②XHTML元素必须被关闭；③标签名必须用小写字母；④XHTML 文档必须拥有根元素。

37、css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}

38、写出几种IE6 BUG的解决方法
①双边距BUG float引起的 使用display
②3像素问题 使用float引起的 使用dislpay:inline -3px
③超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
④Ie z-index问题 给父级添加position:relative
⑤Png 透明 使用js代码 改
⑥Min-height 最小高度 ！Important 解决’
⑦select 在ie6下遮盖 使用iframe嵌套
⑧为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

39、标签上title与alt属性的区别是什么?
Alt当图片不显示时用文字代表。Title为该属性提供信息。

40、描述css reset的作用和用途。
Reset重置浏览器的CSS默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。

41、解释css sprites，如何使用。
CSS精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

42、浏览器标准模式和怪异模式之间的区别是什么?
盒子模型，渲染模式的不同；
使用 window.top.document.compatMode 可显示为什么模式。

43、你如何对网站的文件和资源进行优化?期待的解决方案包括：
文件合并、文件最小化/文件压缩、使用CDN托管，缓存的使用。

44、什么是语义化的HTML?
直观的认识标签，对于搜索引擎的抓取有好处。

45、清除浮动的几种方式，各自的优缺点
①使用空标签清除浮动 clear:both（理论上能清除任何标签，增加无意义的标签）；
②使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1用于兼容IE）；
③是用afert伪元素清除浮动(用于非IE浏览器，最好的方法)。