`

Web标准概念--摘抄《CSS布局实录》

阅读更多
前言
对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏的“因素”在起作用,这个因素就是:标准。

生活中各行各业都有着自己相应的标准与规范,标准可以方便交流、促进协作、提高效率。

对于IT行业,设备的多样性与信息的多样性更加需要标准来保证它们之间的沟通与协作。好在我们已经找到了解决的方案,这就是---XML。   

XML简单说就是一种“有规定格式的文档”,只要我们的设备或系统产生的数据都遵守这种格式,就可以实现互相的数据交换、分享与协作。

自从1998年国际万维网组织(W3C.org)推出XML 1.0规范以来,已经有大量的XML标准在我们的生活中应用,例如我们用手机订阅的天气预报、股票行情,这些数据都是从相应的系统获得然后通过XML格式转换发送给你的;我们通过QQ或者MSN上发送消息到不在线的朋友手机上,这其中的信息也是通过XML转换实现的;还有更多的商业应用,例如公司内部的CRM、ERP、内容管理系统之间的数据交互、整合与共享都应用了XML。

那么,你自然会想到:网页(web)是否也应该遵循XML标准呢?答案是肯定的。

万维网出现以后,大大改变了人们的信息获取方式,以前从报纸、电视、广播上获取信息,现在可以更方便的通过网络,通过浏览器浏览获得。web上的信息也日益丰富,从一开始简单的、静态的文档和图片信息,到现在动态的、可交互的多媒体信息,web上的信息已经多到可以用“恐怖”来形容。去年底,google搜索引擎已经能够搜索到82亿张网页和21亿张图像。这么多的数据是财富,但是如果不能有效利用和搜索就是“信息垃圾”。而事实上,已经产生了数据冗余和信息无法有效共享、查询的情况。

我们有99%的网站是采用HTML制作的,而HTML并不符合XML格式。因此这些网页信息都很难适应未来新设备和数据共享的要求。怎么办呢?国际万维网组织(W3C.org)已经提出了解决办法,他们在HTML基础上,按照XML格式制定了新的规范XHTML1.0,只要通过简单的改变,就能将HTML转为XHTML,从而实现向XML的过渡。同时,为了使你的页面信息更加容易被搜索和重用、XHTML的代码需要结构更加更清晰、标签更加有语义,W3C推荐使用CSS来控制表现,以实现内容与表现的相分离。

这也就是我们这本书要讲的主题:用web标准技术重构你的网站。

一:了解web标准
1.什么是web标准?
首先要明确一个概念。我们本书讲的web标准,不是指XML,而是指为了实现大量HTML信息向XML标准的过渡,W3C和ECMA制定的一系列的技术规范,目前主要包括XHTML1.0、CSS2.0、DOM1.0和ECMA JavaScrit。web标准不仅仅是一个规范,而是一系列规范的总称。

按这些规范制作的网页,符合XML格式规范,内容与表现相分离,将使你的页面数据在以后可以被分享、交换和重用。

下面,让我们一起了解一些重要的基础知识。如果你已经掌握,可以跳过直接阅读第二节

2. 什么是w3c?
W3C是“World Wide Web Consortium”的缩写,中文称万维网组织。是一个专注于“领导和发展web技术”的国际工业行业协会。它由万维网发明者Time Berners-Lee领导,成立与1994年。W3C已经有超过500家的会员--包括微软、美国在线(Netscape的母公司)、苹果电脑、Adobe、Macromedia、SUN 以及各类主流硬件、软件制造商和电信公司。学会主要研究由三家学术机构主理--美国麻省理工学院(MIT)、法国的欧洲信息与数学研究论坛(ERCIM)、日本的应庆大学(KEIO)。

W3C主要工作是研究和制定开放的规范(事实上的标准),以便提高web相关产品的互用性。W3C的推荐规范的制定都是由来自于会员和特别邀请的专家组成的工作组完成。工作组的草案(Drafts)在通过多数相关公司和组织同意后提交给W3C理事会讨论,正式批准后才成为“推荐规范(Recommendations)”发布。更多的信息您可以访问W3C的网站:www.w3.org

3.W3C发布的标准
3.1 HTML4.0
HyperText Markup Language(HTML,超文本标识语言)广泛用于现在的网页,HTML目的是为文档增加结构信息,例如表示标题,

表示段落;浏览器可以解析这些文档的结构,并用相应的表现形式表现出来。例如:浏览器会将...之间的内容用粗体显示。

设计师也可以通过CSS(Cascading Style Sheets)来定义某种结构以什么形式表现出来。

3.2 XML1.0
XML是Extensible Markup Language(可扩展标识语言)的简写。XML类似HTML也是标识语言,不同的地方是:HTML有固定的标签,而XML允许你自己定义自己的标签,甚至允许你通过XML namespaces为一个文档定义多套设定。看一个XML例子:

<addressbook>
<entry>
<name>AJIE</name><email>ajie33@hotmail.com</email>
</entry>
<entry><name>ALLAN</name><email>neo_n@21cn.com</email>
</entry>
<entry><name>YAHOO</name><email>tingpeng@msn.com</email>
</entry>
</addressbook>

一些XML的应用,例如XHTML和MathML,已经成为W3C推荐规范。你同样可以通过样式规范(CSS和XSL),来定义XML标签的表现形式。XML文档目前还不能直接用浏览器显示,页面展现依然采用HTML或者XHTML,XML现在大多用于服务器与服务器(系统与系统)之间的数据交换。

3.3 CSS2.0
CSS是Cascading Style Sheets层叠样式表的缩写。通过CSS可以控制HTML或者XML标签的表现形式。W3C推荐使用CSS布局方法,使得web更加简单,结构更加清晰。

3.4 XHTML1.0
XHTML实际上就是将HTML根据XML规范重新定义一遍。它的标签与HTML4.0一致,而格式严格遵循XML规范。因此,虽然XHTML与HTML在浏览器中一样显示,但如果你要转换成PDF,那么XHTML会容易的多。

XHTML有三种DTD定义:严格的(strict),过渡的(Transitional),框架的(Frameset)。 DTD是Document Type Definition文档类型定义的缩写。它写在XHTML文件的最开始,告诉浏览器这个文档符合什么规范,用什么规范来解析。

3.5 DOM1.0
DOM是Document Object Model文档对象模型的缩写。DOM给了脚本语言(类似ECMAScript)无限发挥的能力。它使脚本语言很容易访问到整个文档的结构、内容和表现。

二:web标准的思考与争论
通过上文的介绍,我们已经初步了解为什么W3C要建立XML标准,为什么各大厂商都愿意支持XML。也了解到为了向XML标准过渡,我们目前阶段需要学习和掌握的web标准有那些,接下来就是具体应用了。但我们发现应用也并不如想像中那样顺利,依然有一堆的困难摆在我们面前:

有99%采用HTML4.0或者更老规范建立的网页需要转换到XHTML;
每天依然有大量的新的页面采用不符合web标准的技术在发布;
缺乏易用的、强大的支持web标准的页面开发软件;
主流浏览器IE对web标准的支持不完善;
大批的设计师需要了解web标准,转变观念;
其中“转变观念”是最重要、也是最难的。许多设计师还不理解web标准,依然在观望甚至反对。这里我们来分析web标准推广过程中遇到的典型问题与争论:

(一)关于web标准
1.web标准并不是“标准”,我为什么要遵守?
的确,web标准并不是标准,它只是W3C制定的推荐规范,W3C并没有强制要求和监督业界去执行。web标准组织(webstandards.org)为了便于这些规范的推广,才把它们统称为“web标准”。虽然W3C制定的只是“推荐规范”,但它已经是事实上的标准,世界前500家大IT企业会员都认可的规范,你没有理由怀疑它的广泛性和可行性。微软也是W3C的主要会员,它自己通过的规范一定会支持,但出于商业竞争的考虑,微软通常都会做一些细节调整来绑定用户,但这并不影响W3C规范的方向性和权威性。

2.DIV+CSS就是web标准吗?
DIV+CSS只是具体的实现技术手段,并不能涵盖web标准。web标准不仅仅是HTML向XHTML的转换,更重要的是信息结构清晰、内容与表现相分离,而DIV+CSS技术能较好的实现这种思想。因此,我们看到的多数符合标准的页面都是采用DIV+CSS制作。

(二).关于web标准的好处
1.科技在进步,网络带宽越来越大,速度越来也快,节省那点字节有意义吗?
web标准的好处之一是:用web标准制作的页面代码量小,可以节省带宽。这只是web标准附带的好处,因为DIV的结构本身就比TABLE简单,TABLE布局的层层嵌套造成代码臃肿,文件尺寸膨胀。通常情况下,相同表现的页面用DIV+CSS比用TABLE布局的节省2/3的代码。这是web标准天生的好处。 至于节省带宽的意义并不主要针对普通用户,而主要针对网站经营者,特别是中大型网站,类似新浪、网易这样的站点。一个新闻首页从500K缩小到170k,假设一天的pageview是3000万(保守数字),那么节省的服务器流量就是330k*30000000=9440G,这个成本的节约是可观的。

2.我需要考虑残障人士(盲人和弱视)吗?
为残障人士提供网络浏览方便是美国及欧洲一些国家的法律规定,由于web标准页面的清晰结构、语义完整,一些相关设备能很容易的正确提取信息给残障人士。因此,方便盲人阅读信息也成为web标准的天生好处之一。至于有人说中国目前还有很多人为解决温饱发愁,哪有时间考虑残障人士。这是社会文明和社会道德问题,不在本书讨论范畴。但如果你页面按web标准制作了,就能达到这个效果,何乐而不为呢?

(三).关于布局
1.web标准就不能用表格了吗?
首先要澄清一个概念:web标准并不是不允许用TABLE标签,TABLE也是XHTML1.0中的标准标签。我们只是提倡用DIV+CSS布局来替代传统的table布局。原因是:原来的TABLE布局将表现和内容混杂在一起,结构不清晰、内容不完整,不利于内容的重用。而且从语义上讲,W3C制定TABLE标签时候只是用它来做表格结构定义的,文档中如果有表格,那么就应该用TABLE。而排版、定位这些表现的东西应该由CSS来控制。

2.我用table布局改版也很方便,你用CSS不一定就比我效率高。
个别情况或者个别项目,有可能象你说的,用table布局改版也很快。但这不是长远之计,我们需要透过现象看本质,web标准将内容与表现相剥离,所有样式、风格、布局等等表现的东西独立出来,由CSS或者XSLT来单独控制,这样的剥离后,改版才是真正的方便。而且“改版”并不仅仅是浏览器上的改版,同样的页面如果我需要发布到手机上,符合web标准的页面就只需要修改样式文件,而table布局的则需要完全重做,未来如果还需要再发布到网络电视上或者其它新设备上呢?CSS的效率一定比table高。

3.用web标准能制作出漂亮的页面吗?
由于一开始研究和推广web标准的人士做得页面都比较“朴素”,因此引起大家的误解,以为web标准的页面就是简洁、轻图形、轻视觉效果的。实际上,用TABLE布局能够实现的页面效果,用CSS也基本上能实现。这个问题不需要多解释,看看国内外新建立的web标准站点就清楚了。例如:www.macromedia.com,www.mp3.com

(四).关于浏览器兼容
1.我不需要关心web标准,IE占有99%的市场,我做的页面只要IE能看就可以了。
“以用户为核心”通常都是反对web标准者的档箭牌,实际上这是虚伪的“以用户为核心”。你不能保证IE永远是垄断浏览器市场,你也不能保证IE不做任何改变(事实上,微软的IE7已经开始改善对web标准的支持)。坚持用html+table布局制作的页面将是“死”的信息,不方便搜索,无法重用与共享,从长远来讲,这才是对用户最大的伤害。

2.为什么web标准的页面兼容性并不好?
我们说web标准的优势是兼容性好,这个兼容是指向后兼容,向新浏览器、新设备兼容。对已有的浏览器来说,因为它们对web标准的支持程度不一样,因此会出现不同浏览器下页面变形的情况。我们必须采用一些"hack"技巧来实现不同浏览器的兼容。这是无奈、也是不可避免的,是web技术发展必然要经历的一个过程,是我们向XML过渡必须克服的一个困难。

(五).其它
1.没有好用的开发工具,难道要我手写代码?
是的。我们建议你手写代码,可以促进你更加深刻理解web标准。事实上,很多开发软件已经开始支持web标准。你可以看看最新版的Dreamweaver 8,还有Adobe的Golive,微软的Visual Studio.NET 2005,这些工具都已经很好的支持web标准页面的开发。当新技术出现时,我们的态度应该是去了解、实践和评估,而不是盲目反对或者坐等其成,那样你永远都是落后者。

2.老板不懂,客户也没有要求,我为什么要用web标准?
在自己或者开发团队都不熟悉web标准技术的情况下,新项目采用web标准的确有风险(技术和成本风险),可以评估后再决定是否采用web标准。但是如果有能力采用标准依然蒙混老板和客户,这就属于职业道德和敬业精神的问题。

三:未来与方向
我想你和我一样,都关心WEB的未来会是怎么样的,下一轮的新技术热点在什么方向。其实,要回答这个问题,没有谁比W3C更有权威了。只要看看W3C在做什么,正在研究什么规范就知道WEB的走向和趋势了。

W3C明确地告诉我们:XML是未来的趋势毋庸置疑,开放和共享是互联网的精神和根本动力。

蒂姆.贝纳斯-李(Tim Berners-Lee) ,W3C领导人,万维网之父,说到:XML提供了信息交换的手段,但这仅仅只是开始。我们的目标是web的语义化,即:使得web上的信息内容更加容易理解、更便于交换和共享,RDF和OWL语言将在这方面提供更强大的支持。

web技术即将迎接新一轮的变革和发展,如果你还在犹豫是不是需要学习web标准,那么你将失去这次机会。
分享到:
评论

相关推荐

    《乌合之众》勒庞-读书笔记摘抄.docx

    《乌合之众》是法国社会心理学家古斯塔夫·勒庞的一部经典著作,主要探讨了群体行为和群体心理的特性。勒庞通过这本书揭示了群体行为背后的心理机制,指出个体在群体中往往会丧失独立思考的能力,转而受到集体情绪和...

    [审计来了美文摘抄]-美文摘抄600字.docx

    [审计来了美文摘抄]-美文摘抄600字.docx

    ssh整合--摘抄自多人博文

    SSH,即Struts + Spring + Hibernate,是Java Web开发领域中一个非常流行的组合框架。每个组件在系统架构的不同层次发挥着重要作用: - **Struts**:负责前端展示层,提供MVC模式的支持,使业务逻辑与显示逻辑分离...

    摘抄好词好句好段-好词好句好段摘抄大全.doc

    在追求语言表达的精进和文化素养的提升中,一份内容详实的摘抄大全无疑是一盏明灯,指引我们在文学的海洋中航行,找到那最闪亮的珍珠。本文档《摘抄好词好句好段-好词好句好段摘抄大全.doc》就是这样一个资源库,它...

    作文开头结尾-摘抄.doc

    作文开头结尾-摘抄.doc

    C++--CListCtrl使用技巧的摘抄

    ### C++—CListCtrl 使用技巧详解 #### 1. CListCtrl 风格介绍 CListCtrl 是一个在 Windows 应用程序中常用的控件,它提供了多种视图来展示列表信息,如图标视图、小图标视图、列表视图以及报告视图。...

    汉王屏幕摘抄精灵.rar

    汉王屏幕摘抄精灵是一款专为Windows平台设计的高效工具,旨在帮助用户将屏幕上的文本信息快速、准确地转换成可编辑的电子文档。这款软件的出现极大地减轻了用户手动输入纸质文档到电脑中的繁琐工作,提升了工作效率...

    Enduring CSS 无水印pdf 0分

    ECSS提供了一种方法来处理状态变化,并使用WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)标准来增强无障碍性。ARIA属性可作为CSS选择器,从而使状态变化的处理更加直观和可...

    经典IT文章摘抄经典IT文章摘抄

    经典IT文章摘抄经典IT文章摘抄经典IT文章摘抄经典IT文章摘抄经典IT文章摘抄

    [遗失的爱情美文摘抄]-摘抄师生之情美文.docx

    这篇文档实际上并不是关于IT行业的,而是关于情感表达和生活哲理的美文摘抄,主要描述了一段发生在月明沙滩上的师生之间的偶遇和对话,主题围绕着失恋、遗忘和重新开始。不过,我们可以尝试从中挖掘一些与IT行业相关...

    H3C 无线控制器产品 Web网管配置指导(R5221)-6W103-整本手册

    这种配置方式不需要在本地计算机上安装任何特定的软件,只需要通过标准的Web浏览器即可进行。用户通过输入设备的IP地址,访问设备的Web管理页面,并进行登录验证后,即可远程对设备进行操作和管理。Web网管配置的...

    汉王屏幕摘抄精灵

    汉王屏幕摘抄精灵是一款强大的OCR(Optical Character Recognition,光学字符识别)软件,专为用户设计,能够高效地从图像、PDF文件中提取并转换文字。这款工具的核心功能在于其高精度的文字识别技术,使得用户能够...

    一款html+CSS+js的云平台网站模板

    在模板中,CSS 文件可能包括对字体、颜色、布局、响应式设计等方面的控制。例如,`font-family`定义字体,`color`设置文字颜色,`background-color`设定背景色,`margin`和`padding`调整元素间距,`display`属性用于...

    关于-描写小兔子的好句子摘抄.doc

    关于-描写小兔子的好句子摘抄.doc

    丑小鸭读书笔记摘抄好词好句及感悟赏析-读书笔记.docx

    《丑小鸭》是丹麦作家安徒生创作的一部经典童话,讲述了一只外表丑陋的小鸭子在经历了种种磨难后,最终成长为美丽天鹅的故事。这篇读书笔记摘录了好词好句,并深入剖析了故事背后的深刻含义,旨在启发读者理解和领悟...

    高考议论文素材摘抄三则 高考议论文名人素材摘抄精选.docx

    高考议论文素材摘抄三则 高考议论文名人素材摘抄精选.docx

    (免费下载)形容早上美好的句子(经典版)-摘抄.docx

    一篇名为“(免费下载)形容早上美好的句子(经典版)-摘抄”的文档,为我们提供了这样一个充满正能量的资源库。这些句子不仅仅是对美好清晨的描绘,更是对生活态度的一种激励。 文档中精选的句子,让我们从大自然的...

Global site tag (gtag.js) - Google Analytics