So verwenden Sie XSLT zum Anzeigen von XML-Daten auf einer HTML-Webseite
XML ist eine Sprache zum Strukturieren, Speichern und Austauschen von Daten. XSLT ist eine weitere Sprache, mit der Sie Ihre XML-Daten in andere Formate wie HTML umwandeln können.
Sie können XSLT verwenden, um XML-Daten auf einer HTML-Webseite anzuzeigen. Die Verwendung von XML und XSLT zur Anzeige Ihrer Daten kann hilfreich sein, da Sie die Daten so strukturieren können, wie es für Ihre spezifischen Anforderungen sinnvoll ist.
So fügen Sie einer XML-Datei Beispieldaten hinzu
Um XML-Daten auf einer Webseite anzuzeigen, müssen Sie zuerst die XML-Datei erstellen und ihr Daten hinzufügen.
- Erstellen Sie eine neue Datei namens data.xml .
- Deklarieren Sie in der XML-Datei die Codierung und die XML-Version:
<?xml version="1.0"encoding="UTF-8"?> - Verknüpfen Sie die XML-Datei mit einer XSL-Stylesheet-Datei, die Sie in einem späteren Schritt erstellen.
<?xml-stylesheet type="text/xsl"href="xmlstylesheet.xsl"?> - Fügen Sie der XML-Datei Daten hinzu. XML enthält strukturierte Daten und speichert jeden Datenpunkt in einem separaten Tag. Dieses Beispiel enthält ein Root-Tag namens games . Speichern Sie im Games -Tag jedes einzelne Spiel in einem eigenen Game- Tag. Speichern Sie Daten für jedes Spiel wie Name und Entwickler in separaten Tags.
<?xml version="1.0"encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl"href="xmlstylesheet.xsl"?>
<games>
<game>
<name>The Last of Us Part II</name>
<developer>Naughty Dog</developer>
</game>
<game>
<name>Ghost of Tsushima</name>
<developer>Sucker Punch Productions</developer>
</game>
<game>
<name>Death Stranding</name>
<developer>Kojima Productions</developer>
</game>
</games>
So verwenden Sie XSLT zum Lesen von Daten aus der XML-Datei
Erstellen Sie eine neue XSL-Datei, um jeden Datenpunkt auf der XML-Seite zu durchlaufen und die Daten anzuzeigen.
- Erstellen Sie im selben Ordner wie Ihre XML-Datei eine neue Datei namens xmlstylesheet.xsl .
- Deklarieren Sie in der Datei die XSL-Version und fügen Sie die grundlegende XSL-Tag-Struktur hinzu:
<?xml version="1.0"encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
// Your code here
</xsl:stylesheet> - Fügen Sie innerhalb des Haupt-XSL-Tags ein Template -Tag hinzu. Hier können Sie benutzerdefinierten HTML-Code hinzufügen, um Ihre XML-Daten anzuzeigen und zu formatieren.
<xsl:template match="/">
<html>
<body>
// Your HTML code in here
</body>
</html>
</xsl:template> - Verwenden Sie innerhalb des Body-Tags den xsl:for-each- Tag-Selektor. Dies fungiert als for-Schleife, um alle Game- Tags zu durchlaufen, die unter dem Games – Tag verschachtelt sind .
<xsl:for-each select="games/game">
</xsl:for-each> - Zeigen Sie innerhalb der for-each-Schleife den Namen und die Datenpunkte des Entwicklers an, indem Sie den xsl:value-of- Tag-Selektor verwenden.
<xsl:value-of select="name" />
<xsl:value-of select="developer" />
So zeigen Sie Daten auf einer HTML-Webseite an
Sie können die XSLT- oder XML-Datei nicht direkt im Browser öffnen, um die Daten als Teil einer Webseite anzuzeigen. Erstellen Sie eine neue HTML-Datei und rendern Sie die Daten mithilfe eines Iframe -Tags.
- Erstellen Sie im selben Ordner wie Ihre XML- und XSL-Dateien eine neue Datei namens index.html .
- Fügen Sie die Grundstruktur einer HTML-Datei hinzu. Wenn Sie HTML noch nicht verwendet haben, können Sie die einführenden HTML-Konzepte auffrischen.
<!DOCTYPE html>
<html>
<head>
<title>XML and XSLT Example</title>
</head>
<body>
</body>
</html> - Verwenden Sie innerhalb des Body -Tags ein Iframe -Tag, um eine Verknüpfung zur XML-Datei und zur XSL-Datei herzustellen:
<h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="xmlstylesheet.xsl"></iframe> - Erstellen Sie eine neue Datei namens styles.css .
- Fügen Sie in der Datei etwas CSS hinzu, um Ihre Webseite zu gestalten. Fühlen Sie sich frei, Ihr CSS mit anderen interessanten CSS-Tipps und Tricks zu modifizieren.
html,
body {
height: 100%;
margin: 0;
}body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}p {
margin-bottom: 24px;
} - Verknüpfen Sie Ihre HTML-Datei mit dem CSS-Stil, indem Sie Folgendes zum HTML-Head-Tag hinzufügen.
<link rel="stylesheet" href="styles.css"> - Öffnen Sie Ihre HTML-Datei mit einem Browser, um Ihre XML-Daten anzuzeigen. Einige Browser unterstützen XSLT nicht, einige Browser wie Firefox jedoch schon.
Anzeigen von Daten in HTML-Webseiten
Es gibt viele Möglichkeiten, Daten in HTML-Webseiten anzuzeigen, XML und XSLT sind eine davon. Sie können gerne andere Möglichkeiten erkunden, wie Sie dies tun können, z. B. das Speichern und Anzeigen von Benutzereingaben mithilfe von JavaScript.
Schreibe einen Kommentar