DTD与模式

简介: DTD与模式

文档验证机制(DTD)


  

DTD是html文件的验证机制,属于html文件组成的一部分。三种文档类型:S(Strict)、T(Transitional)、F(Frameset)。


  • Strict
    干净的标记,免于表现层的混乱。
  • Transitional
    DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时使用
  • Frameset
    DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD


HTML5简化了DTD,可以直接使用 <!DOCTYPE HTML>。


模式


  

模式主要是针对ie浏览器,在ie7以下,微软的代码规范与W3C制定的标准有所差别,但是ie市场占有率非常大,所以开发人员会按照微软的规范来编写代码,随着各大浏览器厂商的发展和W3C组织的努力,浏览器的标准化越来越明显。微软为了兼容ie6/7,在ie8浏览器增加了模式这个功能,这样就可以解决代码标准不一致而引起的问题。


image.png


模式分为两种一种是浏览器模式,一种是文档模式。这两种模式有什么区别呢?


  • 浏览器模式
    用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理(User-Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能,这样就可以向不同的浏览器返回不同的页面内容。默认情况下,IE8的浏览器模式为IE8。用户可以手动切换到不同的浏览器模式。
  • 文档模式
    用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载网页。切换浏览器模式的同时,浏览器也会自动切换到相应的文档模式。


对于文档模式,每个浏览器都有不同的工作模式


  IE6 IE7 IE8 IE9 IE10 Chrome Firefox Safari Opera
混杂模式(Quriks Mode)
接近标准模式(Almost Standards Mode)
标准模式(Standards Mode)


我们如何控制浏览器以何种文档模式来显示页面呢?


<meta http-equiv="X-UA-Compatible" content="IE=edge">


通过上面的代码用来指定IE浏览器以标准文档模式渲染页面,我们可以修改edge来指定特定版本,例如:IE=8


问什么要控制这个呢?很明显,加上这个元素能够告诉浏览器用什么模式来渲染页面,有时候我们在IE高版本的浏览器中显示正常,到了低版本排版就乱了,加上下面的和正确的DTD声明就可以了。


< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />


判断当前页面的文档模式


1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">
 6 </head>
 7 <body>
 8     <script>
 9         function detect() {
10             var mode = document.documentMode;
11             switch (mode) {
12                 case  5:
13                     alert('Internet Explorer 5 quirks mode');
14                     break;
15                 case  7:
16                     alert('Internet Explorer 7 Standards mode');
17                     break;
18                 case 8:
19                     alert('Internet Explorer 8 Standards mode');
20                     break;
21                 case 9:
22                     alert('Internet Explorer 9 Standards mode');
23                     break;
24                 case 10:
25                     alert('Internet Explorer 10 Standards mode');
26                     break;
27             }
28 
29         }
30         detect();
31     </script>
32 </body>
33 </html>


S(标准模式)、A(接近标准模式)、Q(混杂模式)


Doctype NS6 Old Moz Moz &
Safari &
Opera 10
&
IE10
& HTML5
Opera 9.0 IE 8, IE 9 & Opera 9.5 IE 7 & Opera 7.10 IE 6 & Opera 7.0 Mac IE 5 Konq 3.2
None Q Q Q Q Q Q Q Q Q
<!DOCTYPE html> Q S S S S A A A  
<!DOCTYPE html SYSTEM "about:legacy-compat"> ? ? ? ? ? ? ? ?  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> S S S S S A A Q A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> S S A A A A A A Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> Q S A A A A A A Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Q Q Q Q A A A A Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> S S A A A A A A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
S S A A A A Q A Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> Q S S Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"> Q S S S S A A A Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN"> S S S Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN"> S S S S S A A A Q


PS:

  

Opera文档模式:http://www.opera.com/docs/specs/doctype/

 

Firefox文档模式:https://developer.mozilla.org/enUS/docs/Mozilla%27s_DOCTYPE_sniffing

  

IE8:http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx

相关文章
|
9月前
|
XML 存储 数据可视化
XML DTD原理及使用
是一种可扩展的标记语言,用于存储和交换数据,它被设计成具有简单、易于理解的格式,并能够方便地在不同的系统和应用程序之间共享数据。XML的语法规则类似于HTML,但XML的目的不仅仅是用于显示数据,更是用于描述数据的结构和关系。与HTML相比,XML更加严格和规范,它需要通过或RELAX NG等方式定义文档的结构,同时还可以使用命名空间和XSLT等技术来处理和转换XML文档。独立于任何特定的操作系统、平台或开发环境。可以与许多不同的编程语言和应用程序进行交互。
|
8月前
|
XML 存储 Java
XML之dtd
XML之dtd
76 0
|
6月前
|
XML 设计模式 数据格式
XML---dtd
XML---dtd
35 0
|
6月前
|
XML 存储 JSON
XML---dtd 完整详细
XML---dtd 完整详细
|
6月前
|
XML 存储 设计模式
XML以及DTD详解
XML以及DTD详解
87 0
|
8月前
|
XML 存储 消息中间件
XML DTD介绍以及应用
DTD介绍 文档类型定义(DTD)可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。 DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用。
31 0
|
8月前
|
XML 存储 数据格式
DTD及XML介绍
DTD及XML介绍
55 0
|
8月前
|
XML 存储 程序员
Xml-DTD约束
Xml-DTD约束
23 0
|
8月前
|
XML 存储 JSON
dtd介绍
dtd介绍
110 0
|
XML 运维 前端开发
【XML学习 二】DTD原理及使用
【XML学习 二】DTD原理及使用
63 0