Web标准
WEB标准
WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准:
1.结构标准语言
(1)XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考(www.w3.org/TR/2000/REC-XML-20001006)。和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。
(2)XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0(参考http://www.w3.org/TR/xhtml1)。XML虽然数据转换能力强大,完全可以替代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相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。
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 Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)。 1.第一步改善为页面添加正确的DOCTYPE
DOCTYPE是document type的简写。主要用来说明用的XHTML或者HTML是什么版本。浏览器根据DOCTYPE定义的DTD(文档类型定义)来解释页面代码。
(1)过渡型(Transitional )
(2)严格型(Strict )
(3)框架型(Frameset )
PS:偷懒的办法是可以访问http://www.macromedia.com/网站的首页,然后查看源代码,把head区同样的代码拷贝粘贴就可以了。
设定一个名字空间(Namespace)
直接在DOCTYPE声明后面添加如下代码:
一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。
声明你的编码语言
为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:
这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。
用小写字母书写所有的标签
XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的:
正确的写法是:
改成
,改成等等。这步转换很简单。 每一个打开的标签都必须关闭。 文本能够变成巨大的、粗体的, 开始思考 使用选择器是件美妙的事 用CSS替换传统方法 CSS方法说明 clear: left; 一些令人遗憾的技巧和工作环境 已有的《CSS Discussion》列表是很好的资源,它收集了一个WiKiA讨论组的信息,其中包括CSS布局总结(css- discuss.incutio.com/?page=CssLayouts),CSS 技巧总结 (css-discuss.incutio.com/?page=CssHack) 以及更多 同样的道理,因为浏览器们各自的内核不同,对于默认样式的渲染也不尽相同,所以就需要一份各浏览器都遵循的规则来保证同一个网页文档在不同浏览器上呈现出来的样式是一致的,这个规则就是DOCTYPE声明。 因为互联网是互通的,所以任意的两个或者以上的网页文档都可能会涉及到数据交换,而因为XML语言是允许用户自定义标签的,所以任意两个交换的文档就可能会出现相同的标签,从而导致相同标签的冲突,所以就需要一个命名空间以区分开交换文档中可能存在的相同标签。 XHTML做为HTML向XML过渡的一种语言,并不能实现XML语言中的用户自定义标签,所以XHMTL文档中的命名空间都是相同的: xmlns即是XHTML namespace的缩写,也就是所谓的“命名空间”。与DOCTYPE声明一样,xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是,在HTML文档是不存在xmlns的,我们平常所见到的xmlns都是出现在XHTML文档中的。 在制作一个网页的时候,除了在开始的时候声明DOCTYPE(文档类型)之外,如果是XHTML文档还需要声明命名空间,而第三个需要声明的就是网页文档的字符编码类型: 为了能被浏览器正确的解释以及通过W3C验证,每个XHTML文档都应该声明所使用的字符编码。很多时候网页文档出现乱码大部分都是由于字符编码不对而引起的。 utf-8是unicode的一种变长度的编码表达方式,做为一种全球通用型的字符编码正越来越多的网页文档所使用,使用utf-8字符编码的网页可最大程度的避免不同区域的用户访问相同网页时因字符编码不同而导致的乱码现象。 但是当我们打开国内的大多数网站看,特别是门户型的大型网站,关于字符编码的声明却并非是utf-8,而是gb2312: 当然,除了gb2312外还有一些网站使用gbk或者是gb18030编码,这三种字符编码都是属于简体中文字符集。也就是说,如果一台电脑没有安装简体中文字符集时,当它访问字符编码为gb2312的中文网页时,则显示出来的是乱码。 既然使用gb2312字符编码时会因为不同区域的用户访问而可能出现乱码现象,那为何不使用utf-8呢? 其中一个原因可能历史遗留的原因,而另一个更重要的原因应该是由于两种编码的存储方式不同而造成的文档体积不同。 使用gb2312字符编码集时,一个汉字是占用2个字节的大小,而一个汉字在utf-8编码中所占的字节数却往往都是在3个字节,甚至是3个以上的字节。所以对于同一个中文文档来说,使用gb2312字符编码来进行存储的体积是要小于utf-8编码所存储的文档大小的。 而对于文字多访问量大的中文网站来说,使用gb2312编码的网页文档在下载传输上可以节省下不小的流量,再者是因为中文网站的用户群体基本上都锁定在中文用户上,这些也就是很多网站使用gb2312编码而不是utf-8编码的原因。 但是文字多访问量大的网站,国内并不多,再加上可能成对的乱码问题,所以在制作网页的时候推荐使用utf-8编码。 当然,不管用何种编码,最重要的是整站使用的编码要统一。 对于字符编码的声明除了上面的方式,还可能看到另一种声明方式: 这种声明方式是针对老版本的浏览器的,在浏览器已经普遍更新换代的今天已经不推荐使用这种声明方式。 在较早之前的网页上,我们经常可以看到如下的网页结构代码: …… …… 很显然的,这种结构的网页代码是不符合Web标准规范的,但是浏览器仍然可以很好的呈现出这个网页来,只要代码没出什么错误。这个其实就像是用Table布局的页面跟Div构架的页面一样,浏览器都可以呈现出来,关健是哪个页面呈现的质量会更高。 做出一个页面,跟做好一个页面,中间有着很遥远的距离。 在浏览器的发展历程中,微软凭借着将Internet Explorer捆绑进Windows操作系统中,从来成为浏览器市场上的霸主,从而也造成了一系列的IE对W3C组织所制定的Web标准于不顾的事情,微软的IE一直都只遵循自家的Web标准。很庆幸的是,微软决定在他的IE8中支持Web标准,虽然这事还没最终确定。除微软的IE外,Mozilla Firefox、Apple Safari、Opera、Chrome等浏览器则以支持Web标准的名义与IE做得长久的对抗。 浏览器的不同,于是就造成了对HTML代码默认解析的不同,所以即使同样的代码在不同的浏览器下也可能呈现出不同的样式来,于是这就需要有一份众浏览器都遵循的规则来协调众浏览器之间的差异,这份规则需要一个声明来引用它,这个声明就是DOCTYPE——document type(文档类型)。 DOCTYPE声明是标准网页中必不可少的部分,所以,想要制作一个符合W3C标准的网页,首先就需要为这个页面声明一个文档类型。 DOCTYPE所声明的DTD(文档类型定义)分为三种,分别是: Transitional(过渡的):要求不是很严格的DTD,允许你继续在页面中使用HTML4.01的标签; Strict(严格的):这是制作页面时理想的DTD方式,但是这个文档类型定义不允许使用任何的表现层上的标签和属性; Frameset(框架的):这个专门针对页面设计中包含有框架的DTD。 由于框架型的设计可能对网页在搜索引擎中收录的影响,很多网页中都不使用框架设计;而Strict的DTD对于大多数人来说还只是一种理想化的方式;Transitional型的DTD则是目前最适用也是使用最广泛的文档类型定义。 现在随便打开一个符合Web标准的网页,都可以在页面的最开始处看到这样一句声明: 这是一个关于XHTML网页文档的DOCTYPE声明。当然并不是说DOCTYPE声明只能针对XHTML网页文档,对于使用HTML4.01的网页文档来说,同样可以使用DOCTYPE声明: 过渡的DTD: 严格的DTD: 在HTML4 Elements中共计有91个标签,然而在这么多的标签中经常被使用到的标签不到四分之一,在这些常用的标签中有两个标签是属于最通用型的——div、span,这两个结构性的标签因为本身不带呈现样式及语义而被广泛的用于网页制作中,再加上之前很多人直接把WEB标准误解为就是div+css,于是在一个页面里出现了特多的div或者是span标签,尽管这些地方本身有更符合语义的标签来实现。 Table式的页面布局因为其本身的简便以及有Dreamweaver这样的可视化操作的Web制作软件的存在,从而引领了Web制作的一个时代,也正是因此而导致了过多的Web设计人员从来没有真正关注过HTML标签的真正语义,当Web标准开始兴起的时候,于是就直接被理解成是div+css的布局。 于是Web标准中的结构标签几乎变成了div的秀场。 Table页面布局所生成的过多的冗长代码,以及混杂其中的HTML样式属性,已经严重影响到页面的性能,尤其是对于大访问量的网站,解决的方法即是对页面进行基于Web标准的重构。然而对Web标准的误解,造成页面整体结构上div被过多的使用;以及Table布局所遗留下来的思想,造成页面上的结构嵌套过多。这些仍然影响着页面的整体性能。 所以,以更符合语义化的标签来构建页面,是Web标准推崇的理念。在这个理念下构建的页面还应该尽量的精简代码,使页面代码尽量的保持轻简,让浏览器更快速呈现的同时也便于日后的代码维护。 Web标准并不是某一个单独的标准,而是一系列标准的集合,包括结构、表现、行为三部分。这里的结构并不是指div,而是指标准化的语言——XHTML、XML。 明明标签可以实现粗体样式,为什么还要用标签再搭配粗体样式去实现呢? 在许多人看来,HTML应该是WEB制作所有语言中最简单的语言,因为它不需要编译、封闭等,甚至只需要一个记事本就可以让其在浏览器中呈现出来。所以我们也看到很多人都在说HTML很简单超简单之类的话,网上也有很多诸如“花个两三天学习下HTML就可以制作网页”之类的理论。在这些人看来,学HTML就像是学英文字母ABC一般简单。 正是这样的理论这样的思想,导致学习HTML的人都不把它当回事,认为HTML仅仅只是诸如“加粗用标签,斜体用标签”之类的应用。这样的思想尤其是在初学者当中流传,而一旦真正深入的了解学习HTML之后,才会发现HTML远非想像中的那么简单。 而随着WEB标准大潮的席卷互联网,更多的人索性就差不多抛弃HTML众多标签般的只用DIV,似乎DIV+CSS就是WEB标准的核心。这个错误的理论与HTML超简单的理论被绑在了一起,在互联网中传播着。思想改变行动,最终造成了WEB标准在国内互联网推行的困难重重。 真正的WEB标准应该是推崇以更合适的语义标签来制作网页结构,完全不是在整个页面写满DIV就是符合WEB标准。与此相同的道理是,HTML远远不是你所想像中的那么简单。 我们可以在网上看到很多整个页面都是由DIV架构的网页,这些DIV结构的页面在配合上CSS时,整个页面在浏览器中呈现的也许很正常,并看不出什么问题。可是如果用户禁用掉CSS之后呢?浏览器还能否正确的理解网页结构并呈现出来,就成了判断这个网页结构好坏的很重要的一个标准。而对于这些完全由DIV结构组成的页面,很显然的,在CSS被禁用之后,浏览器就很难呈现出一个结构清晰明了的页面来,而用户自然也很难从结构上去判断哪些内容是标题,哪些内容是真正的内容。 而如果在页面中采用了更符合语义的HTML标签的话,即使CSS样式在被禁用之后,浏览器依然可以根据 如果把网站建设比喻成是建造一栋大厦,那么HTML无疑就是这栋大厦的基石,如果基石不够坚稳的话,那么这栋大厦就很有可能会面临倾倒的危险。
为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:
正确的写法:
给所有属性值加引号
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。
例:height="100",而不能是height=100。
关闭所有的标签
在XHTML中,每一个打开的标签都必须关闭。就象这样:
这个规则可以避免HTML的混乱和麻烦。举例来说:如果你不关闭图像标签,在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是:空标签也要关闭,在标签尾部使用一个正斜杠"/"来关闭它们自己。例如:
经过上述七个规则处理后,页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务(http://validator.w3.org/)。发现错误后逐个修改。
2.第二步改善
接下来我们的改善主要在结构和表现相分离上,这一步不象第一步那么容易实现,我们需要观念上的转变,以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的,不是吗?诀窍在于边做边学。假如你一直采用表格布局,根本没用过 CSS,也不必急于跟表格布局说再见,你可以先用样式表代替 font 标签。随着你学到的越多,你能做的就越多。好,一起来看看我们需要做哪些事:
用CSS定义元素外观
我们在写标识时已经养成习惯,当希望字体大点就用,希望在前面加个点符号就用
的意思是大的,
能变成你想要的任何样子,通过CSS,
能变成小的字体,
h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }
用结构化元素代替无意义的垃圾
许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现,而不是结构。例如,一段列表内容可能会使用下面这样的标识:
句子一
句子二
句子三
如果我们采用一个无序列表代替会更好:
你或许会说“但是
给每个表格和表单加上id
给表格或表单赋予一个唯一的、结构的标记,例如
接下来,在书写样式表的时候,你就可以创建一个“menu”的选择器,并且关联一个CSS规则,用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样,不需要对每个标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记(标记“menu”的id标记),你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。
中级改善我们这里先列主要的三点,但其中包含的内容和知识点非常多,需要我们逐步学习和掌握,直到最后实现完全采用CSS而不才用任何表格实现布局。DIV+CSS网页布局入门
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:
第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句。当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表,详细列出原来的表现属性用什么CSS来代替。
结构化HTML
我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。
外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来,CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。
HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。
首先要学习什么是"结构",一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML结构。
如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:
标志和站点名称
主页面内容
站点导航(主菜单)
子菜单
搜索框
功能区(例如购物车、收银台)
页脚(版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来,类似这样:
这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。
根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。
另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。
一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签,margin是表现属性,前者属于HTML,后者属于CSS。(这就是结构于表现的 相分离.)
良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码,现在可以只在HTML中写
,所有控制表现的东西都写到CSS中去,在结构化的HTML中, table就是表格,而不是其他什么(比如被用来布局和定位)。
亲自实践一下结构化
上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样:
嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。
下面的列表将帮助你用CSS替换传统方法:
HTML属性以及相对应的CSS方法
HTML属性
align="left"
align="right" float: left;
float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等
当你使用float属性,必须给这个浮动元素定义一个宽度。
marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的,你可以分别指定元素的top, right, bottom和left的margin值。
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;
在HTML中,链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器,页面不同部分的链接样式可以不一样。
bgcolor="#FFFFFF" background-color: #fff; 在CSS中,任何元素都可以定义背景颜色,不仅仅局限于body和table元素。
bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder),你可以分别定义top, right, bottom和left
border="3" cellspacing="3" border-width: 3px; 用CSS,你可以定义table的边框为统一样式,也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。
你可以使用 table, td or th 这些选择器.
如果你需要设置无边框效果,可以使用CSS定义: border-collapse: collapse;
clear: right;
clear: both;
许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用clear属性.
cellpadding="3"
vspace="3"
hspace="3" padding: 3px; 用CSS,任何元素都可以设定padding属性,同样,padding可以分别设置top, right, bottom and left。padding是透明的。
align="center" text-align: center;
margin-right: auto; margin-left: auto;
Text-align 只适用于文本.
象div,p这样的块级怨毒可以通过margin-right: auto; 和margin-left: auto;来水平居中
由于浏览器对CSS支持的不完善,我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效 果。例如块级元素有时侯需要使用水平居中的技巧,盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。
另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。
理解浮动行为
Eric Meyer的《Containing Floats》将帮助你掌握如何使用float属性布局。float元素有时候需要清除(clear),阅读《How To Clear Floats Without Structural Markup》将非常有帮助。
更多帮助
在做项目的过程中,我们经常会建立各种各样的规范,以方便团队之间更好的合作更好的完成项目;同样我们也经常会听到各种各样的协议,比如Google的IM软件Gtalk使用的开放的XMPP协议,只要其他IM软件也遵循XMPP协议就能与Gtalk使用互通;而互联网上的信息无以计数,这些信息本身是独立存在的,如何将其串联并呈现在用户眼前,就需要使用到HTTP协议。
唯一需要注意的是,DOCTYPE声明的位置必须是位于页面的最开始处,在DOCTYPE声明代码之前不能出现任何的代码或是标签,否则页面中的标签或是CSS样式可能会失效。
div标签的过度使用,已经导致了很多人对于Web标准的误解,最明显的一点就是,当网页切换到使用div标签布局后,table标签便被无情的抛弃,俨然Web标准已经被理解成就是div+css。而事实上,table标签是不能被抛弃的,当需要显示数据内容时,由table标签构建的HTML结构的优势要强于div标签构建的布局,table标签仍然是显示数据时最符合HTML语义的标签。
一个网站在浏览器中呈现效果的好坏,视觉因素占一半的比重,而另一半的比重就在于网页的结构上。WEB标准学习经验总结
今天在群里,熊猫君提议整理一个帖子,一方面为初学者提供一个入门指南,另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结,希望抛砖引玉,大家不吝赐教。
1、必备工具
其实web标准并不是很复杂的技术,实现web标准的工具也很简单,说白了,只要可以进行纯文本编辑的软件,都可以作为代码编写的gon工具。例如记事本、UltraEdit甚至CuteFTP的编辑器(象我这种懒人有时候就用那玩艺儿直接在线编辑,汗)。
而另一些较专业软件会提供高亮显示代码(前面提到的UltraEdit也具有此项功能)、代码提示、自动闭合标签等等功能,使用起来会大大提高工作效率。如DreamWeaver、MS Expression、EditPlus等等,这些编辑软件目前是绝对的主流,无论是初学者上手容易还是专业人士提高效率都是不错的选择。
再说说浏览器环境,目前一台机器同时装IE、Firefox、Opera、Safari已经不是难事,而IE7 Standalone和MultipleIE的问世也让IE7和低版本IE并存成为可能。推荐浏览器环境——本机安装IE7、FF、Opera、Safari,同时安装MultipleIE。从我个人的使用经验,IE7 Standalone存在一定的缺陷,有可能导致本机安装的IE6无法正常使用。
除了编辑器以外,还有就是必不可少的调试工具啦,首推当然是Firefox下的Firebug!IE下目前还没有与之相当的调试工具,比较好的有IE development toobar、IE Debugbar等等,不过和Firebug完全不是一个档次的东西,只能说勉强凑合用。
2、必备的HTML/XHTML基础
说到基础,其实正是我最想谈的。从论坛许多的帖子也可以看出来,大多数问题的产生是由于制作者本身基础的不牢固。而HTML/XHTML作为基础中的基础,更是许多人的薄弱环节。然而很多人还是喜欢一上来就问布局或者Hack这些技巧方面的问题,其实很多问题如果本人的基础牢固了,几乎不能被称之为问题。
web标准必备的HTML/XHTML基础,大致有几个方面:
1、每个标签的语义,这一点是网页标准的根本。而整个网页标准化几乎都是围绕着这一点而来的,明确了语义,才能选择合适的标签;明确了语义,才能构建可读性良好的结构。例如就是网站最高等级的标题,它不应该放在
层级之下;例如