第1天:选择什么样的DOCTYPE

前言


大家好！这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。好了，让我们开始吧

第一天

开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码，可以看到第一行就是：

<!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文档最顶部，在所有代码和标识之上。

更多细节可以访问W3C的网站

赞 (0)

相关推荐

  • !DOCTYPE声明对JavaScript的影响分析

    要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分:除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效:当然对JS的取值也会有影响. DOCTYPE声明如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> DOCTYP

  • 指定网页的doctype解决CSS Hacking方法总结

    但是实际上,浏览器远远不止这几个,Firefox分为Firefox 1.5,Firefox 2,Firefox 3几个主要版本,IE7,IE6中也各有好几个系列,另外除开这两个主流厂商的产品之外,还有Opera,Konqueror,Netscape,chrome等一系列. 这些浏览器,各有各的一套,往往在这里运行正常,在那里运行就不正常了.于是WD们拆东边补西边,终于能在几个浏览器下都正常了.结果,产品经理又有了新的需求,需要在哪儿哪儿那儿改一下,于是乎,好不容易糊弄好的的纸架子一下子倒塌了,W

  • HTML <!DOCTYPE> 标签

    在默认情况下,FF和IE的解释标准是不一样的,也就是说,如果一个网页没有声明DOCTYPE,它就会以默认的DOCTYPE解释下面的HTML.在同 一种标准下,不同浏览器的解释模型都有所差异,如果声明标准不同,不用我说,您自己想就可以了.学习网页标准,浏览器兼容,从哪里开始您自己决定,但是, 请认识DOCTYPE: 一.什么是DOCTYPE DOCTYPE是Document Type(文档类型)的简写,在页面中,用来指定页面所使用的XHTML(或者HTML)的版本.要想制作符合标准的页面,一个必不

  • 网页中经常用到的Metas, Links and DocTypes集合

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR

  • doctype后如何获得body.clientHeight的方法

    在ie6中很多js脚本执行就会出现问题,一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值. 因为在加了doctype后,在ie6中这些document.body的属性已经重新分配给了document.documentElement. 比如:原来document.body.clientHeight,就要改成document

  • 第1天:选择什么样的DOCTYPE

    前言 大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的.之前阿捷也一直没有制作过一个真正符合web标准的网站.现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助.好了,让我们开始吧 第一天 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE. 查看本站首页原代码,可以看到第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

  • jQuery实现 注册时选择阅读条款 左右移动

    注册时选择阅读条款<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>    <head>      <title>demo2.html</title>      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&

  • AngularJS入门教程之ng-checked 指令详解

    AngularJS ng-checked 指令 AngularJS 实例 选择一个或选择所有选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • AngularJS基础 ng-selected 指令简单示例

    AngularJS ng-selected 指令 AngularJS 实例 获取选中的选项: 点击复选框选择 BMW 选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • CSS网页布局入门教程1：一列固定宽度

    CSS网页布局入门教程1：一列固定宽度

    本系列教程为入门级教程,适合初学者学习,由最简单的知识一点一点进阶.主要以实例为主,很少部分理论,这样更适应初学者快速掌握.因本人也正在学习,难免有一些错误或疏漏地方,望各位给予指正.本教程参考<CSS网站布局实录>一书,在此向作者表示感谢. 要想学好DIV+CSS,首先要有一定的HTML和CSS知识,如果这些你还不了解,建议你先去补习这一课,再来学习本教程.另外还要抛弃传统表格布局的思维模式,至于为什么,在你学习本教程中慢慢就会体会到.如果这些你都准备好了,那么开始吧! 一列固定宽度 一列固

  • jQuery UI 实例讲解 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

  • DIV+CSS布局教程大全与pdf电子书 下载

    div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜

  • JQuery选中checkbox方法代码实例（全选、反选、全不选）

    JQuery选中checkbox方法代码实例（全选、反选、全不选）

    1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="serv

  • 何为XHTML??

    何为XHTML??

    前言: 现在都讲究标准建站,而标准建站使用的技术主要是XHTML+CSS,而现在我们普遍使用的是HTML代码,那么我该如何转换呢?以及HTML和XHTML有什么不同呢?在这个教程里,你将学到HTML和XHTML之间的不同,以及如何将HTML转换为XHTML.毕竟XHTML是发展的方向,所以我觉得该教程有必要在本站上发布.我感觉要是你想使用标准还是最好先学HTML,因为比较简单,然后再来看该教程.同时这也是我曾发表过的WEB标准 XHTML&CSS的延续. XHTML介绍: XHTML是 EXte

随机推荐