从HTML到HTML

当你在使用一些模板软件，如Thymeleaf的时候，了解web的标准，HTML家族的内部是十分重要的，至少如果你想知道自己在做什么的时候。

问题是，每个人都知道他们正在使用一些技术创建一个网站，但却并不知道这些技术来自何处，自从第一个web项目开始，此后的每一个技术都深刻的改变着我的开发所做的工作，和我们的知识。

现在，随着Html5的到来，事情变得更加复杂，HTML5是什么，为什么使它，而不是XHTML，不是说html的Tag Soup是糟糕的么？

所以，现在让我们后退一步，看看我们是如何，为什么达到现在这样的。

在90年代，是这样的HTML

HTML是一个标准(准确的说，是一个推荐标准)，由W3C进行维护。是基于SGML的扩展，HTML定义了一个基于表情的标记语言，可以表现丰富的超文本文件，使用http协议连接各种服务和资源在网络上。

HTTP通过header来定义如何定义和使用服务。Content-Type是一个非常重要的header。它告诉浏览器发送的内容是什么样的类型,使用MIME表示，其中，用来描述HTML的MIME为 text/html:
Content-Type: text/html

HTML定义了一些方法来检测HTML标签是否有效，有效的意思是符合HTML规则，如它定义了哪些标签可以出现哪些属性，哪些标签可以出现在哪些位置等

这些文档的验证规则定义是基于SGML文档的DTD，并且为每个版本的HTML创建标准DTD，HTML文档必须声明符合其标准的DTD，并且在文档的第一行，一个标准的声明格式：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOM和TagSoup

浏览器的主要供当然是通过HTML显示文档，在上世纪90年代，浏览器公司竞争激烈，都想提供更多酷炫的功能来吸引更多的客户，但由于HTML的格式定义规则，所以只能提供其他的功能来发挥开发者的想象力。

在浏览器中出现的最令人关注的想法，当然是客户端的交互性，它使用JavaScript来实现，这些脚步可以处理，修改，和执行所显示的文档上某部分的事件。为此，浏览器在内存中创建了一个HTML文档对象模型的，通过树型结构，记录了每一个节点的状态和事件，到此，DOM也就诞生了。

问题是，HTML的规则比较宽松，而DOM树有着严格的层次结构，因此，不同浏览器对HTML标签的序列和位置有着不同的解释，会产生不同的DOM树，再加上这些浏览器对DOM节点的建模方式有着不同的API（不同的名字，事件等），你会感觉到，当时如果想创建一个跨浏览器的交互，会是多么的困难。

更重要的是：当这一切发生的时候，浏览器却对HTML的作者表现了极大的宽容，当他们写了不正确的HTML文档（Tag soups）的时候会自动的纠正这些错误。但是，这却导致了HTML的作者创建了更多形式的HTML文档，然后浏览器允许这种写法甚至更多，形成一种恶性循环。你猜结果如何：每个浏览器都用不同的方式纠正这这些错！偶买噶。

在浏览器的DOM API中，W3C给出的最终标准是JavaScript（由于某些原因，W3C坚持称他为ECMAScript）。但是，由于标准执行的缓慢，和向后兼容等问题，Tag soups所带来的破坏，仍然影响着我们创建一个web应用的方式。

使用XML

在HTML大行其道的时候，W3C开发了一种新的语言形式，叫xml，为的是针对通用的数据（不只是web），能够分层级的标记文本。

XML是可扩展的，它允许根据特定的目的定制目标语言（标签或属性），以适应不同的需求，但是，HTML文档并不能很好的从XML的方式形成，XML和HTML仍然是事实上的矛盾的语言，所以，不大可能从XML应用中扩展出html。

严格的分层，并且删除了HTML中的歧义结构，XML能够更直接的转换为DOM树（XML解析），同时，XML是一种基于文本的语言，基于文本是一种技术无关格式（非二进制），使得它特别适合于互联网上的数据跨平台交换，实际上，正是它导致了无处不在的WebService技术的诞生。

HTML+XML=XHTML

基于以上XML的明显的优点，使得它可以使web文档具有更好的扩展性和兼容性（例如，可以更方便的做出跨浏览器产品）所以，W3C决定基于XML而不是SGML修改HTML的方言，于是，XHTML诞生。

XHTML要求web的开发者书写符合XML规范的HTML文档，并定义了一些之前HTML没有的规则，如标签必须闭合，属性值必须在引号中等。

采用XHTML标准和将web文档采用XML规范通常视为一种进步。因为它可以允许浏览器采用更高级别的标准化，产生更少的错误，减少一些特定的浏览器使用的特定语句，并且，更容易页面自动化生成。

然而，采用XHTML有一个巨大争议的概念，来自XML的严格的错误格式检查，这意味着任何解释XML（包括现在的浏览器）在处理XML文档的时候，发现任何错误格式立即显示解释失败，而在实际中，表示为你只有两个选择，要么创建一个完全符合XML格式的文件，要么接受浏览器不能显示（事实上可以）的事实。

为了对XHTML进行验证，XHTML1.0定义了使用DOCTYPE声明的一组DTD定义，包括XHTML1.0 Strict（严格），XHTML1.0Transitiona（）过渡，XHTML1.0Frameset（框架）。第一个是纯粹的XHTML文档，不能使用任何HTML中的过时的，不推荐的标签，而第二个属于过渡文档，仍然支持不推荐使用的标签，第三个是一个XHTML的框架页。定义如下：

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

XHTML还有一个最重要的方面是，引入了一个新的MIME类型，这是一个WEB服务器定义的一个解析服务方式，用于高速浏览器使用XHTML解析引擎以替代原有的HTML解析方式。这个类型就是 application/xhtml+xml:

Content-Type: application/xhtml+xml

崩溃的现实

所以，一切看上去如此美好，我们只需要等待浏览器全面支持XHTML，让我们网络开发的世界就会变得更快乐...

而现实是，这些从来都没有发生过。

现实是，有过一个浏览器根本就拒绝导入对appliation/xhtml+xml的支持，猜猜是哪一个：IE！

在IE6，IE7，IE8中，当你试图显示一个XHTML类型的文件的时候，显示的是一个下载对话框，这当然意味这你不能使用它。当然，IE9的时候，是可以支持XHTML显示的，但显然，这个太晚了。

幸运的是，或者说不幸的是，XHTML1规则包括的附录中，说明了我们可以在过渡期间使用旧的text/html内容类型，这个带来了我们大多数人过去几年做的事情：创建XHTML1的文档，然后保存为text/html。鉴于XHTML1的规则在2000年就已经定义，这个过渡时间也太久了。

但事实是，当我们使用HTML替代XHTML的时候，浏览器将用HTML引擎来解析它，而无法使用XHTML的一些特性。尽管这个HTML引擎是由XHTML来激活的，但他仍然提供了向后兼容HTML4的代码（非常宽的兼容性），跟重要的是：他缺乏XHTML中的XML特征，所以，无法使用严格的错误检测。

如果无法使用严格的错误检测，浏览器的宽容引擎会让你形成格式不好的文档，并且自动纠正错误，如果你知道浏览器会用浏览器特定的方式，纠正你的错误，那么你可能永远不会改正这个文件。于是，HTML的恐怖故事仍将继续。

知道了这些，你可能从未真的创建过一个XHTML的网站，你创建了一个XTHML文档但发送并显示为普通的HTML。

但更糟的是，在2002年的XHTML1.1删除了使用HTML内容类型的可能性，只允许使用application/xhtml+xml.那么问题来了，可能他想迫使浏览器达成对XHTML的支持，但并没有发送，反而只是是XHTML1.1成为一个神话，反正只是听说过但没人使用过。

等到了2009年，W3C再次允许XHTML1.1使用text/html,但这太晚了。

为了HTML5：分裂的故事

在某些时刻（特别是2004年），一些浏览器厂商意识到现有的XHTML规范对于应对不断增加的网络需求（视音频，应用程序接口...），发展太过缓慢，同时，W3C日益推动着他们朝着更严格的方式创建文档，可能会结束渲染大量(恶意)的无用代码.

他们希望增强web程序的功能，如视频，音频，本地存储，或更先进的表单处理。事实上，现在也能做到这些，只需要在不同的浏览器中以特定的方式增加这些功能，但是，他们不想在使用这些不能再不同浏览器中共同使用的东西。他们需要包括这些功能在内的整个标准发展。

然后,在进化的过程中，仍然存在的标准的问题（即XHTML）：在很多的网站和应用程序中仍然是传统的html。如果那些很酷的新功能进行是以XHTML为基准的超严格的标准化方式，那么所有这些程序将均不能使用新功能，除非他们彻底进行改写。每个人都希望有一个兼容的标准的网络，但是都不能接受扔掉了数百万网站作者的历史工作。

所以这些浏览器制造商（以及其他人）提出了按W3C的思想进化HTML，已有的全部（大多数）HTML和XHTML代码仍然有效，同时，新的HTML语言将为web应用程序提供强大的新功能，更重要的是，他同时还将明确定义错误处理的方式。

这意味着：在遇到了错误的时候，不同浏览器会根据规范以同样的方式来自动修正web作者创建错误，有效的转换HTML代码（使用XML标准或者其他），进行充分的跨浏览器解析。您仍然会被推荐创建符合XML格式的代码，但如果你不喜欢或者项目中有大量的老标准的HTML代码，你仍然可以使用新的功能，看到有老的HTML站点？给他添加一些视频！这一切听起来都很明智。

但事实是，这一切听起来很好，但W3C在2004年拒绝了这个建议，并且决定去严格XHTML的规则,HTML已经死了就没有理由让他活过来，XHTML2.0才是未来。

于是，这导致了分裂，新概念HTML的支持者，一些包括Opera，Mozilla和Apple公司的人，离开了W3C，成立了Web Hypertext Application Technology Working Group（WHATWG）已确立了我们今天熟知的HTML5。

最后，在2007年，W3C创建了一个工作组为新一代HTML，并且联合WHATWG，有效的采用HTML5的工作规范和未来可交付成果。所以，W3C和WHATWG正联合创建HTML5标准，并且在2009年，W3C关闭了的XHTML2.0的工作组和其工作规范。

目前，HTML5将是未来唯一的web标准。

那么 什么是HTML5？

HTML5是一套基于当前HTML4和XHTML的，仍在发展的标准，主要规则和目标为：

  • 为HTML4添加一些先进的新功能，有效的使web开发理念从面向文档转向更加面向应用的理念，并稍微偏向了移动web开发。这种能力被称为HTML5特性，并通过标准对HTML5的核心进行了定义，除了某些特殊情况。HTML5的特性包括但不限于：视频，音频画布，地理位置，本地存储，离线存储和高级表单等。
  • 为从HTML和XHTML迁移提供了一条无痛苦的道路，使用很少或者不需要重写的代码即可为HTML5所采用。
  • 提供一个标准的方式处理代码错误，所有的不规范HTML5代码都将在所有的浏览器中使用同一个可预测的方式进行。

从实际的角度来看，这意味这（可能），你目前的HTML或XHTML代码转变为可识别的HTML5代码仅仅需要修改DOCTYPE到html5的定义

<!DOCTYPE html>

和发送内容的服务类型为 text/html

Content-type:text/html

这里你可能会奇怪：为什么DOCTYPE没有指定任何DTD？因为HTML5没有DTD，定义一个HTML5文件是否有效或不是的定义为人类可读的文本本身的规则，但不能使用DTD语言表达。

但这并不意味着一个HTML5的解释器或引擎无法进行验证，它可以，它只须有一部分软件特别用于HTML5的解析，用于执行所涉及的HTML5的验证（而不是从DTD中读取这些规则）即使现在的规则都是相当灵活的，但它仍然是一个规范，你必须遵守它。

但是如果没有DTD，那么为什么会有一条DOCTYPE的声明呢？因为DOCTYPE声明是为了使浏览器在标准模式下显示文件（而不是其它什么怪癖模式）。是一个有可能的最低限度的验证标准，这正是我们需要的，所以，他只是一个开关。

我们已经能用HTML5了么？

能，或者不能，尽管现在，你可以在浏览器中使用一些已经支持的HTML5特性，但还没有完全在所有的浏览器中实现所有的HTML5特性。即使已经支持的，也可能会改变，因为规范本身还处于持续的进化阶段。

说实话，完全的使用HTML5会花费一些时间。因为你不仅要等待一些浏览器实现所有的HTML5特性，但更多的时候，你还要等待你的用户升级浏览器来实现这件事，但是现在的情况是，大多数的公司和用户，仍然使用着ie6作为他们的浏览器，呃!

但不管怎样，有一点是可以肯定的：你可以切换DOCTYPE为HTML5的格式并且使用html5规则编辑文档。如果你觉得需要，你现在就可以动起来。

还有XHTML5？他真的存在么？

理论上，是的，XHTML5是于HTML5匹配：

Content-type:application/xhtml-xml

但是，这个类型目前不被IE支持，所以，在实际上，它是不存在的。

但要注意：HTML5和XHTML5的区别是ContentType 并且仅仅是ContentType，因为一个XML结构的HTML5文档，本身就是一个完全有效的HTML5文档。这和HTML4与XHTML1.1之间的关系完全不同，它们是不兼容的语言。

随机推荐

  1. 简单讲解MVC(视图/模型/控制器)

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...

  2. iOS去除导航栏和tabbar的1px横线

    1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线,主要是颜色太不协调了 去除之前的图片 要去除这1px的横线,首先应该知道它是什么,在Xcode的界面调试中可以看到,它其实是UIIm ...

  3. Android first --- 页面跳转及数据传递

    页面跳转即数据传递 创建第二个界面Acivity *需要在清单文件中添加配置一个Actuvity标签 标签中如果带有这个子节点,则会在Android中添加一个快捷图标 <intent-filte ...

  4. Android 秒级编译 Freeline

    http://mp.weixin.qq.com/s?__biz=MzA4NTQwNDcyMA==&mid=2650662410&idx=1&sn=c654fa7b0cc8c91 ...

  5. 7.dotnet core 如何发邮件

    需要用到的Nuget包 "MailKit": "1.8.1", 方法 /// <summary> /// 发送邮件(支持Html发送,支持添加一个附 ...

  6. 写在OpenFire

    首先,确保你已经关掉了openfire打开终端 (在应用程序-->实用工具-->)输入以下命令sudo rm -rf /Library/PreferencePanes/Openfire.p ...

  7. 微信小程序-上传下载

    wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...

  8. rgb转16进制 简单实现

    function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }

  9. Redis学习-基础环境介绍（二）

    1.通过VMware安装了Centos6.8系统 2.Reids安装过程,需要GCC环境 »通过下面命令,根据提示直接安装 1 yum install gcc 3.Redis选用的是3.2.4(建议使 ...

  10. div+css常见浏览器兼容问题以及解决办法

    1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图 ...