Web标准及浏览器兼容性解决方案.docx
1、Web标准及浏览器兼容性解决方案 一：优秀的网页设计师 经常有人会问做为一个优秀网页设计师要具备哪些方面的知识以及技能？ 1.掌握一款良好的图形图形处理软件（例如：Photoshop，Fireworks ，AI...） 2.掌握可视化编辑工具或者编辑器（例如：TopStyle，Dreamweaver ，EditPlus...） 3.掌握最基本的实质性知识，也就是网页的三层结构Xhtml,CSS,Javascript(结构，表现，行为) 4.掌握网站据有分析策划的能力 5.掌握具有美术的一些基础配色知识最起码不要让网页的颜色太难看 6.掌握一款网络动画软件（例如Fla
2、sh） 如果你可以达到以上的要求，可以说的上你算一个网页设计师，不要认为一个网页设计师只会用PS做出一张图片然后用PS直接分割另存为html页面的就是网页设计师，一个会用Dreamweaver可视化软件做出一个垃圾网站（传统的table+gif技术实现的网站）的就叫网页设计师。 二：浏览器内核 浏览器内核 通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因
3、 主流浏览器内核 Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。 Geckos： Netcape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。
4、 Presto： 目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。 Webkit：Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器还是比较安全的浏览器。(Google的C
5、hrome浏览器也是采用Webkit) 注意，牺牲了网页的兼容性是说牺牲不好的网页兼容，因为Opera浏览器以开始就对标准支持的非常良好，所以对写法要求比较严格，那些不符合标准的网站在Opera下自然也就不能运行。 三：Web标准 WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面。 1．结构标准语言 （1）XML XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000
6、年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。 （2）XHTML XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大
7、完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 2. 表现标准语言 CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及
8、维护更加容易。 3.行为标准 （1）DOM DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。 (2) ECMAScript ECMAScript是ECMA(European Computer Manufact
9、urers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262 四：采用Web标准的好处 对于访问者： ● 文件下载与页面显示速度更快。 ● 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）。 ● 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）。 ● 用户能够通过样式选择定制自己的表现界面。 ● 所有页面都能提供适于打印的版本。 对于网站所有者： ● 更少的代码和组件，容易维护。 ● 带宽要求降低（代码更简洁），成本降低。举个例
10、子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。 ● 更容易被搜寻引擎搜索到。 ● 改版方便，不需要变动页面内容。 ● 提供打印版本而不需要复制内容。 ● 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。 五：如何学DIV+CSS技术 有好多人也看了，但是没有什么进步，我分析主要有以下几个原因： 原因一：压力不够，因为有不少人比如美工学CSS，因为是看别人学，所以学之，不学就没优势！这样的压力是很小的。 原因二：只是业余学习，这样学还只是玩一
11、玩，因为你不一定非要以这门技术吃饭。 原因三：方法不对，有的人只是在看教程，但他不动手去做，看的太多，做的太少，所以有了实践你才能把理论的东西揉进去。 六：掌握CSS的四个学习阶段 有一次我问一个网友，学CSS难吗？她说：“不难”我说你学多久了？她说：“刚学”。其实她说的也没错！如果有人问我学CSS 难吗？我会说：“难！”为什么我会说难呢？ 学CSS可以分成以下几个阶段： 阶段一：不去想浏览器的兼容性问题的情况下能做出页面，但页面里到处用TABLE的 模式DIV写出的页面。 阶段二：想到了兼容性问题，但无法提前预防，只会修补问题，大量使用HACK技术（我对HACK技术只是知道
12、但用的很少） 阶段三：可提前预防BUG，但样式表中大量应用了ID,CLASS，CSS译过来是重叠样式表，比如“DIV P SPAN”。这句代码是标明DIV子元素中P的子元素SPAN，这样写就可以定义SPAN的样式了，不用在SPAN中加入CLASS了。这也就是CSS的优点所在，为什么不好好利用而一定要定义一个CLASS呢！ 阶段四：这一阶段是最难的，良好的HTML语义结构、合理的CSS、可重复利用的样式。良好的语义有这方面的文章,合理的CSS，这两方面以后一定会写专题来研究。 七：用什么软件编辑CSS代码 这个问题好象是问过频率最高的！先说我自己吧，刚开始是用DreamWeaver
13、写代码，由于DreamWeaver软件本身是一个很耗CPU和内存的软件，运行时编辑的速度就可想而知了。走了好长一段时间之后我才过度到了“半手写”状态，“半手写”就是利用DW提供的代码提示功能，当你写“F”时有关“F”的样式就会立刻在后面提示出来，方便你选取。如果再写上几个字母，你要的那个样式就很快找到了，这样可以加快你的写样式的速度，但有一个坏处就是如果你脱离了代提示的编辑软件你就不会写样式了，比如你在程序员那里修改微调样式时，他用的可不一定是你用的那个软件，不一定有代码提示功能，所以你只能回到自己的机器上编辑好了然后发给程序员！这样做显然是不专业的！所以如果想成为优秀的人就要做到够专业！
14、 八：结构和表现分离 一定要做到从思想上分离，书写代码的时候 九：web标准有关XHTML代码规范 1.所有的标记都必须要有一个相应的结束标记 : 以前在HTML中，你可以打开许多标签，例如
和