1,对WEB标准和W3C的理解
web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表,通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变化,主要是有js组成。
web标准一般是将该三部分独立分开,使其更具有模块化。但一般产生行为时,就会有结构或者表现的变化,也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范:包含如下几点
1.对于结构要求:(标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助)
1)。标签字母要小写
2)。标签要闭合
3)。标签不允许随意嵌套
2.对于css和js来说
1)。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。
2)。样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版
3)。不需要变动页面内容,便可打印版本,不需要复制内容,提高网站易用性
2.XHTML和HTML的区别
XHTML是用xml重写了HTML,是HTML像xml的过渡语言,继续沿用HTML标签,废除了部分表现层标签,在标准上比HTML严格,比如标签嵌套,标签结束
3.DOCTYPE
是一组机器可读的规则,指示web浏览器使用哪个版本的HTML编写命令(DTD)
严格模式:浏览器根据web标准去解析页面,是一种严格要求的DTD,不允许使用任何表现层的语法,如<br>
触发:正常编写网页,声明正确的DTD
混合模式:是一种向后兼容的解析方法,可以实现IE5.5以下的浏览器版本的渲染模式
触发:不声明DTD,或者在DOCTYPE前加上xml声明,如<?xml version='1.0' encoding='utf-8'>
4。块级元素和行内元素的区别
在标准文档流里面,块级元素具有以下特点:①总是在新行上开始,占据一整行;
②高度,行高以及外边距和内边距都可控制;
③宽带始终是与浏览器宽度一样,与内容无关;
④它可以容纳内联元素和其他块元素。
行内元素的特点:
①和其他元素都在一行上;
②高,行高及外边距和内边距部分可改变;
③宽度只与内容有关;
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用
5。link和@import区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:
XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代码
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。
补充:@import最优写法
@import的写法一般有下列几种:
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。
6.浏览器内核
Trient IE
Webkit Safari,Chorme内核原型,开源(苹果公司自己的内核)
Gecko Firefox
7。IE6 BUG
(1).双倍边距BUG
display:inline;或display:block;
(2)3pxBUG
float
(3)图片链接下方有间隙
display:block;
(4)奇数高宽问题
(5)空元素的高度bug
display:inline;
<!---->
(6)重复文字的bug
display:inline;
<!--[if !ie]-->xxx<!--[endif]-->
(7)IE6 z-index失效
原因:(1)父级position:relative;(2)问题元素无position,(3)问题元素float
解决方法:(1)relative改为absolute(2)浮动元素加position,(3)去除浮动
详情请看点击打开链接