web前端面试题总结（html、css）
1.对 web 标准以及 w3c 的理解与认识？
参考： 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、 结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提 供打印版本而不需要复制内容、提高网站易用性。
2.xhtml 和 html 有什么区别？
参考： html 是一种基本的 web 网页设计语言，xhtml 是一个基于 xml 的置标语言。 最主要的不同： xhtml 元素必须被正确地嵌套。 xhtml 元素必须被关闭。 标签名必须用小写字母。 xhtml 文档必须拥有根元素。
3.doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
参考： 用于声明文档使用那种规范（html/xhtml）一般为 严格 过度 基于框架的 html 文档。 加入 xml 声明可触发，解析方式更改为 ie5.5 拥有 ie5.5 的 bug。
4.描述 css reset 的作用和用途。？
参考： reset 重置浏览器的 css 默认属性 浏览器的品种不同，样式不同，然后重置，让他们统 一。
5.解释 css sprites，如何使用。？
参考： css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
6.你如何对网站的文件和资源进行优化?
参考：解决方案包括：文件合并、文件最小化/文件压缩、使用 cdn 托管、缓存的使用
7.清除浮动的几种方式，各自的优缺点？
参考：1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签） 。 2.使用 overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用 zoom:1 用于兼容 ie）。 3.是用 afert 伪元素清除浮动(用于非 ie 浏览器)。
8.前端页面由哪三层构成，分别是什么?作用是什么?
参考： 网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由 html 或 xhtml 之类的标记语言负责创建。标签， 也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含 任何关于如何显示有关内容的信息。例如， p 标签表达了这样一种语义：“这是一个文本段”。
网页的表示层（presentation layer） 由 css 负责创建。 css 对“如何显示有关内容” 的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 javascript 语言和 dom 主宰的领域。
9.浏览器的内核分别是什么?
参考： ie 浏览器的内核 trident、mozilla 的 gecko、chrome 的 blink（webkit 的分支）、opera 内核原为 presto，现为 blink。
10.常见兼容性问题？
参考： * png24 位的图片在 ie6 浏览器上出现背景，解决方案是做成 png8. * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;} 来统一。
* ie6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin 比设置的大。 浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下 ie 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 —— _display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别) 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将 ie 游览器从所有情况中分离出来。 接着，再次使用“+”将 ie8 和 ie7、ie6 分离开来，这样 ie8 已经独立识别。
.bb{ background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*ie6、7、8 识别*/
+background-color:#a200ff;/*ie6、7 识别*/
_background-color:#1e0bd1;/*ie6 识别*/
}
* ie 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getattribute()获取自定义属性; firefox 下,只能使用 getattribute()获取自定义属性. 解决方法:统一通过 getattribute()获取自定义属性.
* ie 下,even 对象有 x,y 属性,但是没有 pagex,pagey 属性; firefox 下,event 对象有 pagex,pagey 属性,但是没有 x,y 属性. * 解决方法：（条件注释）缺点是在 ie 浏览器下可能会增加额外的 http 请求数。
* chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 css 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和 active 了解决方法是改变 css 属性的排列顺序:
l-v-h-a : a:link {} a:visited {} a:hover {} a:active {}
11.html5 有哪些新特性、移除了那些元素？如何处理 html5 新标签的浏览器兼容问题？如 何区分 html 和 html5？
参考： * html5 现在已经不是 sgml 的子集，主要是关于图像，位置，存储，多任务等功能 的增加。
* 绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localstorage 长期存储数据，浏览器关闭后数据不丢失；
sessionstorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search
新的技术 webworker, websockt, geolocation
* 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持 html5 新标签：
* ie8/ie7/ie6 支持通过 document.createelement 方法产生的标签， 可以利用这一特性让这些浏览器支持 html5 新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
如何区分： doctype 声明\新增的结构元素\功能元素
12. 解释下浮动和它的工作原理？清除浮动的技巧？
参考：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
(2)、使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容ie6。
(3)、使用after伪对象清除浮动。
该方法只适用于非ie浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
1.内联写法：and之后必须有空格
@media screen and (
min-width:960px //判断浏览器大小条件)
{body{background：red} //常规的样式
}
2.外联写法：当满足屏幕满足条件的时候连接href后的css文件
<link='stylesheet' media='screen and (min-width:960)' href='xx.css'/>
<link='stylesheet' media='screen and (min-width:960) and (max-width:1960)' href='xx.css'/>
媒体查询根据不同屏幕显示不同界面有两种方式：
1.在不同的媒体查询判定的大括号后写不同的样式
2.写两个相同的html内部的内容，通过媒体查询判断界面后，显示一个，隐藏另一个
14.使用 css 预处理器吗？喜欢那个？
参考：1、什么是css预处理器
css预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的css代码的编写过程的同时，它能让你的css具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
css预处理器种类繁多，本次就以sass、less、stylus进行比较。
2、语法
在使用css预处理器之前最重要的是了解语法，我只写过sass，就从网上找了下另外两种语法的格式，与大家对比分享。
首先sass和less都是用的是标准的css语法，因此你可以很方便的把已完成的css代码转为预处理器识别的代码，sass默认使用 .sass扩展名，而less默认使用.less扩展名。
15.div+css 的布局较 table 布局有什么优点？
参考： •改版的时候更方便 只要改 css 文件。
•页面加载速度更快、结构化清晰、页面显示简洁。
•表现与结构相分离。
•易于优化（seo）搜索引擎更友好，排名更容易靠前。
上一篇： 从门外汉到Python全栈