xhtmlAan de slag met xhtml


Opmerkingen

Deze sectie geeft een overzicht van wat xhtml is en waarom een ontwikkelaar het misschien wil gebruiken.

Er moeten ook grote onderwerpen in xhtml worden vermeld en naar de gerelateerde onderwerpen worden gelinkt. Aangezien de documentatie voor xhtml nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Versie Publicatiedatum
XHTML 1.0 2000/01/26
XHTML 1.1 2001-05-31
XHTML 2.0 2006-08-31
XHTML 5 2014/10/28

XML toevoegen aan een XHTML-toepassing en XML ophalen uit een XHTML-toepassing

Met XHTML moet u methoden zoals document.write en innerHTML vermijden, omdat deze XML als tekst behandelen en code niet correct serialiseren; een id kenmerk in HTML wordt in wezen in de DOM gedumpt en het id kenmerk is niet geserialiseerd, wat betekent dat wanneer de browser ernaar verwijst met iets als document.getElementById('example') de browser de id niet "ziet". De volgende voorbeelden krijgen "get" XHTML-code van en "set" XHTML code om de XHTML applicatie.

XHTML toevoegen aan en XML ophalen van de DOM

<?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>
 

Volledig XHTML- en JavaScript-voorbeeld

Het volgende is een volledig voorbeeld van het gebruik van XHTML met JavaScript dat wordt aangeboden door PHP als een enkel bestand.

<?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>
 

Installatie of instellingen

XHTML Relatie met HTML

XHTML is gewoon de geserialiseerde versie van HTML. XHTML was oorspronkelijk bedoeld om HTML-opmaak op te schonen om de ondersteuning van standaarden beter te verbeteren. Helaas was het werk van de W3C aan XHTML 2.0 niet intuïtief en afbreuk gedaan aan waar de industrie als geheel op weg was naar HTML5. XHTML5 is geen standaard hoewel u XHTML5 (XML serialized HTML5) kunt gebruiken met kleine wijzigingen. Hieronder worden voorbeelden gegeven om de acceptatie van XHTML5 te vergemakkelijken en onduidelijkheden in de HTML5-standaard te verduidelijken waar XML niet in aanmerking wordt genomen.

XHTML voordelen

Omdat XHTML de XML-parser van een browser gebruikt, is het aanzienlijk (hoewel niet absoluut) minder vatbaar voor veel voorkomende programmeerfouten. Als een ontwikkelaar belastingen een XHTML applicatie met misvormde XML meeste browser rendering engines zal maken aan de misvormde XML terwijl de Gecko rendering engine (gebruikt in Firefox) een gele pagina zal laten zien. In alle gevallen wordt een foutbericht weergegeven met de regel- en kolomnummers van waar de eerste XML-parseerfout is opgetreden. Veel ontwikkelaars hebben eenvoudige fouten gemaakt, zoals het missen van een citaat uit een HTML-attribuut waardoor ze dagenlang bezig zijn te proberen te bepalen waarom een of twee browsers de HTML-pagina niet weergeven zoals verwacht, het gebruik van XHTML kan de ontwikkeltijd via HTML aanzienlijk verkorten. XHTML kan een positieve invloed hebben op het leren coderen van geldige HTML voor mensen die webontwikkeling leren, omdat het de XHTML-applicatie niet toestaat volledig met verkeerd gevormde code weer te geven en door een expliciete foutmelding te geven dat nieuwe ontwikkelaars online kunnen zoeken naar werkende oplossingen. Aangezien XHTML een subset van XML is, heeft het daarom een zeer hoge compatibiliteit met software die met XML werkt in een zeer breed scala van industriële, commerciële en residentiële toepassingen. Ten slotte is het vanwege de strikte vereisten dat de XHTML-code automatisch compatibel is met HTML en XML (afhankelijk van de afwezigheid van meerdere dezelfde id kenmerkwaarden), terwijl HTML niet inherent compatibel is met andere HTML- en XML-structuren, omdat het niet onmiddellijk duidelijk is dat de HTML-code misvormd zijn.

XHTML-nadelen

Vanwege de veel strengere XML-parserregels is XHTML aanvankelijk niet zo eenvoudig voor minder ervaren ontwikkelaars. XHTML wordt niet vaak in overweging genomen door verschillende groepen, bevat dubbelzinnigheid met betrekking tot slecht geschreven delen van de HTML5-standaard en er is geen expliciete validator die ondersteuning voor XHTML5 verklaart. XHTML is minder compatibel met "luie" delen van JavaScript, zoals innerHTML die nieuwe delen van de DOM niet correct serialiseert, maar dit is meer een voordeel voor toegewijde ontwikkelaars die XHTML leren omdat het strengere en meer uitwisselbare code vereist.

XHTML gebruiken

XHTML is de combinatie van HTML en het gebruik van de XML-parser, een veel strengere versie van de HTML-parser; alle moderne browsers hebben HTML-parsers voor HTML en XML-parsers voor XML (en vervolgens XHTML). XHTML vereist geen installatie van software (behalve het gebruik van een moderne browser), maar een (X) HTML-toepassing is alleen XHTML wanneer deze correct wordt aangeboden aan de browser met een header verzonden door de server met vermelding van het application/xhtml+xml mime-type; kunt u controleren of uw XHTML-toepassing daadwerkelijk op deze manier is bediend door het mediatype / mime / type te bekijken in het netwerkverzoekenpaneel van de webontwikkeltools in uw browser. Een pagina die wordt weergegeven als text/html is geen XHTML en wordt in plaats daarvan ontleed door de HTML-parser van de browser.

Geladen vanaf een server

Bij het laden van een XHTML parser van de server een kop moet worden ingesteld met behulp van een meta element niet zinvol. Bijvoorbeeld in combinatie met 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";
}
?>
 

Geladen uit een bestand

Als u bezig bent met testen zonder een pagina van een serverpad te laden (bijv. Localhost, 127.0.0.1, 192.168.xxx.yyy, enz.), Dan is de enige manier om een browser een XHTML-toepassing te laten laden en de XML-parser te gebruiken, de bestand een .xhtml extensie; example.xhtml .


XHTML / XML Parser Browser Ondersteuning

Browsers met XHTML-ondersteuning via XML-parsers omvatten Internet Explorer 9+ (XML-parserondersteuning in oudere versies doet dit in een zeer ingewikkelde mode-ondersteuningsapplicatie application/xml ), Mozilla Suite 0.8+ (alle Firefox-versies), Opera 7+ en vroege versies van KHTML (Konqueror en dus alle versies van Safari en bij verdere uitbreiding Chromium / Chrome).

XHTML5 en Booleaanse kenmerken

HTML5 definieert sommige HTML-kenmerken als Boolean; een Boolean kan alleen true of false . De specificatie stelt eenvoudig dat de aanwezigheid van een boolean-attribuut impliceert dat het attribuut op waar is ingesteld. Als u bijvoorbeeld in het volgende voorbeeld een disabled kenmerk gebruikt, wordt het knopinvoerelement uitgeschakeld:

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

XML, en dus XHTML bij uitbreiding, moet een geldig kenmerk en waarde hebben. Omdat HTML5 niet op een manier is geschreven om dergelijke dingen te verduidelijken (dubbelzinnigheid in eerdere normen heeft tot verschillende browserimplementaties geleid) moeten HTML5-kenmerken bij weergave in een XHTML-toepassing altijd een true waarde gebruiken, althans totdat een toekomstige specificatie de onnodige dubbelzinnigheid wegneemt.

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