学习Web标准 给你的网页选择合适的文档类型

web|web标准|网页

你做了所有你认为正确的事情,但页面在最新的浏览器里并不能正确表现。那是你书写了无效的XHTML和CSS.你使用了W3C标准的文档对象模型(DOM)来操作页面动态元素。而在浏览器去表现这些标准时,你的站点失效了。这很有可能就是一个错误的文档类型(DOCTYPE)导致的。这篇文章就是为你提供DOCTYPE是如何工作的,还有解释一些实际真实世界中这些文档类型的用法。

为什么使用文档类型(Why a DOCTYPE?)

依据HTML和XHTML标准,一个DOCTYPE("document type declaration"的简写)是用来告诉浏览器你使用的是哪一个版本的(x)HTML,而且必须出现在每一个页面的顶部。DOCTYPE是网页的一个重要构成:没有他们,你的CSS将不再有效。

就像之前提及的ALA文章里(其它有趣的地方也同样),DOCTYPE也要适应其它的浏览器,比如Mozilla, IE5/Mac, 或者IE6,IE7。

一个新的DOCTYPE包含了一整个URI(sconf注:Universal Resource Identifier,通用资源标志符)(一个完整的网址),它告诉那些浏览器去把页面解析(render)成与标准相适的模型。把(X)HTML, CSS和DOM处理成你所期望的那样。

使用一个不完善或是旧的的DOCTYPE,甚至不使用DOCTYPE,它会使浏览器把它转化成“Quirks”模型,此时浏览器假设你写的是过时的,残缺的90年代后的代码。

这样设置,浏览器将尝试用旧的标准解析你的页面,把你的CSS解析成IE4标准。并且回复所有者一个特殊的DOM(IE回复的是IE的DOM,Mozilla和Netscape 6回复的却是他们认为的模型)。

无疑,这并不是你所想要的。但却是你常得到的。所以本文就想要纠正这些不正确或是不完整的DOCTYPE。

(注:Opera浏览器不支持这些规则,它总是尝试把网页解析成标准适应型,别一方面,Opera对W3C的DOM也没有提供太强有力的支持。但他们也能很好的运行)Ed:自从这篇文章第一次发布以来,Opera已经把适应的DOM(DOM-compliant)加到Opera7里面了。

DOCTYPE去哪了?(Where HAVE ALL THE DOCTYPES GONE?)

尽管文档类型在浏览器中的WEB标准是重要的有机构成,尽管W3C领导创建了WEB标准,你也同样期望W3C的站点能提供一些合适的文档类型,你也可能想更迅速简单的找到这些信息,然而,在我写这篇文章的时候,你还不能。{Ed:W3C现在列出了一系列标准的DOCTYPEs在他的网站上,你能够在W3C指南中看到这些,比如"My Web site is standard. And yours?”}

W3.org不是A List Apart, WebReference或者Webmonkey.它原来无意于帮助WEB设计者,开发者,还有民间团体去加快他们认识和使用最新的科技。这不是他的工作。

W3C发布一系列的指南,尽管大多数的WEB设计者很少察觉。#

你能在W3.org上整天的搜索DOCTYPEs而不必去看那些专门的列表。并且当你确实下载一个DOCTYPE(一般是关系到一些特殊的建议或工作草案),而它并不能不正常的在你的站点工作。

遍及W3C站点的是缺失URIs(sconf注:即不是完的URI)的DOCTYPEs,这些DOCTYPEs是指向W3C自己网站的。一旦这些从W3C上转移到你自己的网页上,这些URLs就会成为不存在的文档了。

举个例子中,许多站点的DOCTYPE是直接复制的W3.org上的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
如果你看到了这个DOCTYPE的最后一部分("DTD/xhtml1-strict.dtd").你会发现这是一个对W3C站点的相对链接。这是在W3C站点上的而不是你的。所以这个URI对浏览器没有作用。(sconf注:当你访问W3.org时,由于这是一个相对链接,所以才起作用)。

这个DOCTYPE实际上应该改成:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
注意到后面的DOCTYPE包含了一个完整的URI。这样一来就显示了一个网络上的有效资源,浏览器就可以找到它,并把你的文档解析成标准适应(standards–compliant)型。

如何使用DOCTYPE(DOCTYPES THAT WORK)

那么DOCTYPE是该如何使用呢?很高兴你会这样问。下面完整的DOCTYPE就是我们所需要的:

HTML 4.01 严谨型,过渡型,框架型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 严谨型,过渡型,框架型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
<!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 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

时间: 2024-09-22 22:16:13

学习Web标准 给你的网页选择合适的文档类型的相关文章

学习网页Web标准:DOCTYPE(文档类型)基础知识

web|web标准|网页 DOCTYPE(文档类型)DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本. 他们是什么和他们为什么是重要的? 所有的HTML和XHTML文档必须有一个有效的doctype声明. Doctype规定了文档使用的HTML或XHTML的版本. 当校验的时候doctype被校验器使用,WEB浏览器通过它来决定那种渲染模式被使用. Doctype影响设备渲染web页面的方式. 如果文档使用了正确的doctype,一些浏

Web标准:文档类型和网页浏览器

原文: http://www.alistapart.com/articles/beyonddoctype 作者:Aaron Gustafson .Com  译者:zhaozy in 3user.com .Com 转载请注明作者和译者信息,谢谢! 进步总是要有代价的. 对网页浏览器来说, 由于开发者像是宣传真理一样的拍着胸部担保着一些编辑器和浏览器(特别是Internet Explorer), 用户们为此花费很多的成本. 而当这个浏览器推出了一个新版本, 然后又修正了之前版本的一些错误和对规范的误

怎样一步一步学习web标准?

web|web标准  很多经典论坛网页标准化版的版友问这个问题,我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结. Step 1.不要一味使用DW等工具设计网页,去熟悉(X)HTML语言和CSS语言 因为web标准对代码的要求提高了,没有对xhtml代码没有一定的了解是无法通过校检的.DW工具也可以使用,但是要看着代码写网页了.首先是xhtml代码,不是很多,知道他们如何使用,怎么正确书写,而且要记得封闭tag.如<img/><br/>.建议看看一些html

学习WEB标准请先忘掉DIV+CSS

css|web|web标准 为什么说要忘记DIV+CSS? 我相信大家都懂HTML吧?大家应该很清楚什么DIV,他和CSS压根不是一种东西,不是一个级别的! 国内现在很流行用DIV+CSS来代表XHTML,来代表XHTML+CSS.这从根本上就有误导性.难道我们在写网页代码的时候就只使用DIV么?TABLE呢?UL呢?P呢?H1, H2就都不用了么? 绝对不是这样!XHTML+CSS首要的是放弃用TABLE来给网页布局,而改使用CSS.而该使用TABLE的地方还是要使用的.WEB标准并不是简单的

学习web标准:Web标准中的特殊字符

在最开始学习web标准的时候有这么一条: 把所有<和&特殊符号用编码表示 :任何小于号(<),不是标签的一部分,都必须被编码为& l t ; 任何大于号(>),不是标签的一部分,都必须被编码为& g t ;任何与号(&),不是实体的一部分的,都必须被编码为& a m p;注:以上字符之间无空格. 而在我们平时的工作中经常会遇到这种情况: 更多>> 国内的同行大多是写两个大于号>>或者干脆就写>>(更夸张的是有人为

解决方案-用safari打开网页时将pdf文档内置于网页中显示

问题描述 用safari打开网页时将pdf文档内置于网页中显示 ASP.NET网站 ,有个页面用iframe内嵌了一个PDF文档 通过 后台处理 showPdf.Attributes.Add(src,PdfFilePath); //PdfFilePath为pdf文件路径 D:File123.pdf 用IE浏览器打开此页面时,PDF内嵌在网页中显示,像百度文库一样(因为有在PDF阅读器中设置允许在Web浏览器中显示) 上面这种情况是能搞定的 但是现在系统需要在移动设备iPAD上显示,用safari

基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览的还是比较少,这里的Office文档包括了Word.Excel.PPT文档.本文介绍两种方式,一种方式是通过在线预览的方式,利用微软的平台进行Office文档的在线查看:一种是把Office文档生成HTML文件后进行查看.然后对比他们的优缺点,并进行总结. 1.利用微软的平台进行Office文档的在

新版edge网页浏览器编辑office文档技巧

  新版edge网页浏览器编辑office文档技巧.Windows 10 Insider迎来了Build 14366版本更新,这次最大的变化要数edge网页浏览器的功能,edge浏览器新增在线office文档编辑功能,一起来参考win10edge浏览器怎么编辑office教程. 新版edge网页浏览器编辑office文档技巧 Windows 10 Insider升级到了Build 14366. 这个版本中,Microsoft Edge浏览器迎来一个重要更新,可以Office在线编辑功能,用户可通

activex控件练习,实现在网页上读取一个文档中的内容但是无法实现

问题描述 activex控件练习,实现在网页上读取一个文档中的内容但是无法实现 char CTest_01Ctrl::Readfile(char* pathname) { AFX_MANAGE_STATE(AfxGetStaticModuleState()); // TODO: Add your dispatch handler code herechar a[100]; char a[100]; char str; //char s[80]; int i=0; ifstream infile;