网上总结的前端面试题-1

[HTML && CSS]

1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?Doctype声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪 种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

当浏 览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如 Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。

浏览器根据DOCTYPE是否 存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过 渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

2.行内元素有哪些?块级元素有哪些?CSS的盒模型?

行内元素有：a b span I b em img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

盒模型：margin border padding width

3.CSS引入的方式有哪些? link和@import的区别是?使用 LINK标签将样式规则写在.css的样式文件中，再以标签引入。

使用@import引入跟link方法很像，但必须放在… 中


<!–@import url(css/example.css);–>

使用STYLE标签将样式规则写在…标签之中。

<!–
body {color: #666;background: #f0f0f0;font-size: 12px;}
td,p {color:#c00;font-size: 12px;}
–>

使用STYLE属性将STYLE属性直接加在个别的元件标签里，使用标记引入样式cnwebshow.com 

两者区别：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

main.css

———————-

@import “sub1.css”;

@import “sub2.css”;

这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。


4. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?l 通配选择符* { sRules }

l 类型选择符E { sRules }
td { font-size:14px; width:120px; }

l 属性选择符
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
h[title] { color: blue; }/* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }

l 包含选择符E1 E2 { sRules }
table td { font-size:14px; }

l 子对象选择符E1 > E2 { sRules }
div ul>li p { font-size:14px; }

l ID选择符 #ID { sRules }

l 类选择符E.className { sRules }

l 选择符分组
E1 , E2 , E3 { sRules }

l 伪类及伪对象选择符
E : Pseudo-Classes { sRules }
( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]
E : Pseudo-Elements { sRules }
( Pseudo-Elements )[:first-letter :first-line :before :after]可以继承的有：font-size font-family color

不可继承的一般有：border padding margin background-color width height等
============================

关于CSS specificity

CSS 的specificity 特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。


在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表：


规则：

1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。

如：sjweb

外部定义指经由或标签定义的规则；

2.!important声明的Specificity值最高；

3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；

4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。

算法：

当遇到多个选择符同时出现时候

按选择符得到的Specificity值逐位相加，

{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}

就得到最终计算得的specificity，

然后在比较取舍时按照从左到右的顺序逐位比较。


实例分析：

1.div { font-size:12px;}

分析：

1个元素{ div}，Specificity值为0,0,0,1


2.body div p{color: green;}

分析：

3个元素{ body div p }，Specificity值为0,0,0,3


3.div .sjweb{ font-size:12px;}

分析：

1个元素{ div }，Specificity值为0,0,0,1

1个类选择符{.sjweb}，Specificity值为0,0,1, 0

最终：Specificity值为 0,0,1,1


4.Div # sjweb { font-size:12px;}

分析：

1个元素{ div }，Specificity值为0,0,0,1

1个类选择符{.sjweb}，Specificity值为0,1,0, 0

最终：Specificity值为 0,1,0,1


5.html > body div [id=”totals”] ul li > p {color:red;}

分析：

6个元素{ html body div ul li p} Specificity值为0,0,0,6

1个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0

2个其他选择符{ > > } Specificity值为0,0,0,0

最终：Specificity值为 0,0,1,6


!important 的优先级最高使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。

5.前端页面由哪三层构成，分别是什么?作用是什么?

网页分成三个层次，即：结构层、表示层、行为层。

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

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

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

 

6.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

 

7. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?

IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT
非IE内核浏览器：firefox opera safari chrome
1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。
2. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。
3. ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
4. 还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
5. 浮动的清除，ff下不清除浮动是不行的。
6. mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。

 

8.解释下 CSS sprites，以及你要如何在页面或网站中实现它。　

CSS sprites其实就通过将多个图片融合到一副图里面，然后通过CSS的技术布局到页面上。这样做的好处是，减少图片数量，将会减少http的请求，提升网站性能。

1）在photoshop新建背景透明的画板，将小图片依次摆放在画板中，调整小图片为适当大小。
2）通过标尺记录图片的横坐标纵坐标。
3）编写css代码background:url(….) no-repeat x-offset y-offset;同时设定元素固定高度和宽度，overflow:hidden

 

9.你最喜欢的图片替换方法是什么，你如何选择使用。

不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。
于是，出现了通过CSS来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。
Fahrner Image Replacement (FIR)
Phark 的方法
Gilder/Levin 的方法 (推荐)

Fahrner Image Replacement (FIR)     这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：

<h2><span>Hello World</span></h2> 

h2 { background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; } 

span { display: none; }

代码非常明白：先将图片应用在 h2 的背景中，然后将 span 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。

Phark 的方法
<h2>Hello World</h2> 

h2{text-indent:-5000px;background:url(hello_world.gif) no-repeat; width: 150px;height:35px; }
代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。

 
Gilder/Levin 的方法
<h2><span></span>Hello World </h2> 

h2 { width: 150px;height: 35px; position: relative; } 

h2 span { background: url(hello_world.gif) no-repeat; position: absolute; width: 100%; height: 100%; }

首 先，将h2的 position 设为 relative ，这样将使h2里面的元素定位以h2为参照，然后将 span元素绝对定位，撑满整个h2区域，同时将背景图应用在 span标签里面；

这种方法的原理是将 span标签覆盖在文字内容上面，一旦 span里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。

 

10.讨论CSS hacks，条件引用或者其他。

hacks　
_width针对于ie6。

*width,+width针对于ie6,7。
color: red\9;/*IE8以及以下版本浏览器*/（但是测试可以兼容到ie10。
*+html与*html是IE特有的标签, firefox暂不支持.而*+html又为IE7特有标签（但是测试*html兼容ie6-10。*+兼容ie7-10）。
!important 在IE中会被忽视，ie6,7,8不识别，ie9+（包括ie9）是识别的。

条件引用
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

<!--[if IE]> 所有的IE可识别 <![endif]-->

<!--[if IE 6]> 仅IE6可识别 <![endif]-->

<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

<!--[if IE 7]> 仅IE7可识别 <![endif]-->

<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

<!--[if IE 8]> 仅IE8可识别 <![endif]-->

<!--[if IE 9]> 仅IE9可识别 <![endif]-->

 
11.如何为有功能限制的浏览器提供网页？

 

1）对于那些可以手动开启的功能，可以在页面上增设“用户使用指导”或“帮助手册”，提示用户如何开启相关的功能。（如果你不介意，还可以完全禁掉页面，强制用户使用固定设备，升级版本；哈哈，当年我做的BMS就是这样做）
例如，针对使用IE浏览器自带的功能可以限制对网页的浏览，比如activeX或者脚本，我们检测到它不可用时，提示用户启用的操作方式。

2）尽量避免当js或者css3失效时，页面不可用的动画效果。
例如，http://www.rippletec.net/网 站为了营造一种当页面加载完毕，不同模块滚动到固定位置的绚丽动画效果。应该避免类似的效果，一方面产生繁琐的重绘过程，会消耗浏览器内存，对性能一般的 设备可能因为压力过大，卡机或者无法渲染；另外一方面是网站当网站的js不可用时，模块滚动到固定位置的事件没有被触发，用户看到的将会是动画产生之前， 最原始的页面状态，无法经行下一步操作。

3）应该为绑定异步的元素，设置herf属性。
例 如，用户要执行查询某书本详细信息操作，点击“查询”按钮，通过js触发查询该条目的事件，然后采用jQuery异步执行操作，在页面固定位置加载相关书 本的详细内容。$(“.delete”).click(function(){$.ajax(//..)})，但是一旦js不可用，或者jQuery无发 加载的时候，用户将无法顺利执行操作。因此，可以为该操作设置herf属性，当$.ajax()可用时阻止直接跳转，而使用异步；当$.ajax()不可 用时，直接跳转到详细信息的页面。

4）避免依赖脚本验证表单。服务器的表单验证不可避免。

5）部分浏览器不支持html5新标签，因此，可以用js创建相关标签，然后给它们的css赋予相关属性。

6） 因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。

使用Javascript：
var myLinks = document.getElementsByTagName('a');

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

myLinks[i].addEventListener(’touchstart’,function(){

this.className=“hover”;},false);　　myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);}
然后用CSS增加hover效果：
a:hover, a.hover { /* 你的hover效果 */ }