HTML文档的DOCTYPE声明，是每个网页文件的第一行代码，它直接决定了浏览器以何种模式来渲染页面——标准模式还是怪异模式。别看它只是一行简单的声明，里面涉及的细节和规范，其实比不少开发者想象的要复杂。下面，就来系统梳理一下这些关键内容。

DOCTYPE

DOCTYPE（Document Type，文档类型）声明位于文档最前面、标签之前，用来告知浏览器当前文档使用的是哪种HTML或XHTML规范。如果这一行写错了，或者前面出现了多余的空格、字符，浏览器（尤其是IE）就可能进入“怪异模式”渲染页面，导致布局错乱。

DTD

DTD（Document Type Definition，文档类型定义）声明以开头，不区分大小写，前面不能有任何内容（空格除外）。公共DTD的名称格式为：注册//组织//类型 标签//语言。其中，“注册”表示该组织是否由国际标准化组织（ISO）注册，+表示是，-表示否；“组织”即组织名称，例如W3C；“类型”一般是DTD；“标签”是指定公开文本的唯一描述性名称，可附带版本号；最后“语言”是DTD语言的ISO 639标识符，例如EN表示英文，ZH表示中文。

XHTML 1.0 可声明三种DTD类型，分别对应严格版本、过渡版本以及基于框架的HTML文档。

HTML 4.01 strict

HTML 4.01 Transitional

HTML 4.01 Frameset

HTML5文档类型

到了HTML5，DOCTYPE声明变得极其简洁，不区分大小写：

meta

声明文档使用的字符编码，在HTML5之前是这样写的：

HTML5中简化为：

SEO优化

页面标题：

页面描述：

关键字：

网页作者：

网页搜索引擎索引方式：

其中，follow表示跟踪链接并分析目标网页（默认行为）；index表示将网页编入索引（默认行为）；noodp表示不使用Open Directory Project来创建内容描述；noydir表示不使用Yahoo Directory来创建内容描述；noarchive表示不允许搜索引擎显示内容的缓存版本；cache表示允许显示缓存版本；nocache也表示不允许显示缓存版本。

标签

HTML5新增的语义化标签，能够更清晰地定义文档结构：

  
    
    
  
  
    

      
html5 demo
      
        

          
na v1
          
na v2
        
      
    
    

      
article aside
      
article
      
    

    
  

HTML5的标签体系更加丰富和完善，

@charset "utf-8";
html{margin:0;padding:0;border:0}
a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,na v,object,ol,p,pre,q,section,p,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,na v,section{display:block}
body{line-height:1.5;background:#fff}
table{border-collapse:separate;border-spacing:0}
caption,td,th{text-align:left;font-weight:400;float:none!important}
table,td,th{vertical-align:middle}
blockquote:after,blockquote:before,q:after,q:before{content:''}
blockquote,q{quotes:"" ""}
a img{border:none}
a{text-decoration:none}
:focus{outline:0}