HTML和XHTML区别

HTML和XHTML

可扩展超文本标记语言XHTML(eXtensible HyperText Markup Language)是将超文本标记语言HTML（HyperText Markup Language）作为XML应用而重新定义的标准。

在HTML5标准中定义了两种语法（HTML 4.01和XHTML 1）。此标准中可以通过定义一个特殊的DOCTYPE标签来XHTML，但是并没有太多浏览器去实现这一标准。所以最后HTML5标准推翻了这个决定。

可以通过改变MIME类型（包含在HTTP请求中的Content-Type）来指示语法的选择：如果需要使用XHTML，MIME类型应该为application/xhtml+xml，MIME类型为text/ html则不使用XHTML。

适当的MIME类型必须存在于HTTP请求中的Content-Type中。如果只把MIME类型写在HTML标签中，如<meta http-equiv=…>，依然会被当作text/html执行。

HTML文档规范

HTTP/1.1 200 OK

Content-Type: text/html

<!DOCTYPE html>

<html lang=en>

  <head>

    <meta charset=utf-8>

    <title>HTML</title>

  </head>

  <body>

    <p>I am a HTML document</p>

  </body>

</html>

XHTML文档规范

HTTP/1.1 200 OK

Content-Type: application/xhtml+xml

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

  <head>

    <title>XHTML</title>

  </head>

  <body>

    <p>I am a XHTML document</p>

  </body>

</html>

XHTML兼容性

目前大多数浏览器都支持XHTML，其中包括Firefox、Chrome、Safari、Opera和IE浏览器（IE 9）。（Internet Explorer 8和旧浏览器在看到正确配置的XHTML MIME类型的XHTML文档时，会显示未知文件类型的下载对话框）。另外，有许多流行的JavaScript库和开发工具对XHTML也并不支持。

XHTML和HTML的区别

XHTML是XML应用，所以XHTNL的代码规范要求要比HTML更严格。但对于习惯HTML的程序员有时可能会带来一些不便，如比较语句a<b中的<会被解析为一个标签，造成代码运行与预期不符。为了应对这些问题，慢慢有了以下的规范：

1.JavaScript中`<`和`&`应包含在CDATA代码块中

在XHTML中JavaScript的闭合符不能在CDATA代码块以外的地方存在。如以下错误示例：

<script type="text/javascript">

  var i = 0;

  while (++i < 10)

  {

    // ...

  }

</script>

可以通过CDATA代码块的方式解决，如下例：

<script type="text/javascript">

<![CDATA[

  var i = 0;

  while (++i < 10)

  {

    // ...

  }

]]>

</script>

也有其他方法解决该问题，如将<替换为<。但这样减低了代码可读性，所以不推荐使用。

2.注释`<!—— ... ——>` 中注释内容不能再包含双破折号`——`

在XHTML中，以<!—— ... ——>形式注释的内容不应包含双破折号——，如以下错误示例：

<script type="text/javascript">

<!--

  var i;

  var sum = 0;

  for (i = 10; i > 0; --i)

  {

    sum += i;

  }

// -->

</script>

示例中以<!—— ... ——>形式注释的内容依然会被解析。在旧浏览器版本中，有经验的开发者在使用内联样式和内联脚本时通常会将其内容包含在注释中。如下例:

<style type="text/css">

 <!--

  body {background-color: blue; color: yellow;}

 -->

</style>

<script type="text/javascript">

 <!--

  var i = 0;

  var sum = 0;

  for (i = 0; i < 10; ++i)

  {

    sum += i;

  }

  alert('sum = ' + sum);

 // -->

</script>

这是因为在旧浏览器版本中，内联样式和内联脚本还未普及，使用style和script标签不会被正常解析，而是直接把标签的内容输出。如下例：

<script>

  var i = 0;

  alert(i);

</script>

这段JS代码在旧浏览器版本中，不会执行，而是直接输出以下内容：

var i = 0;

alert(i);

不过，目前现代浏览器都已经开始支持内联样式和内联脚本，所以一般不采用<!—— ... ——>形式注释来实现兼容旧浏览器这种写法。

参考文献

MDN —— Glossary XHTML

MDN —— Properly Using CSS and JavaScript in XHTML Documents