网页的DOCTYPE声明的作用

<div class="content">

<p>DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”，在Web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的XHTML网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。</p>
<p>&lt;!DOCTYPE&gt;声明位于位于HTML文档中的第一行，处于 &lt;html&gt; 标签之前。在HTML中 doctype 有两个主要目的。</p>
<p>1）对文档进行有效性验证。</p>
<p>它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。</p>
<p>2）决定浏览器的呈现模式</p>
<p>对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响html 排版布局。浏览器有三种方式解析HTML文档。</p>
<ul>
<li>非怪异（标准）模式</li>
<li>怪异模式</li>
<li>部分怪异（近乎标准）模式</li>
</ul>
<p>DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。</p>
<p><strong>HTML DOCTYPE文档类型举例说明</strong></p>
<p>HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597b0533997471" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597b0533997471-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597b0533997471-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">HTML </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD HTML 4.01 Transitional//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/html4/loose.dtd"</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签（例如：font、b等），不可以使用框架</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597ce633073691" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597ce633073691-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597ce633073691-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">HTML </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD HTML 4.01//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/html4/strict.dtd"</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597d5062098317" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597d5062098317-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597d5062098317-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">HTML </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD HTML 4.01 Frameset//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/html4/frameset.dtd"</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架（推荐使用）</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597db276920181" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597db276920181-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597db276920181-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">html </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签（例如：font、b），不可以使用框架</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597e1177317739" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597e1177317739-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597e1177317739-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">html </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD XHTML 1.0 Strict//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597e7872344010" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597e7872344010-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597e7872344010-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">html </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD XHTML 1.0 Frameset//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597ed194534004" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597ed194534004-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597ed194534004-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">html </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD XHTML 1.1//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>HTML5文档类型</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597f2683889803" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码" style="display: none;"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597f2683889803-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597f2683889803-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-v">html</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0004 seconds] -->
<p><strong>&lt;!DOCTYPE&gt;的用法</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->


<div id="crayon-57c794c9597f8802258400" class="crayon-syntax crayon-theme-github crayon-font-courier-new crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style="margin: 12px; font-size: 14px !important; line-height: 16px !important; height: auto;">

<div class="crayon-toolbar" data-settings=" show" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 14px !important;height: 21px !important; line-height: 21px !important;"><div class="crayon-button crayon-nums-button crayon-pressed" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div>
<div class="crayon-info" style="min-height: 19.6px !important; line-height: 19.6px !important;"></div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 16px !important;"><div class="crayon-num" data-line="crayon-57c794c9597f8802258400-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 16px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-57c794c9597f8802258400-1"><span class="crayon-o">&lt;</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">html </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD XHTML 1.0 Strict//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="crayon-o">&gt;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div>
<!-- [Format Time: 0.0006 seconds] -->
<p>解析：在上面的声明中，声明了文档的根元素是 html，它在公共标识符被定义为 “-//W3C//DTD XHTML 1.0 Strict//EN” 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。</p>
<ul>
<li>-：表示组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。+为默认,表示组织名称已注册。</li>
<li>DTD：指定公开文本类，即所引用的对象类型。 默认为DTD。</li>
<li>HTML：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML。</li>
<li>URL：指定所引用对象的位置。</li>
<li>Strict：排除所有 W3C 专家希望逐步淘汰的代表性属性和元素。</li>
</ul>
<p>HTML5 为什么只需要写 &lt;!DOCTYPE HTML&gt;？</p>
<p>HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。</p>
<p>参考链接：https://zh.wikipedia.org/wiki/SGML</p>
                    <div class="article-copyright"><i class="fa fa-share-alt"></i> 码字很辛苦，转载请注明来自<b><a href="http://www.biaodianfu.com">标点符</a></b>的<a href="http://www.biaodianfu.com/doctype.html">《网页的DOCTYPE声明的作用》</a></div>
<div class="action-share bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1472697552320">分享到：<a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a><a class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a><a class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a class="bds_mail" data-cmd="mail" title="分享到邮件分享"></a><a class="bds_copy" data-cmd="copy" title="分享到复制网址"></a><a class="bds_more" data-cmd="more">更多</a> (<a class="bds_count" data-cmd="count" title="累计分享3次">3</a>)</div>
                                </div>