web前端面试问题.doc

Web前端工程师应该掌握的十大内容一、css的优先级 在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。简单说来，CSS是层叠样式表(Cascading Style Sheets)的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过程中我们经常需要用到。我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制作者的工作负担，从而减轻制作及后期维护的代价。其实现在还来讲CSS是什么，CSS有什么作用完全是多余的，相信从事网页制作的朋友都已经或多或少的接触过了。言归正传，开始进入今天的话题。一、什么是CSS优先级?所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。二、CSS优先级规则既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：1、统计选择符中的ID属性个数。2、统计选择符中的CLASS属性个数。3、统计选择符中的HTML标记名个数。最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。例如：1、每个ID选择符(#someid)，加 0,1,0,0。2、每个class选择符(.someclass)、每个属性选择符(形如attr=value等)、每个伪类(形如:hover等)加0,0,1,0。3、每个元素或伪元素(:firstchild)等，加0,0,0,1。4、其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。三、特性分类的选择符列表通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0(后面会讲到)。按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。优先级问题其实就是一个冲突解决的问题，当同一个元素(内容)被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。说到这里，我们不得不说一下CSS的继承性。四、CSS的继承性4.1 继承的表现继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。很显然，这段文字都继承了由body color:#f00;样式定义的颜色。这也就是为什么说继承性是CSS的一部分。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。4.2 继承的局限性继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。五、附加说明1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如blah的样式，而外部定义指经由或 -1) var text = document.getElementById(“text”).innerText;elsevar text = document.getElementById(“text”).textContent;用来获取浏览器的名称，第一句话的意思就是当获取到的浏览器的名称中带有Explorer。 涉及到indexof用法 strObj.indexOf(subString, startIndex) 参数 strObj 必选项。String 对象或文字。 subString 必选项。要在 String 对象中查找的子字符串。 starIndex 可选项。该整数值指出在 String 对象内开始查找的索引。如果省略，则从字符串的开始处查找。 indexOf 方法返回一个整数值，指出 String 对象内子字符串的开始位置。如果没有找到子字符串，则返回 -1。四、常见的浏览器有几种？如何来解决浏览器不兼容的问题。（列举10例）。常见的浏览器：IE 火狐 麦拓 傲游 腾讯TT Mozilla。一、Comments 区别IE和w3c的方法.hack width:600px; /* FF */*width:700px; /* IE */二、区别 IE5.5、IE6、IE7、w3c的方法.qqbackground:#f00; /* w3c*/*background:#00f!important; /* IE7 */_background:#0f0; /* IE6 */_background /*/:#ccc /* IE5.5 */ 三、针对Opera、Safari 、Chrome.qq background: #000; /* IE FF */ media all and (min-width:0px).qq background: #000; /* Opera、Safari 、Chrome */四、实现文本自动换行1.IE中解决方法word-wrap:break-word;word-break:break-all;注：在要换行的内容相应的单元格或者DIV里加入，如：或2.FireFox中解决方法（脚本）：function toBreakWord(intLen, id)var obj=document.getElementById(id);var strContent=obj.innerHTML;var strTemp=”;while(strContent.lengthintLen)strTemp+=strContent.substr(0,intLen)+”;strContent=strContent.substr(intLen,strContent.length);strTemp+= strContent;obj.innerHTML=strTemp;注：以上脚本放在前面。调用时如下写法：?同个页面单处调用：这里是要应用换行的内容toBreakWord(60, “content”);?同个页面多处调用：这里是要应用换行的内容toBreakWord(60, “content”);这里是要应用换行的内容toBreakWord(60, “content2);注：把应用的JS写在后面，其中60表示一行要显示多少字字符，注意多个调用时ID的相应变化，不能同一个ID名称，应用上面的方法后IE也会是按设定的字符数换行，但是IE里面支持自动换行，所以只要判断一下是否为IE，如果不是IE就不要输出上面的。toBreakWord(60, “content”);这段JS，如果不是就要输出。五、!important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)CSS代码： #wrapper width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ (1)IE6/IE77对FireFox*+html 与 *html 是IE特有的标签, firefox 暂不支持。而*+html 又为 IE7特有标签.CSS代码： #wrapper width: 120px; /* FireFox */ *html #wrapper width: 80px; /* ie6 fixed */ *+html #wrapper width: 60px; /* ie7 fixed, 注意顺序 */ 注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：XML/HTML代码: 六、float 闭合将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可。CSS代码 /* Clear Fix */ .clearfix:after content:“.”; display:block; height:0; clear:both; visibility:hidden; .clearfix display:inline-block; /* Hide from IE Mac */ .clearfix display:block; /* End hide from IE Mac */ /* end of clearfix */ 七、其他兼容技巧1.FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)2.居中问题.?垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)?水平居中. margin: 0 auto;(当然不是万能)3.给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航)4.FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在IE下 margin加倍等问题.5.ul 标签在 FF 下面默认有 list-style 和 padding。最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden。以达到高度自适应.7.关于手形光标使用 cursor: pointer，而hand 只适用于 IE。CSS代码/* FF */ .submitbutton float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px; /* IE6 */ *html .submitbutton margin-top: 21px; /* IE7 */ *+html .submitbutton margin-top: 21px; 八、控制网页背景在IE和Firefox中显示不同颜色。虽然实际网页很少这样制作，但这是体验CSS Hack控制能力的一个简单明了的好例子。注： ?IE6可识别*，但无法识别!important ?IE7可识别*，也可识别!important ?Firefox无法识别*，但可识别!important 注： ?IE6可识别*和下划线”_” ?IE7可识别*，无法识别下划线”_” ?Firefox无法识别*或下划线”_” 九、控制网页页面宽度。使网页在IE中宽度为400px，在Firefox中宽度为700px 注： ?IE可识别”+” ?Firefox无法识别”+” 3.控制网页页面高度。使网页在IE6中高度为50px，在IE7或IE6中高度为100px，在Firefox中高度为300px 注：?IE6可识别下划线”_”?IE6和IE7可识别*?IE7无法识别下划线”_”?Firefox无法识别”*或下划线”_” ?IE的if条件Hack 十、IE的if条件Hack可以让IE区别于其它浏览器和IE个版本之间的浏览器，它利用这样的语法让IE浏览器对其进行解析，属于IE浏览器专有。 ? Only IE 所有的IE可识别? Only IE 5.0 只有IE5.0可以识别? Only IE 5.0 IE5.0包换IE5.5都可以识别? Only IE 6 仅IE6可识别? Only IE 6 IE6以及IE6以下的IE5.x都可识别? Only IE 7 仅IE7可识别说明 :?gt: greater than，选择条件版本以上版本，不包含条件版本?lt: less than，选择条件版本以下版本，不包含条件版本?gte: greater than or equal，选择条件版本以上版本，包含条件版本?lte : less than or equal，选择条件版本以下版本，包含条件版本?!: (选择条件版本以外所有版本，无论高低)_代码 ：可以像这样为IE7配置一个专用CSS文件!-if IE 7.one font-size:12px;也可以像这样直接输入一行CSS代码。针对不同版本的IE CSS Hack.font color:black; -所有浏览器都会显示为黑色color: red9; -IE6、IE7、IE8会显示红色 *color: blue; -IE6、IE7会变为蓝色_color: green; -IE6会变为绿色十一、各浏览器的独有特性：?select/*IE5不识别*/ display:none;仅IE5不识别?select display /*IE6不识别*/:none; 仅IE6不识别?select/*/ display /*IE6,IE5不识别*/:none; 仅IE6与IE5不识别?*+html select 仅IE7与IE5.0可以识别?*+html select . !important;仅IE7可以识别?* html select html/*/ body select _property . IE6及IE6以下版本可以识别?* select IE8以下IE浏览器都可以识别?property !important; IE7、IE8可以识别该规则，屏蔽IE浏览器（也就是IE下不显示）?*:lang(zh) select font:12px !important; 仅FF 可见?select:empty font:12px !important;MAC上safari浏览器独有的。_十二、只有Opera识别针对Opera浏览器做单独的设定。以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。media tty icontent:;/* */ import ie5win.css; /*;/* */ IE5.x的过滤器，只有IE5.x可见/*/*/import ie5mac.css;/*/ 十三、 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。 现在写一个CSS可以这样： #1 color: #333; /* Moz */ * html #1 color: #666; /* IE6 */ *+html #1 color: #999; /* IE7 */ 那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。十四、css布局中的居中问题 主要的样式定义如下：body TEXT-ALIGN: center;#center MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 说明： 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div， 只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。十五、盒模型不同解释.#box width:600px; /for ie6.0- width:500px; /for ff+ie6.0#box width:600px!important /for ff width:600px; /for ff+ie6.0 width /*/:500px; /for ie6.0- 十六、浮动ie产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px;/这种情况之下IE会产生200px的距离 display:inline; /使浮动忽略 这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,.不可控制(内嵌元素);#boxdisplay:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效果 diplay:table;十七、IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;十八、页面的最小宽度 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类：然后CSS这样设计：#container min-width: 600px; width:expression(document.body.clientWidth 600? 600px: auto ); 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。十九、清除浮动.hackbox display:table; /将对象作为块元素级的表格显示或者.hackbox clear:both;或者加入:after（伪对象）设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的.#box:after content: .; display: block; height: 0; clear: both; visibility: hidden; 二十、DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#box float:left; width:800px;#left float:left; width:50%;#right width:50%;*html#left margin-right:-3px; /这句是关键HTML代码 二十一、属性选择器(这个不能算是兼容,是隐藏css的一个bug)piddivid这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如pid中,所有p标签中有id的都是同样式的。二十二、IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。二十三、高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例： p对象中的内容 CSS：#box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; 解决方法：在P对象上下各加2个空的div对象CSS代码：.1height:0px;overflow:hidden;或者为DIV加上border属性。五、web标准、xhtml、Dom 解释。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。（1）XMLXML是The Extensible Markup Language(可扩展标识语言)的简写 。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。 （2）XHTMLXHTML是The Extensible HyperText Markup Language可扩展超文本标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 2. 表现标准语言CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 3.行为标准（1）DOMDOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 (2) ECMAScriptECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262六、web语义化阐述。随着WEB标准在国内的不断普及，结构表现行为分离、模块化、语义化、优雅退化等概念也成为考核一名前端人员对WEB标准理解的重要条目，其中，由于SEO背后的商业价值影响，“语义化”得到了突出的重视，作为一名刚入门的前端工作者，我也曾单纯地认为，“语义化”便是运用最有利搜索引擎权重的标签组织(x)HTML结构的方法。翻看了不少前端书籍和不少前辈的文章，我才开始认识到自己意识的浅薄，慢慢领悟“语义化”的价值。以下内容仅是个人在日常实践中的总结，集合了几个前辈的观点，站在巨人的肩膀之上，以求看得更远。什么是“语义化”（Semantic）“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。具体而言，借用BI论坛网友通俗的解释，“语义化意思就是不要把你女朋友当做一般的朋友看待”，下面是粗浅的XML形式实例：然而，通过CSS控制，我们很容易就能将“女朋友”展示地跟“朋友”一样，只关注表现层的话，标签视乎只是一个“钩子（hook）”，提供给CSS和JS做处理，那为什么我们还要强调“语义化”呢，下面会详细谈到。语义化的意义1.搜索引擎对于搜索引擎的优化，很多前辈都已经做了丰富的解释，关于Hx的权重，隐藏文本等等，在此便不再班门弄斧，前段时间，一款名为Wolfram（/）的搜索引擎引起了注意，我们知道，Google会根据对每个网站的PR值排序搜索结果，其他搜索引擎同样有自己独立的算法，而Wolfram则宣称是在“理解”用户输入内容的前提下作出判断，当输入“who is adrian”时，Wolfram给了我这样的反馈，虽然结果并不怎么精确。联系到前端的工作，我们所推崇的“语义化”不就是让计算机读懂我们的内容吗？像这样一个简单的例子WWF，计算机便能明白WWF值得是World Wildlife Fund，而不是World Water Forum，让计算机完全读懂我们的内容是不现实的，纵使像Wolfram这样搜索引擎也许只是昙花一现，但其所追寻的愿景，Making the worlds knowledge computable确值得我们追求。2.用户体验先举一个例子，下面是当当网上的用户注册表（/Register.aspx），截取其中的一部分XHTML结构。我们来实验一下将其中的设置昵称：改为设置昵称：会产生什么变化。当鼠标点击“设置昵称”时，会自动使ID名为“txtNickName”的文本输入框获得焦点，label标签本身的定义便是向控件定义标注（标记）（/tags/tag_label.asp），各主流浏览器对labe的支持也是基本一致的，浏览器的表单控件本身就是非常成熟的交互控件，经CCS森林群里某大侠测试，label标签对声控操作也是具有非常良好的体验。同样是当当网，首页上的产品列表，还是其中的一小块XHTML代码截取的是价格部分的代码，暂且不论class的命名，我们来实验一下如果将￥94.00 改成￥94.00 ￥46.00，视觉上是没有任何变化的，但当我们裸奔一下页面。结果就显然易见了，作为前端工作者，我们也需要考虑到用户的网速可能过慢（也许他正在用迅雷BT呢）导致无法加载CSS的情况，还有手机用户的情况，选择合适的标签成本很低，只要补充点HTML的基础知识就可以了，另外date属性和cite属性都是非常有用的，试下把内容拷进WORD 2007中。同样还有abbr标签和img标签的alt属性对于屏幕阅读器的重要性，因条件不允许，所以无法亲身体验，在岸的另一边都已经有Section 508这样的东西保护残疾人不被gov网站鄙视了。3.开发效率富含语义的网页结构对前期开发和后期修补bug都有显著作用，具体而言，像下面一段简单的产品列表代码。通过“语义化”的标签，丰富了产品列表内的“钩子（hook）”，通过在父层添加id和class命名，便能控制产品列表内的全局表现，对于样式的修改，在理想状态下能避免通过后台开发人员改变网页结构的情况，节省人力成本，但回归现实情况，面对产品和老板的各种需求，想完全通过只修改CSS便能改变样式还是不现实的，面对大大小小的需求和bug，最好的方式还是在前期开发阶段为页面合理地预留“钩子”，方便后期修改使用，此时丰富的语义标签就显得相当实用了。对团队协作而言，充满语义的ID、Class命名能让团队里的所有人员对结构一目了然，试想一个class为red的标签因为需求的改变而换成蓝色，就能理解为什么要语义命名了。在过去对栅格化和框架的讨论中，引出了关于命名规范思考，以下只是对命名方式的讨论，并不包含其他因素的影响，最近接触到一套完善的布局规范，我想，大部分人刚接触时，都跟我一样，对这种命名感觉到头晕“area_01” “layout_01”等，因为从来没有经历过像现在团队所接手项目的庞大规模，所以说不准这种方式到底是否合适，但有一方面是可以肯定的，这确实是增加了新人的学习成本，而对于未来的开发，我认为这种方式也是可取的，毕竟从长远看，它目的也旨意为了提高团队中的开发效率和减少冲突，我想，像YUI 、Blueprint、960 Grid System也是这样应运而生的吧，这只是个人的臆想，希望未来能得到佐证。4. 行业标准一千个人有一千个哈姆雷特，同样，一千个前端也能写出一千个表现一致但结构不同的页面，这正是页面重构中的现状，通过CSS我们能随意地摆弄页面的所有元素，但最基本的HTML结构却鲜有人关注，一方面原因是HTML标签语义上的不足， HTML5新增的标签在一定程度上解决了这部分问题，而进一步的原因，我想，还是前端工作者对HTML基础的漠视，像鬼哥所说的，“外行看门道，内行看热闹”，“如果你想在这个行业内有所