html学习一（html简史及doctype）

时间 2019-11-10

标签 html 学习简史 doctype 栏目 HTML 繁體版

原文原文链接

html3部分
- doctype（html）
  - 　　dtd
- head
- body

1、深刻浅出HTML与XHTML的区别php

　　HTML（HyperText Markup Language，超文本标记语言）最先的HTML官方正式规范，是1995年IETF（Internet Engineering Task Force，因特网工程任务组）发布的HTML 2.0。W3C（World Wide Web Consortium，万维网联盟）继IETF以后，对HTML进行了几回升级，直至1999年发布HTML 4.01。

　　 HTML与XHTML

　　可扩展超文本标记语言XHTML（eXtensible HyperText Markup Language），是HTML 4.01的第一个修订版本，是「3种HTML4文件根据XML1.0标准重组」而成的。也就是说是，XHTML是HTML 4.01和XML1.0的杂交。

　　因为XHTML1.0是基于HTML4.01的，并无引入任何新标签或属性（XHTML能够看做是HTML的一个子集），表现方式与超文本标记语言HTML相似，只是语法上更加严格，几乎全部的网页浏览器在正确解析HTML的同时，可兼容XHTML。

如：XHTML中全部的标签必须小写，全部标签必须闭合，每个属性都必须使用引号包住。 要写成 ，不能写为 （同hr）；使用了以后必须有一个以结束段落。

　　 HTML与XML

　　HTML是一种基于标准通用标记语言（SGML）的应用，而XHTML则基于可扩展标记语言（XML），HTML和XHTML实际上是平行发展的两个标准。本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。创建XHTML的目的就是实现HTML向XML的过渡。

　　XML设计用来传送及携带数据信息，不用来表现或展现数据，HTML语言则用来表现数据。RSS和ATOM目前已经成为成功的XML应用，RSS使用XML做为彼此共享内容的标准方式。它表明了Really Simple Syndication（或RDF Site Summary，RDF站点摘要）。它能让别人很容易的发现你已经更新了你的站点。Atom数据源彷佛较少了些；对开发者来讲，RSS相对简单，Atom稍显复杂，特别是若是不熟悉XML。

　　1997年，W3C在发布XML1.0标准时，HTML的版本已经到了4。直到2000年1月26日XHTML1.0成为W3C的推荐标准。不过，鉴于当时HTML一统天下的现状，W3C只好建议」继续使用HTML4.01和积极地研究HTML5及XHTML的计划」。2002年W3C指出XHTML家族将会是Internet的新阶段，并又着手开发XHTML2，旨在把Web引向创建在XML之上的无比光明的美好将来。

　　 HTML5大行其道

　　因为本来XHTML只是在内容结构上改进原有的HTML系统，XHTML2.0也仅仅在XHTML1.1的基础上更加注重页面规范和可用性，缺少交互性。在这个Web App大行其道的年代，XHTML2有些OUT了，因而就催生了HTML5。

　　W3C无视Web设计人员的需求，仅从理论角度闭门造车，却扛着标准的大旗，引起了来自Opera、Apple以及Mozilla等浏览器厂商的反对声音。2004年，他们组建了一个以推进网络HTML5标准为目的的组织——网页超文本技术工做小组（Web Hypertext Application Technology Working Group，缩写为WHATWG）。

　　 HTML5和XHTML2的竞争

　　HTML5目标是取代1999年所制定的HTML4.01和XHTML1.0标准，旨在提升网页性能，增长页面交互。HTML5吸收了XHTML2一些建议，包括一些用来改善文档结构的功能，好比，新的HTML标签header、footer、dialog、aside、figure等的使用，将使内容创做者更加语义地建立文档，以前的开发者在这些场合是一概使用div的。

　　W3C与WHATWG双方通过多年努力，终于在2006年达成妥协。2006年10月，Web之父、万维网联盟（W3C）主席、美国国家科学院院士蒂姆·伯纳斯-李（Tim Berners-Lee）发表了一篇博客文章表示，从HTML走向XML的路是行不通的（XHTML is dead）。2009年W3C明智的放弃了改进XHTML2.0标准的计划，选择了WHATWG的成果做为基础。事实上，XHTML在2002年更新以后的数年时间里，尽管发现了众多问题，但都没有去修改过。

　　2011年，Google工程师兼HTML5标准编辑的Ian Hickson称，HTML5将是最后一个带版本号的HTML语言。他表示，HTML语言将成为一个活的标准。

2、<!DOCTYPE>css

Document Type 文档类型，缩写成DOCTYPE，在html中它就是个标签：<!DOCTYPE>，它有本身的声明格式，不是在html标签前加上它就完事了的，查看qq.com页面源码可见以下声明：html

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

DOCTYPE 包含 6 部分：chrome

字符串“<!DOCTYPE”
根元素通用标识符“HTML”
字符串“PUBLIC”
被引号括起来的公共标识符（publicId）
被引号括起来的系统标识符（systemId）重点在这里，继续往下看
字符串“>”

看上去蛮复杂的，不用去纠结，通常只有三种（Strict Transitional Frameset）声明（以XHTML为例）浏览器

XHTML Strict DTD-要求严格的DTD，你不能使用任何表现层的标识和属性（交给css来表现），例如 ；可以使html很是的干净。

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

XHTML Transitional DTD-要求很是宽松的DTD，它容许你继续使用HTML4.01的标识(可是要符合xhtml的写法)

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

XHTML Frameset DTD-当您但愿使用框架时，请使用此 DTD！

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

HTML的语法就很是宽松了，他的DTD也分为同样的三种。

HTML 4.01 Strict DTD （严格的文档类定义）不能包含已过期的元素（或属性）和框架元素。对于使用了这类DTD的文档，使用以下文档声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD（过渡的文档类定义）能包含已过期的元素和属性但不能包含框架元素。对于使用了这类DTD的文档，使用以下文档声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD（框架集文档类定义）。能包含已过期的元素和框架元素。对于使用了这类DTD的文档，使用以下文档声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

简单举例说说strict和transitional的不一样，按照XHTML Strict DTD的规定（看DTD内容），th标签是不能有width属性的，但transitional能够有网络

在XHTML Strict DTD声明的html中出现th标签属性width时，则会出现警告信息(以下图)，改为transitional dta就不会出现警告app

Doctype起啥做用? 框架

上面也提到，Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，上文说到的DOCTYPE组成中的第5部分所引入的dtd文件则包含了标记、attributes 、properties、约束规则。除此外，Doctype还会对浏览器的渲染模式产生影响，不一样的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析，因此Doctype是很是关键的，尤为是在 IE 系列浏览器中，由DOCTYPE 所决定的 HTML 页面的渲染模式相当重要。ide

两种渲染模式：布局

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

长话短说两种渲染模式的由来，好久之前W3C标准没出现的时候，江湖很混乱，页面上根本就没有doctype这个东西，乱世出英雄啊，w3c标准出现后页面上就有了doctype，为了照顾老前辈的页面（没有doctype或使用HTML4如下[不包括HTML4]的DTD声明），怪异模式就出现了，保证古董页面能正常显示；江湖统一以后，你们都开始使用w3c标准，这就是标准模式。

测试ie 八、 ff十、 chrome16的渲染模式，测试文档以下：（只是给予直观感觉，并不是全面周到的测试）

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

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

      <!--未声明DOCTYPE-->

      <script>document.write(document.compatMode);</script>

</body>

</html>

结果为：

IE 8.0：BackCompat Firefox 10.0：BackCompat Chrome 16.0：BackCompat

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

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

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

      <!--声明DOCTYPE-->

      <script>document.write(document.compatMode);</script>

</body>

</html>

结果为：

IE 8.0：CSS1Compat Firefox 10.0：CSS1Compat Chrome 16.0：CSS1Compat

说了半天的doctype对渲染模式的影响，有什么用呢？不一样的渲染模式对CSS2.1规范的解析有很大差别，尤为是对盒模型的解释，因此咱们的目标是如何声明doctype以使咱们的页面被以标准模式解析，这是关键。

Doctype的选择！！

上面已经提到，页面中的Doctype的声明会影响浏览器的渲染模式，渲染模式又跟页面最终的呈现效果息息相关，因此尽可能选择那些能“激活”主流浏览器标准模型的Doctype。

[from KB001: 兼容性问题与浏览器的内核及渲染模式]

表中提到了“近似标准模式”

近似标准模式（Almost Standards Mode）从字面意思上看与标准模式很是相似，但确实有小的差异。主要体如今对于表格单元格内垂直方向布局渲染差别。IE8 开始、Firefox、Chrome、Safari、Opera 7.5 开始，这些浏览器的标准模式更加严格的遵循了 CSS2.1 规范，故对于在目前看来不太“标准”的之前的标准模式，被赋予了“近似标准模式”的名字。可是在较早的 IE6 IE7 以及 Opera 7.5 以前版本中，浏览器没法严格遵循 CSS2.1 规范，故对于它们来讲没有这个近似标准模式，也能够理解为它们的近似标准模式就是标准模式。

至于如何选择，参考表格天然明白，不用废话了！

参考资料很重要！！

【HTML <!DOCTYPE> 标签】http://www.w3cschool.cn/tag_doctype.html

【CS002: DOCTYPE 与浏览器模式分析】http://w3help.org/zh-cn/casestudies/002

【KB001: 兼容性问题与浏览器的内核及渲染模式】http://w3help.org/zh-cn/kb/001

html学习一（html简史及doctype）

XHTML Strict DTD-要求严格的DTD，你不能使用任何表现层的标识和属性（交给css来表现），例如<br>；可以使html很是的干净。

XHTML Transitional DTD-要求很是宽松的DTD，它容许你继续使用HTML4.01的标识(可是要符合xhtml的写法)

XHTML Frameset DTD-当您但愿使用框架时，请使用此 DTD！