Om XML-gegevens als onderdeel van een webpagina te bekijken, kunt u XSLT gebruiken; browsers bieden deze mogelijkheid zelf niet.
XML is een taal die wordt gebruikt om gegevens te structureren, op te slaan en uit te wisselen. XSLT is een andere taal waarmee u uw XML-gegevens kunt omzetten in andere indelingen, zoals HTML.
U kunt XSLT gebruiken om XML-gegevens weer te geven op een HTML-webpagina. Het kan nuttig zijn om XML en XSLT te gebruiken om uw gegevens weer te geven, omdat u hiermee de gegevens kunt structureren op een manier die zinvol is voor uw specifieke behoeften.
Voorbeeldgegevens toevoegen aan een XML-bestand
Om XML-gegevens op een webpagina weer te geven, moet u eerst het XML-bestand maken en er gegevens aan toevoegen.
- Maak een nieuw bestand met de naam gegevens.xml.
- Declareer in het XML-bestand de codering en de XML-versie:
1.0 UTF-8?> - Koppel het XML-bestand aan een XSL-stylesheetbestand, dat u in een latere stap gaat maken.
tekst/xsl xmlstylesheet.xsl?> - Voeg gegevens toe aan het XML-bestand. XML bevat gestructureerde gegevens en slaat elk gegevenspunt op in een afzonderlijke tag. Dit voorbeeld bevat een root-tag met de naam spellen. Binnen in de spellen tag, bewaar elk afzonderlijk spel in zijn eigen spel spel label. Bewaar gegevens voor elk spel, zoals de naam En ontwikkelaar in aparte tags.
1.0 UTF-8?>
tekst/xsl xmlstylesheet.xsl?>
<spellen>
<spel>
<naam>De laatste van ons deel IInaam>
<ontwikkelaar>Stoute hondontwikkelaar>
spel>
<spel>
<naam>Geest van Tsushimanaam>
<ontwikkelaar>Sucker Punch-productiesontwikkelaar>
spel>
<spel>
<naam>Death strandingnaam>
<ontwikkelaar>Kojima-productiesontwikkelaar>
spel>
spellen>
XSLT gebruiken om gegevens uit het XML-bestand te lezen
Maak een nieuw XSL-bestand om elk gegevenspunt op de XML-pagina te doorlopen en de gegevens weer te geven.
- Maak in dezelfde map als uw XML-bestand een nieuw bestand met de naam xmlstylesheet.xsl.
- Declareer in het bestand de XSL-versie en voeg de basis XSL-tagstructuur toe:
1.0 UTF-8?>
<xsl: stijlbladversie="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Uw code hier
xsl: stijlblad> - Voeg binnen de belangrijkste XSL-tag een sjabloon label. Hier kunt u aangepaste HTML-code toevoegen om uw XML-gegevens weer te geven en op te maken.
<xsl: sjabloonovereenkomst="/">
<html>
<lichaam>
// Uw HTML-code hier
lichaam>
html>
xsl: sjabloon> - Gebruik in de body-tag de xsl: voor elk tagkiezer. Dit zal fungeren als een for-lus om ze allemaal te doorlopen spel tag genest onder de spellen label.
<xsl: voor elkselecteren="spellen/spel">
xsl: voor elk> - Geef binnen de for-each-lus de naam en gegevenspunten van de ontwikkelaar weer met behulp van de xsl: waarde-van tagkiezer.
<xsl: waarde-vanselecteren="naam" />
<xsl: waarde-vanselecteren="ontwikkelaar" />
Gegevens weergeven op een HTML-webpagina
U kunt het XSLT- of XML-bestand niet rechtstreeks in de browser openen om de gegevens als onderdeel van een webpagina te bekijken. Maak een nieuw HTML-bestand en geef de gegevens weer met behulp van een iframe label.
- Maak in dezelfde map als uw XML- en XSL-bestanden een nieuw bestand met de naam index.html.
- Voeg de basisstructuur van een HTML-bestand toe. Als je nog niet eerder met HTML hebt gewerkt, kun je dit opfrissen inleidende HTML-concepten.
html>
<html>
<hoofd>
<titel>Voorbeeld XML en XSLTtitel>
hoofd>
<lichaam>
lichaam>
html> - Binnen in de lichaam tag, gebruik een iframe tag om te linken naar het XML-bestand en XSL-bestand:
<h1>Voorbeeld XML en XSLTh1>
<P>De volgende inhoud wordt gegenereerd op basis van een XML-bestand:P>
<iframesrc="gegevens.xml"xslt="xmlstylesheet.xsl">iframe> - Maak een nieuw bestand met de naam stijlen.css.
- Voeg in het bestand wat CSS toe om uw webpagina te stylen. Voel je vrij om je CSS aan te passen met andere interessante CSS-tips en -trucs.
html,
lichaam {
hoogte: 100%;
marge: 0;
}lichaam {
weergeven: flex;
rechtvaardigen-inhoud: centrum;
items uitlijnen: centreren;
flex-richting: kolom;
}P {
marge-onder: 24px;
} - Koppel uw HTML-bestand aan de CSS-stijl door het volgende toe te voegen aan de HTML-head-tag.
<koppelingrel="stijlblad"href="stijlen.css"> - Open uw HTML-bestand met een browser om uw XML-gegevens te bekijken. Sommige browsers ondersteunen XSLT niet, maar sommige browsers zoals Firefox wel.
Geef gegevens weer in HTML-webpagina's
Er zijn veel manieren om gegevens in HTML-webpagina's weer te geven, waaronder XML en XSLT. Voel je vrij om de andere manieren te verkennen waarop je dit kunt doen, zoals het opslaan en weergeven van gebruikersinvoer met behulp van JavaScript.
