xhtml开始使用xhtml


备注

本节概述了xhtml是什么,以及开发人员可能想要使用它的原因。

它还应该提到xhtml中的任何大型主题,并链接到相关主题。由于xhtml的Documentation是新的,您可能需要创建这些相关主题的初始版本。

版本

发布日期
XHTML 1.0 2000-01-26
XHTML 1.1 2001-05-31
XHTML 2.0 2006-08-31
XHTML 5 2014年10月28日

将XML添加到XHTML应用程序并从XHTML应用程序中检索XML

使用XHTML时,应该避免使用document.writeinnerHTML 等方法,因为它们将XML视为文本并且不能正确地序列化代码; HTML中的id 属性基本上被转储到DOM中,并且id 属性没有被序列化,这意味着当尝试使用诸如document.getElementById('example') 之类的东西引用它时,浏览器将不会“看到”id。以下示例 XHTML应用程序获取“获取”XHTML代码并将其“设置” XHTML应用程序。

将XHTML添加 DOM并 DOM中检索XML

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
</style>
<script type="application/javascript">
//<![CDATA[
function xml_get(target)
{
 return new XMLSerializer().serializeToString(target)
}

function xml_set(xml,position,target)
{
 if (typeof target=='string' && document.getElementById(target)) {target = document.getElementById(target);}

 if (!target) {alert('Error: target element was not found in the DOM.');}
 else if (position=='after')
 {
  if (target.nextSibling && target.nextSibling!='[object Text]') {target.insertBefore(xml.getElementsByTagName('*')[0],target.nextSibling);}
  else {target.parentNode.appendChild(xml.getElementsByTagName('*')[0]);}
 }
 else if (position=='before') {target.parentNode.insertBefore(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
 else if (position=='inside') {target.appendChild(document.importNode(xml.getElementsByTagName('*')[0],true));}
 else if (position=='replace') {target.parentNode.replaceChild(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
 else {alert('Error: unknown position to import data to: '+position+'.');}
}

window.onload = function(event)
{
 var xml_after = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>after</em> the h1[0] element!</p>','application/xml');
 var xml_before = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>before</em> the h1[0] element!</p>','application/xml');
 var xml_inside = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>inside</em> inside the element with the id <code>example</code>!</p>','application/xml');
 var xml_replace = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>replace</em> example!</p>','application/xml');
 xml_set(xml_after,'after',document.getElementsByTagName('h1')[0]);
 xml_set(xml_before,'before',document.getElementsByTagName('h1')[0]);
 xml_set(xml_inside,'inside','example');
 xml_set(xml_replace,'replace','example_replace');

 alert(xml_get(document));
}
//]]>
</script>
</head>

<body>

<h1><span>XHTML and JavaScript Simple Demonstration</span></h1>
<div id="example"></div>
<div id="example_replace"></div>

</body>
</html>
 

完整的XHTML和JavaScript示例

以下是使用XHTML和PHP作为单个文件提供的完整示例。

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
</style>
<script type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
 alert('This JavaScript alert will load once the page has loaded.');
}
//]]>
</script>
</head>

<body>

<h1><span>XHTML and JavaScript Simple Demonstration</span></h1>

</body>
</html>
 

安装或设置

XHTML与HTML的关系

XHTML只是HTML的序列化版本。 XHTML最初旨在清理HTML标记以更好地改进标准支持。不幸的是,W3C在XHTML 2.0上的工作并不直观,也没有影响整个行业的HTML5。虽然您可以使用XHTML5(XML序列化HTML5)进行微小修改,但XHTML5不是标准。下面提供了一些示例,以简化XHTML5的采用,并澄清HTML5标准中不考虑XML的模糊性。

XHTML的好处

因为XHTML使用浏览器的XML解析器,所以显着(尽管不是绝对)不太容易出现常见的编程错误。如果开发者使用加载XML格式不正确的浏览器大多渲染引擎的XHTML应用将呈现多达畸形XML而Gecko渲染引擎(Firefox中使用)将显示一个黄色网页。在所有情况下,都会显示一条错误消息,其中包含遇到第一个遇到的XML解析错误的行号和列号。许多开发人员犯了一些简单的错误,例如错过HTML属性的引用,这使得他们花费数天时间来确定为什么一个或两个浏览器没有按预期呈现HTML页面,使用XHTML可以大大缩短HTML的开发时间。 XHTML可能对学习代码的人学习Web开发有效的HTML,因为它不允许 XHTML应用程序在充满恶意代码,并通过提供新的开发人员可以搜索在线工作方案精确的错误信息呈现正强化。由于XHTML是XML的一个子集,因此与在各种工业,商业和住宅用途中使用XML的软件具有非常高的兼容性。最后由于它的严格要求,XHTML代码自动与HTML和XML兼容(主观上缺少多个相同的id 属性值),而HTML本身并不与HTML和XML的其他主体兼容,因为HTML代码可能不是很明显是畸形的

XHTML缺点

由于更严格的XML解析器规则,XHTML最初对于经验不足的开发人员来说并不那么容易。 XHTML不经常被各个组考虑,包含HTML5标准写得不好的部分的含糊不清,并且没有明确的验证器声明支持XHTML5。 XHTML与JavaScript的“懒惰”部分不太兼容,例如innerHTML ,它没有正确地序列化DOM的新部分,但是这对于学习XHTML的专用开发人员来说更有利,因为它需要更严格和更可互换的代码。

使用XHTML

XHTML是HTML和XML解析器的结合使用,XML解析器是HTML解析器的一个更严格的版本;所有现代浏览器都有HTML解析器和XML解析器(以及随后的XHTML)。 XHTML不需要安装软件(除了使用任何现代浏览器),但是(X)HTML应用程序只有XHTML才能正确地提供给浏览器,并且服务器发送的标头声明了application/xhtml+xml mime类型;您可以通过在浏览器中的Web开发人员工具的网络请求面板中查看媒体类型/ mime /类型来验证您的XHTML应用程序是否实际上是这样服务的。用作text/html 页面不是 XHTML,而是由浏览器的HTML解析器解析。

从服务器加载

从服务器加载XHTML解析器时, 必须设置标头,使用meta 元素没有任何用处。在与PHP结合的示例中:

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>
 

从文件加载

如果你在没有从服务器路径加载页面的情况下进行测试(例如localhost,127.0.0.1,192.168.xxx.yyy等),那么使浏览器加载XHTML应用程序并使用XML解析器的唯一方法就是给出提交.xhtml 扩展名; example.xhtml


XHTML / XML分析器浏览器支持

通过XML解析器支持XHTML的浏览器包括Internet Explorer 9+(旧版本中的XML解析器支持以非常复杂的方式支持application/xml ),Mozilla Suite 0.8+(所有Firefox版本),Opera 7+以及早期版本的KHTML (Konqueror因此所有版本的Safari和进一步扩展Chromium / Chrome)。

XHTML5和布尔属性

HTML5将一些HTML属性定义为boolean;布尔值只能是truefalse 。规范只是声明布尔属性的存在意味着该属性设置为true。在以下示例中使用disabled 属性的示例中,禁用按钮输入元素:

<input disabled type="button" value="HTML Button">
 

XML,因此扩展的XHTML 必须具有有效的属性和值。因为HTML5不是为了澄清这些事情而编写的(过去标准中的歧义导致了不同的浏览器实现)HTML5属性在XHTML应用程序中提供时应始终使用true 值,至少在未来的规范消除不必要的歧义之前。

<input disabled="true" type="button" value="XHTML Button" />