DOCTYPEって一体何なの？ドキュメントモードとは一体何ですか？ _html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

DOCTYPEって一体何なの？ドキュメントモードとは一体何ですか？ _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:44 AM

!DOCTYPE

!DOCTYPEとは:

ブラウザが予期されるドキュメントタイプを理解し、それを渡す場所をブラウザに指示できるように、すべてのHTMLドキュメントでDOCTYPEを指定することが非常に重要です。ドキュメント (HTML や .html など) を解析するための仕様 (ドキュメントタイプ定義 DTD)。

HTML 4.01のdoctypeは、HTML 4.01がSGMLに基づいているため、DTDへの参照を必要とします。 HTML 5 は SGML に基づいていないため、DTD を参照する必要はありませんが、ブラウザの動作を標準化するために doctype が必要です (html 5 はこの宣言を簡素化し、統一された標準を使用するようにブラウザに指示することを目的としています。この統一されたどこでできるのか)私は基準を見つけました、

www.w3.org

）。一般的な DOCTYPE は次のとおりです:

HTML4.01 strict：不允许使用表现性、废弃元素（如font）以及frameset。声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML4.01 Transitional:允许使用表现性、废弃元素（如font），不允许使用frameset。声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML4.01 Frameset:允许表现性元素，废气元素以及frameset。声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML文档。声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML1.0 Transitional:允许使用表现性、废弃元素，不允许frameset，文档必须是结构良好的XMl文档。声明： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset:允许使用表现性、废弃元素以及frameset，文档必须是结构良好的XML文档。声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">HTML 5: <!doctype html>

ログイン後にコピー

HTML5 の !doctype は大文字と小文字を区別しません

私の DW のデフォルトの宣言テンプレートは次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ログイン後にコピー

私の Webstrom のミディアムデフォルトのテンプレートは次のようなものです:

すごいです

最新のブラウザでは、さまざまなモードが必要です。

インターフェース構造が混乱しないように、古代の HTML インターフェースを提示するだけでなく、

W3C 標準インターフェースも提示する必要があります:

1: 標準の表示方法is---標準モード(

strict

)、

2: 非標準の表示方法---奇妙なモード(未定義の

doctypeやdoctypeerrorなど)はインターフェースを変更します。 )、

3: 標準と非標準の両方を表示可能 (移行ドキュメントタイプ定義

transitional)

HTML 3.2

1997年1月14日

HTML 4.0

1998年5月24日

XHTML仕様とタイムライン: 推奨XHTML 1.0 リビジョン

HTML 4.01 1999年12月24日
	仕様
ドラフト/提案

2002 年 8 月 1 日

4月10日、2001 2000年12月19日2007年2月22日XHTML 2.0 2006 年 7 月 26 日 XLinkHLink

XHTML 1.1

2001年5月31日

XHTMLモジュール

XHTML モジュール 1.1

2006 年 7 月 5 日

XHTML Basic

XHTML Basic 1.1

2006年7月5日

XHTML イベント

10 月 14 , 2003

XHTML イベント 2

2007 年 2 月 16 日

XHTML Print

2006 年 9 月 20 日

XHTML メディアタイプ

2002年8月1日

XForms 1.0

2003 10 3月14日

2001 年 6 月 27 日

2002年9月13日

　　!DOCTYPE切换也许是让浏览器进入正确呈现模式并正确显示网页的一种有效手段，前提是你注意到了各种浏览器的不一致，并能积极主动地避免各种问题。

　　一般来说 !DOCTYPE后面会有一个包含命名空间的html标签：

<html xmlns="http://www.w3.org/1999/xhtml">

ログイン後にコピー

　　xmlns是XHTML namespace的缩写。
　　作用：由于xml允许定义自己的标记，但你定义的标记和其他人定义的标记有可能相同，但表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生，xml采用名字空间声明，允许你通过一个网址来识别你的标记。
　　XHTML是HTML先xml过度的标记语言，它需要符合xml文档规则，因此，也需要定义名字空间，又因为XHTML1.0不能自定义标识，所以，它的名字空间都相同，就是：http://www.w3.org/1999/xhtml

额外资料：文档模式

　　参考自：打开

　　文档模式也回影响到文档类型, 与结伴影响文档模式 ;

　　所有IE浏览器在默认情况下（与均没有），是采用怪异模式（Quirks）；当有时，均采用浏览器版本对应的标准模式（如IE8就采用IE8标准模式，IE11就采用IE11标准模式）。

　　现在要注意的是，当出现时，文档模式将会如何呢？我们首先了解一下IE11下它的content属性值范围吧，具体范围如下：

　　 IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 IE=Edge

　　1. IE=5：表示采用怪异模式；

　　2. IE=7等纯数字的值：表示采用对应IE版本的标准模式，即使不是以作为文档第一行，文档模式依旧使用标准模式；

　　3. IE=EmulateIE7等含EmulateIE字符串的值：表示采用模拟对应IE版本的模式，如果是以作为文档第一行则采用该版本的标准模式，否则采用怪异模式。

　　4. IE=Edge：表示采用浏览器自身版本的文档模式，如IE11，以作为文档第一行则采用IE11标准模式，否则采用怪异模式。

　　IE的怪异模式：

　　IE进入backCompat的模式的方式，常见的原因有

　　1：DOCTYPE写错了，

　　2：DOCTYPE没有写，

　　3：DOCTYPE前面有别的字符;

　　....

　　实例：

_____<!DeeeeeeeeeeeOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitionaleeeeeeeeee//EN" "http://www.ssssssssw3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><style>body{    margin:0;    padding:0;    width:1000px;    padding:200px;}</style><body>    <div id="div0"></div>    <script>        function getStyle(el, prop) {            return el.currentStyle[prop];        };        var node = document.createElement("div");        node.innerHTML = document.compatMode ;//         document.body.appendChild( node );        node = document.createElement("div");        node.innerHTML = document.getElementsByTagName("body")[0].offsetWidth;        document.body.appendChild( node );    </script></body></html>

ログイン後にコピー

　　IE兼容模式开启的话，相对于当前的界面会以IE5.5的方式进行渲染，如果IE浏览器以IE5.5的方式进行解析，会导致以下问题;

盒模型：

在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型：在 IE 盒模型中， box width = content width + padding left + padding right + border left + border right， box height = content height + padding top + padding bottom + border top + border bottom。而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。
图片元素的垂直对齐方式:

对于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 属性默认取值为baseline。而当inline元素的内容只有图片时，如table的单元格table-cell。在 IE Quirks Mode 下，table单元格中的图片的 vertical-align 属性默认为bottom，因此，在图片底部会有几像素的空间。

元素中的字体:

CSS 中，描述font的属性有font-family，font-size，font-style，font-weigh,上述属性都是可以继承的。而在 IE Quirks Mode 下，对于table 元素，字体的某些属性将不会从body或其他封闭元素继承到table中，特别是 font-size属性。

内联元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 IE Quirks Mode 下，定义这些元素的width和height 属性，能够影响该元素显示的大小尺寸。

元素的百分比高度:

CSS の要素の高さのパーセンテージは次のように指定されます。パーセンテージは要素を含むブロックの高さであり、負の値にすることはできません。含まれるブロックの高さが明示的に指定されていない場合、この値は「auto」と同等になります (つまり、コンテンツの高さに依存します)。したがって、親要素に宣言された高さがある場合は、高さのパーセンテージを使用する必要があります。

要素で高さのパーセンテージが使用されている場合、IE 標準モードでは高さはコンテンツに応じて変化しますが、Quirks モードでは高さのパーセンテージが正しく適用されます。

要素のオーバーフローの処理:

IE 標準モードでは、オーバーフローはデフォルト値を取得します。つまり、オーバーフローは表示されます。この場合、オーバーフローのコンテンツは切り取られず、オーバーフローの外側に表示されます。要素フレーム。 Quirks モードでは、オーバーフローは拡張ボックスとして扱われます。つまり、要素のサイズはそのコンテンツによって決まり、オーバーフローはクリップされず、要素ボックスはオーバーフローコンテンツを含むように自動的に調整されます。

ドキュメントモードに関する参考資料: open

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。