编程学习

很多朋友现在还在用Dreamweaver(下称DW),不可否认这是个非常优秀de软件,他基本上实现了所见即所得.当然也正是因为这样让很多网页制作人员对于(x)HTML标签变得一无所知.然而要学习WEB标准就必需要与标签打交道,您必需要了解他们de特点.就算您不打算自己打相关代码,继续使用DW来完成自己de工作也必需要知道DW生存de相关代码de作用.如果您希望减少冗余相关代码,提升网页de品质,那么您就更需要认知(x)HTML标签.
那么学习自然要循序渐进,当然要从最常用、最简单de入手.如果问在所有HTML标签中谁是最常用最简单de标签？那我一定会说是段落标签,也就是<p></p>,说它常用,是因为几乎所有de文档文件都会用到这个标签,说他简单从外形上就可以看出来,他只有一个字母.虽说是简单,但是却也非常重要,因为这是一个用来区别段落用de.我都知道段落是用来划分文章用de,以方便阅读.而有时候因为一些软件,或是人为操作使得文档中以其它de标签来区分,用<div></div>de就特别de多.那么有人会说:不都一样嘛,反正都区分开了.事实不然,虽然对于我人来讲,用什么东西区分段落都可以,但是对于机器、程序来讲,需要理解段与段就需要通过这些标签了.这也就是标签de语义,正确de语义会让您de文档更容易为搜索引擎所识别.同时合理安排标签de使用也有助于维护与管理以及相关代码de移植.
当然有很多人可能早就知道这个标签并且一直在用,并且还发现段落标签不使用</p>一样可以显示.并且在一直使用着这种方法.在HTML中这种写法是允许de.但是在(x)HTML中就已经规范了这种写法,所有de段落标签都必需要加上结束标签.(<p>示例段落……文字</p>)这点要切记,(x)HTML并没有为HTML增加什么更新de标签,只是规范了HTMLde标签de使用,以及减去了一些不合理de标签,以及标签里de属性.那么段落标签中都有哪些属性？留下来多少呢？振之查阅了一些文献.
align属性:写法是<p align=left ></p>,属性值有:left、right、center、justify(两端对齐).这是对齐属性,作用是管理段落里文本de对齐方向.但是在(x)HTML中已经不赞成使用这个属性了,当然浏览器还是支持这个属性de.尽管如此我还是不用为好,为什么不用呢,因为这个属性我完成可以通过CSS可以很简单实现,不需要在相关代码里一一加上这些属性.
可以使用de属性有:id、class、style、title.关于这几个属性将会在本专栏以后de文章进行分析,这里只要大家理解在段落标签中可以使用这些属性就可以了.
好了,如果您现在还没尝试为文章设置段落标签不如从现在开始在自己手上de项目中加入这个相关代码吧.这会让您越来越容易de掌握WEB标准.
另外,P是个块级标签,但是在这个块级标签里却不能再出现块级标签.关于(x)HTMLde嵌套规则可以参考由JUNCHEN翻译并做出解释de《(X)HTML Strict 下de嵌套规则》

“there is no attribute target for this element(in this HTML version)”
原来在HTML4.01/XHTML1.0/XHTML1.1严格DOCTYPE下,target=”_blank”、target=”_self”等等语法都是无效de,我只能通过JavaScript来变通实现.
有朋友问为什么不允许使用target=”_blank”？这个属性很方便啊.呵呵,不知道W3Cde专家们是怎么想de,据我所知,主要是“易用性、友好性”de问题,因为老外觉得不经过用户同意,没有明确提示就打开一个新窗口是不礼貌de.先不管这个取消是否合理,我来看看解决办法.
rel属性
HTML4.0增加了一个新属性:rel,这个属性用来说明链接和包含此链接页面de关系,以及链接打开de目标.rel有许多de属性值,比如next、previous、chapter、section等等.我要使用de就是rel=”external”属性.原来这样写de相关代码:
<a href=”document.html” target=”_blank”>
打开一个新窗口</a>
现在要写成这样:<a href=”document.html” rel=”external”>打开一个新窗口</a>
这是符合strict标准de方法.当然还必须配合一个javascript才有效.
javascript
完整de相关代码JS如下:
function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(”a”);
for (var i=0; i<anchors.length; i ) {
var anchor = anchors[i];
if (anchor.getAttribute(”href”) &&
anchor.getAttribute(”rel”) == “external”)
anchor.target = “_blank”;
}
}
window.onload = externallinks;
您可以把它保存成一个.js文件(比如external.js),然后通过外部联接方法调用:<script type=”text/javascript” src=”external.js”></script>
就是这样.
最后补充一句,我网站采用detarget=”new”在过渡型DOCTYPE下是允许de,但也不符合strict标准.下次改版时我将采用strict模式,将所有target=”new”改成rel=”external”.
本文参考了以下文章:
Kevin Yankde《New-Window links in a Standards-Compliant World》
《Standards-based Replacement for target=”_blank” in External links》
2006.7.13更新
很多门户网站de首页全部是弹出式de,我估计至少在中国这种观念暂时还改不了,在这种情况下就不需要在每个链接下加rel,全相关代码如下:
<script type=”text/javascript”>//<![CDATA[
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i ){
var anchor = anchors;
if (anchor.getAttribute("href"))
anchor.target ="_blank";
}
}
window.onload = externalLinks;
//]]></script>

有这样一个想法,不知道可行么

例子:

布局中de左栏,它de属性有:｛居左,宽度,背景色,字体等等｝

如果把每个属性都做成一个标准件,然后这样组装起来使用

class="float width height background font padding….",通过多个classde标准件de引用来完成页面布局样式

先按需要定义好标准件如:

float标准件

.l{float:left}

.r{float:right}

.cl{clear:left}

…

width标准件

.w200{width:200px}

.w300{width:300px}

…

background标准件

.red{background:red}

.black{background:#000}

.white{background:#fff}

…

根据需要引用

class="l w200 red"［居左,宽度为200,背景红色］

class="r w200 white" ［居右,宽度为200,背景白色］

我现在自己写相关代码,最多就２个class来定义一个布局样式,感觉很方便

近来大家总是在标准上争论不休,其实,这些问题一些相关文章已经说得很明白了.

　　以下我就谈谈我de看法.本帖子有太多de“我认为”,说明了我只是想把我de想法拿出来跟大家商榷,或许有太多不对de地方,也请大家一一指出.

　　1、我对web标准de理解
　　所谓deweb标准,在一些教程文章上已经得到结论:结构化标准(XHTML、XML)、表现标准(CSS、XSLT？)、行为标准(DOM、ECMAScript).这些东西在网上一搜一大把,在这里我就不多说了.我只说我自己de想法:

　　a.标准是相对de,有其一定de局限性
　　作为标准本身,它也在不断地完善中.我也可以加入其中完善它,而不是盲从它.没有最好,只有更好.(LeXRus前一阵子说要成立自己deweb标准组织,不知道现在怎么样了.)

　　b.标准只是被推荐使用,好de标准大家都会自觉去遵守
　　我之所以使用标准,就是因为标准对我有利.正如现在倡导deISO9000标准一样,它只是倡导,并不强迫.我认为它对我有用,所以我用它；同样,如果您认为它实在不怎么样,您也可以不用它,标准本身不应该带有任何强迫性.就跟打篮球一样,NBA是24秒进攻,我是30秒进攻,我要想加入NBA,就得用人家de规则.还有我加入“世贸”也是,如果我够拽,自己成立一个“世贸”,自己发布一套标准,也是可以de.

　　c.标准没有明确提到用div还是table
　　有些朋友很容易把标准简单地等同于“把table换成div”.我不这么认为,因为table也是符合xml规则de.含有tablede页面照样可以通过XHTML1.0de验证.

　　d.“div布局”不只是用div进行布局
　　我可以用一切可能de标签(包括table)对页面进行布局,目de就是要达到最优.它只是提出一个概念,一个全新de模式.坛子里也有人说过,“重要de是观念上de更新,而不是相关代码.”当然,我de最终目de是相关代码de更新.

　　e.XHTML验证是手段,不是目de
　　有时,我用javascript来生成flash movie相关代码,以欺骗validator,通过验证.用这种方法,那么没有通不过验证de页面.如果只是玩玩,那是可以de.但是我怕会有些初学者太把validator当回事,甚至认为通过验证是最终目de.我de看法是:validator不过是一个工具,它帮助我检查我de页面是否符合标准,仅此而已.最终我还是得按客户de要求设计我de页面.
　　
　　2、我为什么要用标准
　　有人会以为使用标准de目de就是为了达到标准.其实,《网站重构》一语道破天机:为了网站能“活”得更长久,为了提高网站de可访性,更为了降低成本,我必须采用Web标准!这里有三个“为了”,没有一个是为了标准.标准只是手段.
　　接触“标准”后,我尝试去做一些符合“标准”de页面.当时,并不是很明确为什么要使用标准,只是出于一种好奇心理.中间也遇到了一些难题,有技术上de,也有观念上de.但是,现在我很乐意用div css来给客户做网页.
　　用了标准以后,给我de感觉就是:相关代码精简了,维护方便了.
　　相关代码精简,可缩短页面装载时间.就算在当前宽带de条件下,我也不应该放宽对自己de要求——精简相关代码(我想这也是每一个程序员对自己de要求),况且现在还有不少de拨号用户,以及手机上网/浏览de用户.这是一个分秒必争de社会.
　　严格按照标准,可以获得更高de兼容性.一个合格de网页制作者,他总是试图让网页达到最高de兼容性.当然,他要在效果与兼容性之间取得某种平衡.就像我现在挑老公:既要有钱,也要靓仔.
　　维护方便,我甚至只要修改一下css就可以让整个页面呈现出完全不同de风格.这可以节省不少工作.
　　当然,我认为用标准最重要de一点是:向后兼容.用一个专业de术语就是:可持续发展.网络总是在不断地发展中,一个好de网页制作者,总得对未来de发展有一定de预见.就现在我知道de,以后一段时间确实是xmlde天下,直到有更好de东西出来取代它.
　　每年都有太多de网站为了跟上时代,花不少钱在改版上.因为改版就意味着一切重来,包括相关代码,甚至程序.
　　标准还要求我把数据交给XHTML(或者html、xml),把表现交给css,两者各司其职,结合起来.

　　3、为table平反
　　《网站重构》一书出来以后,也许有很大de误读成分,一些朋友把标准跟重构混淆了,甚至等同起来.我没看过这本书,不好做评价.
　　“在不改变相关代码外在行为de前提下,对相关代码做出修改,以改进程序de内部结构”,这就是重构.我认为“网站重构”兼有“div布局”跟“web标准”de意思.布局讲de是一种方法,标准讲de是一种规范,这是两码事.
　　web标准并不是说不用table,我找遍了网上de文章,没有找到一篇文章说web标准反对使用甚至建议不使用table标签,我想它是这样说de:建议不要使用table“布局”,而改用div cs“布局”.
　　拿一个数据表来说,我认为用table来组织它是最好de解决方案.当然,您要用其他办法来实现也是可以de,但是我敢说都没有table来得简单、简洁.(也许有,只是我没找到？)当然,在学习阶段,强制自己不使用表格解决一切问题,还是蛮有用de.

　　以上说了这么多,与其说是我de想法,不如说是汇总了大家de想法.但求不贻笑大方,如果能对初学者有所裨益,那就阿弥陀佛了.

出处:蓝色理想

最近发现越多越多de人使用DIV CSS这个称为来代表XHTML.这从根本上就是不正确de!

其一,CSS是一种叫做样式表(stylesheet)de技术.也有de人称之为层叠样式表(Cascading Stylesheet),而DIV是HTML中de一个标签.DIV和TABLE是同级de,所以不应该把DIV和CSS连在一起来代表XHTML.

其二,DIV CSS并不一定就符合标准,XHTML而也并不只是DIV CSS.许多号称已经使用DIV CSS进行重构de网站或论坛其实本身根本无法通过W3.ORGde校验.(譬如:动网论坛和VTBBS就根本无法通过W3.ORGdeXHTML校验.)即便通过了校验也只表明它在语法上是正确de,相当多de网站还存在滥用DIVde嫌疑.

所以请不要过度de迷恋DIV CSS.

今天在网站重构时,遇到了这个问题,URL需要传递两个变量(abc.asp?type=xxx&id=xxx),可是加了“&”后不能通过W3C检验,搜索了一番没有找到结果,只好去查英文网站查了下,用“& a m p;”代替“&”就可以解决这个问题了.
abc.asp?type=xxx& a m p;id=xxx
简单de翻译了下不能通过检验de原因[:)英文能力有限]
是因为Netscapede3.x版本不兼容这个标记.只有“&”这个标记存在于HTMLdeURL中时才需要用“& a m p;”来代替,当它作为特殊符号de时候,比如在aspde中不需要替代.

非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页.但从网友们de问题和制作中发现几个问题,在这里特别提醒一下:

1.不是为了通过校验才标准化.
web标准de本意是实现内容(结构)和表现分离,就是将样式剥离出来放在单独decss文件中.这样做de好处是可以分别处理内容和表现,也方便搜索和内容de再利用.

W3C校验仅仅是帮助您检查XHTML相关代码de书写是否规范,CSSde属性是否都在CCS2de规范内.相关代码de标准化仅仅是第一步,不是说通过de校验,我de网页就标准化了.我不是为了虚名,或者向别人炫耀:“看我de页面通过了校验”而去标准化,我de目de是为了使自己de网页设计工作更有效率,为了缩小网页尺寸,为了能够在任何浏览器和网络设备中正常浏览.

请大家沉下心来,仔细研究和理解web标准de内涵.网络上已经充满了不要浮躁和虚荣,请不要将这种风气带到web标准应用中来,这样做只会影响和损害web标准de推广.

2.不要用传统de表格思维来套div
“CSS布局就是将原来用tablede地方用div来替代,原来是表格嵌套,现在是DIV嵌套.”这种观点是错误de!

请跳出原来表格布局de禁锢,抛弃一个td接一个td放置图片和内容de思维方式.我上面说过web标准de目de是分离内容和表现,您可以这样思考,页面里有de仅仅是内容,没有修饰de情况下,它看上去就是一张白白de页面,上有一些文字和图片(这个图片是指内容中de图片,是有真实意义de图片).这些文字图片仅仅是依次罗列下来,只有结构,没有任何样式.然后加入表现,将所有修饰de图片作为背景,用C SS来定义每一块内容de位置、字体、颜色等.

这样制作de页面才是内容与表现分离de,就是说,当您抽掉css文件,剩下de就是干净de内容.这样才能在文本浏览器中阅读,才能在手机、PDA中阅读,才能随时修改CSS实现改版.

3.不必为每块内容都建立一个id
有网友抱怨css文件太大、太复杂.仔细看他们de相关代码,发现原因是他们对每块内容、甚至每句话都定义一个div,建立一个ID.这一方面是对样式表应用de不熟悉,另一方面也表现出对web标准没有彻底理解.

我知道内容都是有结构de(如果不明白,请阅读:[url=http://www.w3cn.org/article/tips/2004/43. html]理解表现和结构相分离 [/url]),相同de结构de内容我可以用同一个样式来定义,比如相同级别de标题、正文、图片.对于多次引用de样式可以用class来定义,不需要每个都用id；另外也不是说一定要用

,您完全可以用
来代替,同样都是块级元素,一样有盒模型de七个参数,

仅仅方便浮动.

至于仅仅为了行高、间距、一个修饰图片而增加额外dediv,我想随着对CSSde应用和理解,您很快就可以省略掉这些.我反对用DIVde嵌套取代tablede嵌套,这没有任何意义,不能体现内容de结构化.希望大家多研究CSS,写出最简练,最有效de样式表.

4.不要因为一点挫折就轻言放弃
我想这是一个态度和处事方法问题,这不仅仅针对学习web标准.学习任何新知识,接受新概念,都有困难,特别是需要您改变原来已有de习惯和思维时.唯一de问题就是:您认为学习web标准是否值得？您可以问问自己:您是否认可web标准带来de这些好处(简化相关代码、加速开发、压缩文件尺寸、提高下载速度、更好de易用性、获得更多用户、更易于维护、多平台兼容)？您是否觉得世界通用deXML离您还很远？您是否认为现在掌握deHTML知识就已经足够了？

自从99年以后,网页制作技术在国内就没有怎么进步和变革过(除了flashde兴起),而在国外前进de脚步就一直没有停止过,xhtml1.0、xhtml1.1、xml、xsl…,W3C和各大软件公司都在不断de研究和推进web技术,使它更方便、更有效、更强大.web标准de应用和推广国外已经开展了八年多(以zeldmandeweb标准组织网站为起点),虽然困难重重,但正在逐步被人们接受和认可.为什么我依然陶醉在网站表面de“繁华”上,不去思考页面背后本质de东西.

您愿意中国继续落后吗？您愿意自己继续落后吗？一切决定在于您自己.

有三个版本de XHTML 1.0,它们分别对应三个版本de HTML 4.01:

• XHTML 1.0 Transitional
• XHTML 1.0 Strict
• XHTML 1.0 Frameset

XHTML 1.0 Transitional 包含 HTML 4.01 Transitional 中de全部标记和属性.引入 XHTML 1.0 Transitional 标准de目de是,使现有 HTML 设计人员和开发人员无需经历太多de痛苦就能迁移到 XHTML.

XHTML 1.0 Strict 与 XHTML 1.0 Transitional de不同之处在于,它在文档结构和表示形式之间实施了一种更为明显de分离.与 XHTML 1.0 Transitional 不同,XHTML 1.0 Strict 强迫您使用层叠样式表来控制页de外观.

XHTML 1.0 Frameset 文档意在成为使用 标记将浏览器划分为多个框架de文档(XHTML 1.0 Transitional 和 Strict 页不能包含 标记).

W3C 还发布了 XHTML 1.1 以作为推荐标准(2001 年 5 月 31 日).XHTML 1.1 非常类似于 XHTML 1.0 Strict.二者de主要区别在于,可以用附加模块扩展 XHTML 1.1 以便支持新元素.例如,可以生成特定de XHTML 1.1 页,该页还包含 MathML(数学标记语言)、SVG(可伸缩向量语言)或创建de自定义模块中de元素.

最后,W3C 正在制订 XHTML 2.0 推荐标准.因为 XHTML 2.0 仍然处于起草阶段,并且当前没有 Web 浏览器支持该标准,所以我不在本文讨论它.

ASP.NET 2.0 框架和 Visual Studio .NET 2005 面向 XHTML 1.0 Transitional.该标准是 XHTML 标准中限制性最低de,而且它是与现有 HTML 页最兼容de标准.但是,还可以生成面向 XHTML 1.0 Strict 标准甚至 XHTML 1.1 标准de ASP.NET 2.0 页(请参阅后面de“配置 XHTML 一致性”一节).

(请注意,默认情况下,ASP.NET 框架de Beta 2 版本面向 XHTML 1.1. ASP.NET 2.0 框架de最终版本将面向 XHTML 1.0 Transitional.)

写XHTML要求使用干净deHTML语法

——————————————————————————–

Some More XHTML Syntax Rules:
更多XHTML语法规则:
Attribute names must be in lower case
属性名称必须为小写
Attribute values must be quoted
属性值使用双引号
Attribute minimization is forbidden
属性简写是不允许de
The id attribute replaces the name attribute
用id属性来替代name属性
The XHTML DTD defines mandatory elements
XHTML DTD定义强制元素

——————————————————————————–

Attribute Names Must Be In Lower Case
属性名称必须为小写
This is wrong:
这是错误de:

<table WIDTH=”100%”>This is correct:
这是正确de:

<table width=”100%”>

——————————————————————————–

Attribute Values Must Be Quoted
属性值必须带上双引号
This is wrong:
这是错误de:

<table width=100%>This is correct:
这是正确de:

<table width=”100%”>

——————————————————————————–

Attribute Minimization Is Forbidden
不允许属性简写
This is wrong:
这是错误de:

<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>This is correct:
正确de是这样:

<input checked=”checked” />
<input readonly=”readonly” />
<input disabled=”disabled” />
<option selected=”selected” />
<frame noresize=”noresize” />Here is a list of the minimized attributes in HTML and how they should be written in XHTML:
这是在HTML中简写de属性和其在XHTML中应该怎样书写de列表:

HTML XHTML
compact compact=”compact”
checked checked=”checked”
declare declare=”declare”
readonly readonly=”readonly”
disabled disabled=”disabled”
selected selected=”selected”
defer defer=”defer”
ismap ismap=”ismap”
nohref nohref=”nohref”
noshade noshade=”noshade”
nowrap nowrap=”nowrap”
multiple multiple=”multiple”
noresize noresize=”noresize”

——————————————————————————–

The id Attribute Replaces The name Attribute
id属性替换name属性
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
对于a, applet, frame, iframe, img和map,HTML 4.01中定义了一个name属性,在XHTML中是不赞成这样做de,使用id来代替.

This is wrong:
这是错误de:

<img src=”picture.gif” name=”picture1″ />This is correct:
这是正确de:

<img src=”picture.gif” id=”picture1″ />Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:
注意:为了版本比较低de浏览器,您应该同时使用name和id属性,并使它们两个de值相同de,像这样:

<img src=”picture.gif” id=”picture1″ name=”picture1″ />IMPORTANT Compatibility Note:
兼容性注意点:

To make your XHTML compatible with today”’’s browsers, you should add an extra space before the “/” symbol.
让您deXHTML兼容当前de浏览器您应该在/标记前添加空格

——————————————————————————–

The Lang Attribute
Lang 属性
The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.
lang属性可以应用于几乎所有deXHTML元素.它指定了元素中内容de语言

If you use the lang attribute in an element, you must add the xml:lang attribute, like this:
如果您像在一个元素中应用lang属性,您必须加上xml:lang属性,像这样:

<div lang=”no” xml:lang=”no”>Heia Norge!</div>

——————————————————————————–

Mandatory XHTML Elements
强制XHTML元素
All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.
所有deXHTML文档都必须有一个DOCTYPE声名.html、head和body元素必须出现,并且title必须在head元素里

This is a minimum XHTML document template:
这是一个极小deXHTML文档模板

<!DOCTYPE Doctype goes here>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>Title goes here</title>
</head><body>
Body text goes here
</body></html>Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.
注意:DOCTYPE声明并不是XHTML文档自身de一部分.它也不是XHTML元素,它不该有关闭标签.

Note: The xmlns attribute inside the <html> tag is required in XHTML. However, the validator on w3.org does not complain when this attribute is missing in an XHTML document. This is because “xmlns=http://www.w3.org/1999/xhtml” is a fixed value and will be added to the <html> tag even if you do not include it.
注意:XHTML文档要求xmlns属性出现在html标签中.然而,w3.orgde校验器不会由于这个属性没有出现在您deXHTML文档中而报告错误.这是因为”xmlns=http://www.w3.org/1999/xhtml”是一个固定de值,即使您de文档里没有包含它,它也会自动加上de.

web标准推荐如下字体定义方法:
body { font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
* 字体按照所列出de顺序选用.如果用户de计算机含有Lucida Grande字体,文档将被指定为Lucida Grande.没有de话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推.
* Lucida Grande字体适合Mac OS X；
* Verdana字体适合所有deWindows系统；
* Lucida适合UNIX用户
* “宋体”适合中文简体用户;
* 如果所列出de字体都不能用,则默认desans-serif字体能保证调用.