前端面试题汇总

DOCTYPE

什么是doctype？

　　doctype即文档类型，浏览器会按照声明的文档类型(规则)来解析文档。

doctype类型有哪些？

　　严格类型：不能使用展示性和弃用的元素(font)，不能使用框架集。

　　过渡类型：可以使用所有的元素和属性，不能使用框架集。

　　框架类型：可以使用所有的元素和属性，也能使用框架集。

严格模式和混淆模式是什么？

　　严格模式是标准模式，浏览器会按照标准规则来解析网页。

　　混淆模式是兼容模式，浏览器会按照向后兼容的规则来解析网页。

如何触发混淆模式？

　　声明正确的doctype能触发标准模式，没声明doctype或错误的声明就会触发混淆模式。

web标准和w3c

web标准是什么？

　　web标准主要包括结构标准(html标准、xhtml标准)、表现标准(css)、行为标准(DOM、ECMAScript)。

什么事w3c？

　　w3c就是万维网联盟，他们的主要工作就是来发展web标准。

html和xhtml的区别

　　html是基于SGML(标准通用置标语言)的应用，比较灵活；xhtml是基于xml(可扩展标记语言)的应用，语法非常严谨。xhtml语法表现：

　　1、标签必须闭合

　　2、标签名和属性名必须小写

　　3、标签必须合理嵌套

　　4、属性值必须用引号

　　5、属性必须有值

　　6、图片必须有alt属性

　　7、文档必须有根元素

　　......

块元素和内联元素

块元素特点？

　　1、独占一行

　　2、高度、行高、内边距、外边距都可控

　　3、宽度默认100%

　　4、可以包含块元素、内联元素

　　div、h1、p、ul、li、table......

内联元素特点？

　　1、能和其他元素处于同一行

　　2、高度、行高、上下内边距不能改变

　　3、宽高由内容撑开

　　a、span、strong、label......

　　4、只能包含内联元素

语义化的html

什么是语义化的html？

　　用合理的html标签以及其特有的属性来格式化文档内容。

语义化的好处？

　　1、去掉样式或样式丢失时html结构依然清晰分明

　　2、有利于SEO建立索引和确定权重

　　3、利于无障碍阅读

　　4、移动设备更完美展示网页，移动设备对css支持较弱

link和@import的区别

　　1、link是html标签除了能引入css还能有其他功能而@import是css规则只能用来引入样式

　　2、link引入的样式在页面加载时就加载而@import引入的样式在页面加载完后才加载

　　3、link没有兼容性而@import在IE5.5-不能使用

　　4、如果用js来控制加入外部css时可以用link而不能用@import

　　5、link引入样式的权重比@import高

　　使用import的注意事项：

　　　　1、必须在样式表头部声明

　　　　2、不能省略后面的分好

常用浏览器及其内核

　　1、IE：trident

　　2、chrome：webkit

　　3、firefox：gecko

　　4、opera：presto/blink

盒子模型

什么是盒子模型？

　　网页中的每个元素由内容、内边距、边框、外边距构成。内容是元素的主体用来显示元素主要信息由width和height构成，内边距是内容和边框之间的补白部分有padding构成，边框在补白外面有border构成，外边距是元素与元素之间的间距有margin构成，他们共同组成了css中元素的盒模型。

标准模式和混淆模式盒模型？

　　标准模式的content只包含content而混淆模式content包含content、padding、border。

IE6常见bug及解决方案

　　1、IE6下，内容会撑开元素设定好的宽高。

　　　　解决方案：对元素的宽高计算准确、元素使用overflow:hidden;

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>IE6-BUG</title>
 6   <style>
 7     .wrap {
 8       width: 200px;
 9       height: 100px;
10       border: 1px solid #000;
11       float: left; /*overflow: hidden*/
12     }
13 
14     .lt {
15       width: 100px;
16       height: 100px;
17       background: red;
18       float: left;
19     }
20 
21     .rt {
22       width: 100px;
23       float: right; /*overflow: hidden*/
24     }
25 
26     .in {
27       width: 110px;
28       height: 110px;
29       background: blue;
30     }
31   </style>
32 </head>
33 <body>
34 <div class="wrap">
35   <div class="lt"></div>
36   <div class="rt">
37     <div class="in"></div>
38   </div>
39 </div>
40 <div class="wrap">在IE6中元素内部的内容会撑开元素的宽高(给元素设置overflow:hidden;或宽高计算精确)</div>
41 </body>
42 </html>

View Code

IE6：

标准：

　　2、在IE6中浮动父元素内有块级子元素，由于块级子元素内容撑开父元素导致父元素也会独占一行。

　　　　解决方案：给子元素添加浮动。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5   <title>无标题文档</title>
 6   <style>
 7     .wrap {
 8       width: 200px;
 9     }
10     .lt {
11       background: red;
12       float: left;
13     }
14     .rt {
15       float: right;
16       background: blue;
17     }
18     h3 {
19       margin: 0;
20       height: 30px;
21       /*float: left;*/
22     }
23   </style>
24 </head>
25 <body>
26 <div class="wrap">
27   <div class="lt">
28     <h3>左侧</h3>
29   </div>
30   <div class="rt">
31     <h3>右侧</h3>
32   </div>
33 </div>
34 </body>
35 </html>

View Code

IE6：

标准：

　　3、3像素bug。当文本或未浮动元素跟在浮动元素后面时他们之间会出现3像素的间距。

　　　　解决方案：如果要通过浮动让两个元素同行，最好都浮动。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5   <title>无标题文档</title>
 6   <style>
 7     .lt {
 8       width: 100px;
 9       height: 100px;
10       background: red;
11       float: left;
12     }
13 
14     .rt {
15       background: blue;
16       /*float: left;*/
17     }
18   </style>
19 </head>
20 <body>
21   <div class="lt"></div>
22   <span class="rt">文本</span>
23 </body>
24 </html>

View Code

IE6：

标准：

　　4、IE6最小高度。在IE6下元素的高度小于19px时，会被当作19px。

　　　　解决方案：给元素设置overflow:hidden;

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5   <title>无标题文档</title>
 6   <style>
 7     .box {
 8       height: 2px;
 9       background: red;
10     }
11   </style>
12 </head>
13 <body>
14 <div class="box"></div>
15 </body>
16 </html>

View Code

IE6：

标准：

　　5、IE6下父级有边框时，子元素的margin值消失。

　　　　解决方案：触发父级的haslayout。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5   <title>无标题文档</title>
 6   <style>
 7     body {
 8       margin: 0;
 9     }
10 
11     .box {
12       background: blue;
13       border: 1px solid #000;
14       /*zoom: 1;*/
15     }
16 
17     .div {
18       width: 100px;
19       height: 100px;
20       background: red;
21       margin: 10px;
22     }
23   </style>
24 </head>
25 <body>
26 <div class="box">
27   <div class="div"></div>
28 </div>
29 </body>
30 </html>

View Code

IE6：

标准：

　　6、IE6下双边距。块级元素有浮动和横向margin值时，横向margin值会放大到两倍。

　　　　解决方案：块级元素display:inline、float和横向margin不要同时出现

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5   <title>无标题文档</title>
 6   <style>
 7     body {
 8       margin: 0;
 9     }
10 
11     .box {
12       width: 100px;
13       height: 100px;
14       background: red;
15       float: left;
16       /*display: inline;*/
17       margin-left: 10px;
18     }
19   </style>
20 </head>
21 <body>
22 <div class="box"></div>
23 </body>
24 </html>

View Code

IE6：

标准：

　　7、IE6、7下li本身没浮动，但是其中的全部浮动后，li下边就会产生间隙。

　　　　解决方案：给li加浮动、给li加vertical-align(推荐)、添加一个不浮动的元素

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5   <title>无标题文档</title>
 6   <style>
 7     ul {
 8       margin: 0;
 9       padding: 0;
10       width: 302px;
11     }
12 
13     li {
14       list-style: none;
15       height: 30px;
16       border: 1px solid #000;
17       /*vertical-align: middle;*/
18     }
19 
20     a {
21       width: 100px;
22       float: left;
23       height: 30px;
24       background: Red;
25     }
26 
27     span {
28       width: 100px;
29       height: 30px;
30       background: blue;
31       float: left;
32     }
33   </style>
34 </head>
35 <body>
36 <ul>
37   <li>
38     <a href="#">a</a>
39     <span>11</span>
40     <b>1</b><!-- 为浮动没有空隙 -->
41   </li>
42   <li>
43     <a href="#">b</a>
44     <span>22</span>
45   </li>
46   <li>
47     <a href="#">c</a>
48     <span>33</span>
49   </li>
50 </ul>
51 </body>
52 </html>

View Code

IE6、7：

标准：

　　8、在IE6、7下，子元素有定位时，父级的overflow包不住子元素。

　　　　解决方案：给父元素添加position:relative

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5   <title>无标题文档</title>
 6   <style>
 7     .box {
 8       width: 200px;
 9       height: 200px;
10       border: 1px solid #000;
11       overflow: auto;
12       /*position: relative;*/
13     }
14 
15     .div {
16       width: 150px;
17       height: 300px;
18       background: yellow;
19       position: relative;
20     }
21   </style>
22 </head>
23 <body>
24 <div class="box">
25   <div class="div"></div>
26 </div>
27 </body>
28 </html>

View Code

IE6、7：

标准：

　　9、IE6、7下输入类型的input(不包括按钮)上下各有1px 的间隙

　　　　解决方案：给input加浮动。

　　10、IE6、7下输入类型的input输入文字时，背景图片会跟着一起移动。

　　　　解决方案：将背景给父级。

　　11、IE6、7下输入类型的input设置border:none不起作用

　　　　解决方案：给input设置一个背景

　　12、IE6不支持png

　　　　解决方案：js插件(推荐)、原生滤镜

　　13、IE6背景闪缩，设置hover等的样式即使用雪碧图也会出现闪烁。因为IE6下默认不开启背景图缓存。

　　　　解决方案：添加js代码document.execCommand("BackgroundImageCache",false,true);

　　14、z-index设置不起作用。

　　　　解决方案：给设置z-index的父级设置z-index，甚至要给父级加上position:relative

　　......

img图片

img标签的title、alt属性的区别？

　　title是对图片的描述而alt是当图片不存在时的替代文本

　　SEO对图片含义的判断通过alt

　　标准浏览器鼠标滑过图片title的内容会显示而alt的内容不会显示

样式重置

为什么要进行样式重置？

　　html标签在浏览器中都有自己的默认样式，并且不同浏览器的默认样式不完全一样，在我们编写代码时就会带来很多麻烦，因此我们事先就对浏览器的默认样式进行重置。

css精灵

什么是css精灵？

　　将页面中涉及到的所有零星的图片合并到一张大图中来提高页面性能。

css精灵原理？

　　将网页中零星的背景图片整合到一张图片中，再通过css的background-position来进行定位。

优点？

　　1、减少http请求(浏览器加载200k以下的图片速度都差不多)

　　2、减少图片字节(多张小图的字节和常常大于合在)

　　3、减少图片命名

　　4、更换页面风格比较方便，在这张图上修改就可以修改很多地方

缺点？

　　1、图片合并比较麻烦，还可能出现背景断裂

　　2、开发比较麻烦，需要精确计算background-position

　　3、维护比较麻烦，修改小部分可能会导致整张图片的修改