WEB面试题.doc
《WEB面试题.doc》由会员分享,可在线阅读,更多相关《WEB面试题.doc(11页珍藏版)》请在咨信网上搜索。
1、HTML & CSS1. Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?Doctype声明位于文档中的最前面的位置,处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如Micros
2、oft 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 spa
3、n I b em img input select strong块级元素有:div ul ol li dl dt dd h1 h2 h3 h4p盒模型:margin border padding width3. CSS引入的方式有哪些? link和import的区别是?1. 使用 LINK标签将样式规则写在.css的样式文件中,再以标签引入。2. 使用import引入跟link方法很像,但必须放在. 中3. 使用STYLE标签将样式规则写在.标签之中。4. 使用STYLE属性将STYLE属性直接加在个别的元件标签里,元件(标签) STYLE=性质(属性)1: 设定值1; 性质(属性)2: 设定
4、值2; .5. 使用标记引入样式两者区别:加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,而import引用的CSS会等到页面全部被下载完再被加载。import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:main.css-import “sub1.css”;import “sub2.css”;这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。4. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和import
5、ant哪个优先级高?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 htitle color: blue; /* 所有具有title属性的h对象 */spanclass=demo color: red; divspeed=fastdorun=no color: red; arel=copyright color:black; l 包含选择符E
6、1 E2 sRules table td font-size:14px; l 子对象选择符E1 E2 sRules div ulli 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 :langE : Pseudo-Ele
7、ments sRules ( Pseudo-Elements ):first-letter :first-line :before :after可以继承的有:font-size font-family color不可继承的一般有:border padding margin background-color width height等=关于CSS specificityCSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左
8、到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。选择符Specificity值列表:规则:1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。如:sjweb外部定义指经由或标签定义的规则;2.!important声明的Specificity值最高;3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。算法:当遇到多个选择符同时出现时
9、候按选择符得到的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,12.body div pcolor: green;分析:3个元素 body div p ,Specificity值为0,0,0,33.div .sjweb font-size:12px;分析:1个元素 div ,Specificity值为
10、0,0,0,11个类选择符.sjweb,Specificity值为0,0,1, 0最终:Specificity值为 0,0,1,14.Div # sjweb font-size:12px;分析:1个元素 div ,Specificity值为0,0,0,11个类选择符.sjweb,Specificity值为0,1,0, 0最终:Specificity值为 0,1,0,15.html body div id=”totals” ul li p color:red;分析:6个元素 html body div ul li p Specificity值为0,0,0,61个属性选择符 id=”totals”
11、 Specificity值为0,0,1,02个其他选择符 Specificity值为0,0,0,0最终:Specificity值为 0,0,1,6!important 的优先级最高使用!important可以改变优先级别为最高,其次是style对象,然后是id class tag ,另外在同级样式按照申明的顺序后出现的样式具有高优先级。5. 前端页面由哪三层构成,分别是什么?作用是什么?网页分成三个层次,即:结构层、表示层、行为层。网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出
12、了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。”网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。6. css的基本语句构成是?选择器属性1:值1;属性2:值2;7. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?IE内核浏览器:360,傲游
13、,搜狗,世界之窗,腾讯TT非IE内核浏览器:firefox opera safari chrome1.就是ie6双倍边距的问题,在使用了float的情况下,不管是向左还是向右都会出现双倍,最简单的解决方法就是用display:inline;加到css里面去。2.文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上
14、我们不能容忍1px 的差异。3. ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。4. 还讨论内容撑破容器问题,横向上的。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。5. 浮动的清除,ff下不清除浮动是不行的。6. mirrormargin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。padding
15、也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。7. 吞吃现象,限于篇幅,我就不展开了。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。8. 注释也能产生bug“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变
16、。解决方案:用“ picRotate start ”方法写注释。9. 里加 float ,这是一个典型的,棘手的兼容问题,希望引起大家正视 ,给li 不同的属性会有不同的解释效果,ff下的解释稍可理解,ie6下的解释会让你摸不着头脑,由于问题的复杂性,将另起一文专门讨论该问题。在ul使用心得一文里有相关成果,却没给出问题解决的过程。10. img下的留白。解决方案:给img设定 display:block。11. 失去line-height。文字,很遗憾,在ie6下单行文字 line-height 效果消失了。,原因是这个inline-block元素和inline元素写在一起了。解决方案:让i
17、mg 和文字都 float起来。12. 链接的hover状态。a:hover imgwidth:300px 我们想让鼠标hover时,链接里包含的图片宽度变化,可惜在ie6下无效,ie7、ff下有效。13. 非链接的hover状态。div:hover 这样的样式ie6是不认的,在ie7、ff下才有效果。14. ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另,ie6支持overflow-x或
18、者overflow-y的特性,ie7、ff不支持。15. ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。16. ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。17. ie6下的bug,内有的情况下,position:relative层下的float层内文字无法选中。18. 终于来了个ff的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 试题
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【a199****6536】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【a199****6536】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。