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全栈