根据网上众多资料加上自己的理解,特别整理出笔试试题(有空继续更新)供大家和自己学习,共勉!
1. 对WEB标准以及W3C的理解与认识
答: WEB标准是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布.
a.web标准规范要求,书写标签必须闭合、标签小写、不乱嵌套,可提高搜索机器人对网页内容的搜索几率。
b.建议使用外链css和js脚本,从而达到结构与行为、结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容。
c.样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件, 从而降低维护成本、改版更方便
d..不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性
2. 什么是web语义化?谈谈对它的理解。
答:HTML的每个标签都有其特定含义(语义),Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。
好处:a. 去掉或样式丢失的时候能让页面呈现清晰的结构;
b. 屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页;
c. 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重, 爬虫很大程度上会忽略用于表现的标记,而只注重语义标记;.
d. 便于团队开发和维护。W3C给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。
3. Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
答:指文档类型,此标签可告知浏览器文档使用哪种(HTML 或 XHTML)规范。该标签可声明三种 DTD 类型,分别表示严格版本(../strict.dtd)、过渡版本(../loose.dtd)以及基于框架(../frameset.dtd)的 HTML 文档。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式 呈现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过 渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。XHTML 元素必须被正确地嵌套,闭合,区分大小写,文档必须拥有根元素。
差异:
a.盒模型的高宽包含内边距padding和边框border
在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在IE5.5及以下的浏览器及其他版本的Quirks模式下,IE的宽度和高度还包含了padding和border。
b.可以设置行内元素的高宽
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
c.可设置百分比的高度
在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
d.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:
e.quirk模式下设置图片的padding会失效
f.quirk模式下Table中的字体属性不能继承上层的设置
g.quirk模式下white-space:pre会失效
意义:DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS,如果选择了错误的DOCTYPE,那么页面就将以混杂 模式呈现,其行为就可能会有错误或不可预测。因此,一定要在站点的每个页面上包含形式完整的DOCTYPE声明,并且在使用HTML时选择严格的DTD。
4. CSS选择符有哪些?优先级算法如何计算?内联和important哪个优先级高?
答: css选择器有:类、id、标签、相邻、通配符、属性、后代、子元素、伪类及伪元素选择器。
a 行内样式优先级Specificity值为1,0,0,0,高于外部定义(外部定义指经由<link>或<style>标签定义的规则);
b.!important声明的Specificity值最高;c.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
important优先级高。
优先级的算法:
每个规则对应一个初始"四位数":0、0、0、0
若是 行内选择符,则加1、0、0、0
若是 ID选择符,则加0、1、0、0
若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0
若是 元素选择符/伪元素选择符,则分别加0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高
5.清除浮动的几种方式?各自的优缺点
答:a. 父级div定义height;
• 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题
• 优点:简单,代码少,容易掌握
• 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
b. 结尾处加空div标签clear:both
• 原理:添加一个空div,利用clear:both清除浮动,使后面元素无法补前面元素左或右的空缺,从而让父级div能自动获取到高度;
• 优点:简单,代码少,浏览器支持好,不容易出现怪问题
• 缺点:不利于理解,当页面浮动布局多,就要增加很多空div,代码冗余
c. 父级div定义伪类:after和zoom
• 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
• 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
• 缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
d. 父级div定义overflow:hidden
• 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
• 优点:简单,代码少,浏览器支持好
• 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
e. 父级div定义overflow:auto
• 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
• 优点:简单,代码少,浏览器支持好
• 缺点:内部宽高超过父级div时,会出现滚动条
6. 哪些属性可以继承?
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
所有元素可继承:visibility和cursor。
7. 什么是CSS hack?
由于不同浏览器对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果,为了获得统一的页面效果,针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack。有以下三种表现形式:
a.属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
b.选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
c.IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): <!--[if IE]>IE浏览器显示的内容 <![endif]-->,针对IE6及以下版本: <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
在标准模式中: “-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
8.什么是CSS sprite?使用它有什么好处?
答:CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
优点:a、减少图片的字节;b、减少了网页的http请求,从而大大的提高了页面的性能;
c、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
d、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便
缺点:a、在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
b、CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

分类:

技术点:

相关文章: