之前发的一篇博客里没有附上答案，现在有空整理了下发出来，希望能帮助到正在找工作的你，还是那句话：技术只有自己真正理解了才是自己的东西，共勉。

Web前端笔试题

Html+css

1.对WEB标准以及w3c的理解与认识。

标签闭合，标签小写，不乱嵌套：提高搜索机器人的搜索几率；

使用外联的css和js，结构行为表现的分离：文件下载与页面加载速度更快，内容能被更广泛的设备所访问；

更少的代码和组件：容易维护，改版方便，不需要变动页面内容，提供打印版本而不需要复制内容，提高网站的易用性。

2.Xhtml和html有什么区别。

Html（超文本标记语言）是标准通用标记语言下的一个应用，也是一种规范，一种标准。

Xhtml（可扩展超文本标记语言）是一种置标语言，表现方式与html类似，不过语法上更加严格，主要不同：

1，所有元素必须被正确嵌套，

2，所有标记必须闭合，

3，标签名，属性名必须小写字母，

4，所有的属性必须用“”括起来，

5，所有非标签一部分的><&都必须以编码形式，

6，所有属性必须要有值，

7，注释中不要有--

8，图片必须要有说明文字

3.css的引入方式有哪些？link和@import的区别是？

四种：内联，内嵌，外链，导入

区别：

1，link属于xhtml标签，@import完全是css提供的一种方式，link除了加载css还可以定义rss，定义rel属性等，@import只能加载css。

2，加载顺序差别：link引用的css是同时被加载的，@import引用的css会等到页面全部被下载完才会再被加载。

3，兼容性差别，@import是css2.1提出，ie5以上才支持，link没有兼容问题。

4，使用dom控制样式的差别，当用javascript去控制样式的时候，只能使用link，@import不是dom能控制的。

5，@import可以在css中再次引入其他样式表。

4.css选择符有哪些？哪些属性可以继承？优先级如何计算？内联和important哪个优先级高？

标签选择符，类选择符，id选择符

继承的不如指定的，id>class>Tagname

Important优先级高

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

结构层：html

由html或者xhtml负责创建，运用标签对网页内容的含义作出描述。

表示层：css

由css负责创建，对如何显示有关内容做出回答。

行为层：javascript

由javascript负责创建，负责回答应该如何对事件作出反应。

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

选择器，属性，属性值

7.你曾经在哪些浏览器测试过兼容？这些浏览器的内核分别是什么？

Ie（ie内核），火狐（Gecko），谷歌（webkit），opera（presto）

8.<img>标签上title与alt属性的区别是什么？

Alt是在你的图片因为某种原因不能加载的时候在页面显示的提示信息，它会直接输出在原本加载图片的地方，title是在鼠标悬停在图片上的显示的小提示，鼠标离开就没了，绝大数html标签都支持title。

9.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的  使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px  

3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 ！Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

10.描述css reset的作用和用途。

Css reset重置浏览器的默认css样式，浏览器种类不同，默认样式不一样，通过使用css reset重置，让他们统一，方便开发。

11.你如何对网站的文件和资源进行优化？期待的解决方案包括:

1，尽可能减少http请求数（文件合并）

2，使用CDN（内容分发网络）

3，添加Expire/Cache-Control头

4，启用Gzip压缩

5，css放在页面最上面

6，scrip放在页面最下面

7，避免在css中使用Expressions

8，把js和css放在外部文件中

9，减少dns查询

10，压缩javascript和css

11，避免重定向

12，移除重复脚本

13，配置实体标签

14，使用ajax缓存

12.什么是语义化的html？

根据内容的结构化（内容语义化），选择合式的标签（代码语义化），便于开发者的阅读和写出更加优雅的代码的同时让浏览器的爬虫和机器更好地解析。

13.清除浮动有几种方式？各自的优缺点是？

1,父级定义height（优点：代码少，简单易掌握；缺点：只适合固定高度元素，无法高度自适应）

2，结尾处使用空标签清除浮动：Clear:both（优点：理论上能清除所有标签的浮动，简单代码少浏览器支持好；缺点：增加了无意义的标签）

3，父级定义伪类after和zoom（优点：浏览器支持好；缺点：代码多，两句代码结合使用才能让主流浏览器都支持）

4，父级定义overflow:hidden（优点：代码少，简单，浏览器支持好；缺点：必须定义width或者zoom，同时不能定义height，不能和position配合使用）

5，父级定义overflow:auto（优点：代码少，简单，浏览器支持好；缺点：必须定义width或者zoom，同时不能定义height，内部元素高度超过父级会出现滚动条）

还有，父级一起浮动，父级定义display:table，结尾加br的clear：both等

14.浏览器标准模式和怪异模式之间的区别是什么？

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

标准模式中

IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明

15.解释下 CSS sprites，以及你要如何在页面或网站中使用它

是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

页面icon很多的情况下使用合适。

16.讨论CSS hacks，条件引用或者其他?

各个浏览器都认识，这里给firefox用；

 \9所有的ie浏览器可识别；

  \0 是留给ie8的

 + + ie7定了；

 _ _专门留给神奇的ie6；

 :root #test { } :root是给ie9的，

 @media all and (min-width:0px){ #test {} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {} }最后这个是浏览器新贵chrome和safari的。

<!--[if IE 6]><link href="ie6.css" />< ![endif]-->这种注释的方式只有IE浏览器支持，其他浏览器只会把它当做html注释，不起任何作用。一般使用JavaScript或者服务器端程序判断User Agent。

17.解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?

从后往前判断。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

18.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

19.CSS字母大写?

text-transform 值：

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：也许你需要点实用的

关键词：