2006-9-12 作者:佚名 来源:艺术迷收集(fansart.com) 点击:1354
开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。
查看本站首页原代码,可以看到第一行就是:
打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那么这些代码有什么含义?一定要放置吗?
什么是DOCTYPE
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。
要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择:
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:
框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:
我们选择什么样的DOCTYPE
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。
打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。
补充
DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。
查看本站首页原代码,可以看到第一行就是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那么这些代码有什么含义?一定要放置吗?
什么是DOCTYPE
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。
要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择:
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我们选择什么样的DOCTYPE
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。
打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。
补充
DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。
google搜索:web标准
声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。如有疑问请与站长联系。
相关链接更多...
- 什么是WEB标准2006-9-12
- web标准第一天:选择什么样的DOCTYPE2006-9-12
- 一个简单的小偷程序2006-9-12
- 小偷程序大揭秘--技巧篇[图]2006-9-12
- 小偷程序大揭秘(1)--基础篇2006-9-12
- 为什么好设计是来自于差的设计2006-9-12
网友评论
目前没有评论!
全站精华
图文精彩
![韩国CG天后李素雅作品[图]--CG插画](http://www.fansart.com/uploadfile/200682543923453.jpg)
【2006-8-25 12:09:00】
韩国CG天后李素雅作品
韩国CG天后李素雅作品
![2006夏装搭配的美丽之最,美女+靓衣[图]--时装魅影](http://www.fansart.com/uploadfile/200672243703881.jpg)
【2006-7-22 11:21:40】
2006夏装搭配的美丽之最,美女+靓衣
2006夏装搭配的美丽之最,美女+靓衣
![韩国室内设计效果图欣赏[图]--环境艺术](http://www.fansart.com/uploadfile/200671964096361.jpg)
【2006-7-19 15:11:59】
韩国室内设计效果图欣赏
韩国室内设计效果图欣赏
![2006夏装搭配的美丽之最,美女+靓衣[图]--时装魅影](http://www.fansart.com/uploadfile/200671463233205.jpg)
【2006-7-14 17:09:53】
2006夏装搭配的美丽之最,美女+靓衣
2006夏装搭配的美丽之最,美女+靓衣
![瓷砖画册设计[图]--平面广告](http://www.fansart.com/uploadfile/200662167119201.gif)
【2006-6-21 18:36:45】
瓷砖画册设计
瓷砖画册设计
![韩国知名三维制作者李素雅cg作品欣赏[图]--CG插画](http://www.fansart.com/uploadfile/20066967597489.gif)
【2006-6-9 18:40:03】
韩国知名三维制作者李素雅cg作品欣赏
韩国知名三维制作者李素雅cg作品欣赏
![王开立的象素画-"华容点翠"系列1[图]--网页设计](http://www.fansart.com/uploadfile/20066967740609.gif)
【2006-6-8 17:40:50】
王开立的象素画-"华容点翠"系列1
王开立的象素画-"华容点翠"系列1

【2006-5-10 18:31:05】
风景摄影欣赏molnies 1
风景摄影欣赏molnies 1
![人像摄影:《炫影》(1)[图]--摄影艺术](http://www.fansart.com/uploadfile/20065966294533.gif)
【2006-5-9 18:18:49】
人像摄影:《炫影》(1)
人像摄影:《炫影》(1)

【2006-5-8 11:37:48】
韩国品牌YSB夏装 冷艳美人异国风情(3)
韩国品牌YSB夏装 冷艳美人异国风情(3)

【2006-5-8 9:52:42】
MIKE H的CG插画作品欣赏(1)
MIKE H的CG插画作品欣赏(1)
![经典样本设计欣赏(国人作品)1[图]--平面广告](http://www.fansart.com/uploadfile/200642664631465.jpg)
【2006-4-26 17:57:18】
经典样本设计欣赏(国人作品)1
经典样本设计欣赏(国人作品)1

【2006-4-26 14:27:13】
新锐CG插画 Monday to Friday
新锐CG插画 Monday to Friday

【2006-4-26 13:34:46】
Natascha Roeoesli的人物CG插画作品欣赏(1)
Natascha Roeoesli的人物CG插画作品欣赏(1)
![水木清华地产广告欣赏[图]--平面广告](http://www.fansart.com/uploadfile/200642634295921.jpg)
【2006-4-26 9:31:54】
水木清华地产广告欣赏
水木清华地产广告欣赏
![2006夏日流行时尚,创意无限街头华丽[图]--时装魅影](http://www.fansart.com/uploadfile/200642261089093.jpg)
【2006-4-22 16:46:51】
2006夏日流行时尚,创意无限街头华丽
2006夏日流行时尚,创意无限街头华丽
![万科西山庭院.格.沉.尊[图]--平面广告](http://www.fansart.com/uploadfile/200642133015939.jpg)
【2006-4-21 9:08:35】
万科西山庭院.格.沉.尊
万科西山庭院.格.沉.尊
![泊林花园推广故事绘本(2)[图]--CG插画](http://www.fansart.com/uploadfile/200642042197577.jpg)
【2006-4-20 11:43:23】
泊林花园推广故事绘本(2)
泊林花园推广故事绘本(2)
![泊林花园推广故事绘本(1)[图]--CG插画](http://www.fansart.com/uploadfile/200642041664949.jpg)
【2006-4-20 11:34:33】
泊林花园推广故事绘本(1)
泊林花园推广故事绘本(1)
![房地产广告设计-之水墨风格1[图]--平面广告](http://www.fansart.com/uploadfile/200641457308753.jpg)
【2006-4-14 15:56:06】
房地产广告设计-之水墨风格1
房地产广告设计-之水墨风格1
