本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> 成都网站建设_成都网页设计
立即购买视频教程 让W3C标准兼容终端
夜鹰教程网 来源:www.yyjcw.com 日期:2015/11/30 14:02:48
N多标准,建议选择适合你公司和团队的标准,其实核心理念还是让项目统一遵循一个标准,严格的XHTML是这样的。 

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



N多标准,建议选择适合你公司和团队的标准,其实核心理念还是让项目统一遵循一个标准,严格的XHTML是这样的。

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
  <head>
    <title>Virtual Library</title>
  </head>
  <body>
    <p>Moved to <a href="example.org.http://example.org/">example.org</a>.</p>
  </body>
</html>

XHTML的媒体类型是application/xhtml+xml ,而不是被大多设备都识别的text/html。增加xml头部声明还会造成IE6的quirks模式。总得来说,不是通用性很强的标准,使用的时候需要舍弃W3C的一些说明,改良后的应该是去掉xml声明,去掉媒体类型是application/xhtml+xml。不要给你们团队的开发造成不必要的困扰。

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction to HTML</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
</body>
</html>

我这里建议选择XHTML1.0标准的过渡型,如果你觉得XHTML过于花俏,不适用,HTML4.0的严格型也是很好的选择。HTML2.0已经被HTML5所取代,貌似看起来HTML4还是更具有向后的延续性。

其实上面所说的,也就是让W3C标准兼容终端,本应该终端按照W3C规范来开发解析器,但是种种的原意,终端各持己见,置W3C标准于不顾,而用户体验永远是第一位的。所以我们既然遵循标准,又要兼容终端。
我们不是标准的制定者,仅仅是实施者。就要考虑到项目的用户群体的特性,使用哪个终端多一点,显而易见,IE6的使用者仍然是大多数的。而且XHTML的严格定义方式不符合IE6的解析方式。通过权衡,即选择了W3C的推荐标准,虽然不是最新的,也兼容了现有终端的情况。
废话有点多了,概要的说明一下,选择一个适合项目大多数用户终端的标准,就HTML来说,4.0和xhtml1.0(改良后)都是不错的,但是要遵循HTML的结构化和语义化的要求,标签必须小写,闭合合理,嵌套正确,摒弃表现型标记,结构代码和表现代码分离。html1.0也可以编写成xml结构化的状态,即时没有xml声明。

CSS是最头疼的一块,如果严格按照W3C的css2.1规范,是很难兼容到IE系列浏览器的,特别是IE5.5 IE6两种,他们的解析和W3C相差甚远,所以CSS文件就必须进入hack,一种是css自身的私有属性和私有识别的代码,一种是IE浏览器特有的条件注释。细节就不多讲了。
如何既遵循标准,有兼容浏览器。那就是使用符合标准或者近似符合的浏览器作为主要开发软件,我建议安装有firebug插件的firefox作为第一个调试工具,等界面完成后,再调试其他浏览器,通过csshack或者条件注释,或者两者混搭。
理想的CSS兼容方案是,IE8,firefox这类通过Acid2 测试的浏览器使用标准的CSS代码,对没有通过测试的(就是IE系列)使用条件注释。例如:

<link rel="stylesheet" type="text/css" href="w3c.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie7lt.css" />
<![endif]-->

IE5.5的份额太少,可以考虑不兼容,兼容也主要是盒模型上的兼容。
理想的终究会存在很多现实的问题,比如IE的请求数过多,这是速度上的损失,代码维护不方面,同一个页面需要维护多个css文件,容易产生遗漏,避免这两个因素,css hack是做好的方式,主样式+私有样式解决兼容问题。
针对IE,常见bug的处理,haslayout的触发,放在标准CSS代码的后面。比如:

.clearfix:after{content:"\0020"; display:block; height:0; clear:both;}
.clearfix{*zoom:1;/*IE haslayout*/}
.box {float:left;margin-left:20px;_display:inline;/*双倍margin bug*/}

以后的浏览器对CSS的处理都采用W3C css2.1规范为主,私有属性为辅的策略,比如firefox的-moz-,IE8的-ms-,sefari和Chrome的-webkit-,Opera的-o-。

Javascript的标准兼容终端,我不是很清楚,基本的还可以看出,应用W3C的DOM操作文档树,而不是IE的document.all,摒弃IE的Jscript和VBscript。而且JS是可以去判断终端的,实例:

var ua = navigator.userAgent.toLowerCase();
    var _isOpera = ua.indexOf('opera') != -1,
        _isSafari = ua.indexOf('safari') != -1,
        _isGecko = !_isOpera && !_isSafari && ua.indexOf('gecko') > -1,
        _isIE = !_isOpera && ua.indexOf('msie') != -1,
        _isIE6 = !_isOpera && ua.indexOf('msie 6') != -1,
        _isIE7 = !_isOpera && ua.indexOf('msie 7') != -1;

通过终端的判断,给IE开小灶,解决IE 的兼容问题。

if (_isIE6) { // IE6
            //语句
}

DHTML的历史远远大于现在所说的富客户端,很多经验组建都源自于早期的IE平台上的DHTML,如何保持JS主体代码的标准化和对IE系列的兼容,我自己还需要再积累积累。

最后,为什么很多团队要求将firefox作为开发环境,待代码完成后再进行IE系列的bug调试。就是基于这个思想,先按照W3C标准规范编码,再处理对标准支持不好的浏览器的。这样你才能理解为什么把IE的错误解析成为bug,而且页面工程师的教材也接近统一,那就是W3C的文档,那是我们权威的教材。向后,终端都尊重了W3C标准,IE8就是很好的例子。

复制链接 网友评论 收藏本文 关闭此页
上一条: 遵循标准,统一思想  下一条: id与class的使用原则
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
Dreamweaver CS4 SN以及注册机、激…
成都网站建设:私人网站建设的好处…
火狐浏览器FireFox常用插件介绍
向上下左右不间断无缝滚动图片的效…
网站建设需要准备哪些资料?
ASP无限级分类实例教程
使用IE8常见问题问答
网页制作有关知识
如何加入网页代码的基本知识
QQ空间开心农场升级最快的方法
不让你的QQ好友删除你
HTML框架(Frames)
什么域名?如何注册域名?如何解析…
如何做好需求分析:需求管理是项目…
QQ远程协助后黑屏或花屏故障解决办…
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
如何使用百度地图API一些简单的功…
C#正则表达式提取网址、标题、图片…
网站高并发解决思路(转)
安装好Discuz!NT论坛后首页是一片…
有哪些细节设计给你带来好的用户体…
抄袭来的东西进行拼装之后,属于我…
成都最便宜网站建设 QQ:14167596…
成都网站建设:私人网站建设的好处…
夜鹰教程网网站建设常见问题集锦
浅谈网站建设的十二大误区
网站建设需要准备哪些资料?
怎样才能写好一篇软文呢:越低俗越…
什么域名?如何注册域名?如何解析…
站长如何将网站的访客变为顾客?
夜鹰教程网打造成都私人网站建设的…
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3