根据网上众多资料加上自己的理解，特别整理出笔试试题（有空继续更新）供大家和自己学习，共勉！
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都生效
“ ″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“9 ″ 只对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。