一、什么是web标准?
WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
二、为什么将css引入放头部,js引入放后面
浏览器从上到下依次解析html文档。将css
文件放到头部,css
文件可以先加载。避免先加载body
内容,导致页面一开始样式错乱,然后闪烁。将javascript
文件放到底部是因为:若将javascript
文件放到head
里面,就意味着必须等到所有的javascript
代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟,窗口一片空白。
三、css的引入
一般来说只有3种:
1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:
<link
href="css/style.css" rel="stylesheet"
type="text/css">
2.在Html头部用<style></style>包起来,在这里面编写样式:
<style
type="text/css">
*{
padding:
0;margin: 0
}
</style>
3.在标签里面直接编写行内样式。
<div
style="color: #333"><div>
四、link和@import的区别
差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
5、 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核 Trident) 火狐(Gecko) 谷歌(webkit)
opear(Presto)
6、写出几种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)
9.ie 6 不支持!important
7、relative和absolute的区别
(1)、一般父元素用relative:绝对定位。
第一种:有父元素,参照父级元素的原始点为原始点,当父级元素有padding等css属性的时候,当前级的原始点参照父级元素的内容区原始点进行定位;
第二种:无父级元素,就用body的原始点为原始点并配合TRBL进行定位。
(2)、absolute绝对定位:一般用在子元素上并配合TRBL进行定位。
第一种:设置了TRBL,无论父元素有没有设置position属性,参照点是浏览器的左上角,配合TRBL进行定位
第二种:没有设置TRBL,默认一句父级元素的坐标原始点为原始点
第三种:设定了TRBL,并且父级元素没有position属性,那个还是以浏览器左上角进行定位。
8、img标签上title与alt属性的区别是什么?
Alt 当图片不显示是
用文字代表。
Title 为该属性提供信息
9、解释css sprites,如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数
10、浏览器标准模式和怪异模式之间的区别是什么
所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)。
IE6不认识!important声明,IE7、IE8、Firefox、Chrome等浏览器认识;而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种,还有很多其它区别。
到底都有哪些声明呢?哪种声明更好呢?我们建议你使用XHTML 1.0最严格模式,从一开始我们就应该严格的要求自己
,具体声明如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> |
如果你接手的是一个遗留网页,最初并没有DTD声明,并且使用了很多在XHTML中已经废除的标签,那么,我们建议你使用XHTML兼容模式,声明如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> |
11、清除浮动的几种方式,各自的优缺点
1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,增加无意义的标签)
2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.是用afert伪元素清除浮动(用于非IE浏览器)
12、css hack
_marging \\IE 6
+margin \\IE 7
Marging:0 auto \9 所有Ie
Margin \0 \\IE 8