Um XML-Daten als Teil einer Webseite anzuzeigen, können Sie XSLT verwenden; Browser bieten diese Funktion nicht von sich aus.
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 mit dem Namen Daten.xml.
- Deklarieren Sie in der XML-Datei die Codierung und die XML-Version:
1.0 UTF-8?> - Verknüpfen Sie die XML-Datei mit einer XSL-Stylesheet-Datei, die Sie in einem späteren Schritt erstellen.
text/xsl 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 Spiele. Im Inneren des Spiele Tag speichern Sie jedes einzelne Spiel in seinem eigenen Spiel Schild. Speichern Sie Daten für jedes Spiel wie z Name Und Entwickler in separaten Tags.
1.0 UTF-8?>
text/xsl xmlstylesheet.xsl?>
<Spiele>
<Spiel>
<Name>Der Letzte von uns Teil IIName>
<Entwickler>Frecher HundEntwickler>
Spiel>
<Spiel>
<Name>Geist von TsushimaName>
<Entwickler>Sucker Punch-ProduktionenEntwickler>
Spiel>
<Spiel>
<Name>TodesstrandungName>
<Entwickler>Kojima-ProduktionenEntwickler>
Spiel>
Spiele>
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 mit dem Namen xmlstylesheet.xsl.
- Deklarieren Sie in der Datei die XSL-Version und fügen Sie die grundlegende XSL-Tag-Struktur hinzu:
1.0 UTF-8?>
<xsl: StylesheetAusführung="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Ihr Code hier
xsl: Stylesheet> - Fügen Sie innerhalb des Haupt-XSL-Tags a hinzu Vorlage Schild. Hier können Sie benutzerdefinierten HTML-Code hinzufügen, um Ihre XML-Daten anzuzeigen und zu formatieren.
<xsl: Vorlagepassen="/">
<html>
<Körper>
// Ihr HTML-Code hier
Körper>
html>
xsl: Vorlage> - Verwenden Sie innerhalb des Body-Tags die xsl: für jeden Tag-Selektor. Dies fungiert als for-Schleife, um alle zu durchlaufen Spiel -Tag unter dem verschachtelt Spiele Schild.
<xsl: für jedenwählen=„Spiele/Spiel“>
xsl: für jeden> - Zeigen Sie innerhalb der for-each-Schleife den Namen und die Datenpunkte des Entwicklers mithilfe von an xsl: Wert von Tag-Selektor.
<xsl: Wert vonwählen="Name" />
<xsl: Wert vonwählen="Entwickler" />
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 mit einer iframe Schild.
- Erstellen Sie im selben Ordner wie Ihre XML- und XSL-Dateien eine neue Datei mit dem Namen index.html.
- Fügen Sie die Grundstruktur einer HTML-Datei hinzu. Wenn Sie HTML noch nicht verwendet haben, können Sie es auffrischen einführende HTML-Konzepte.
html>
<html>
<Kopf>
<Titel>XML- und XSLT-BeispielTitel>
Kopf>
<Körper>
Körper>
html> - Im Inneren des Körper tag, benutze ein iframe -Tag zum Verknüpfen mit der XML-Datei und der XSL-Datei:
<h1>XML- und XSLT-Beispielh1>
<P>Der folgende Inhalt wird aus einer XML-Datei generiert:P>
<iframeQuelle="data.xml"xslt="xmlstylesheet.xsl">iframe> - Erstellen Sie eine neue Datei mit dem Namen Stile.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 zu ändern CSS-Tipps und Tricks.
html,
Körper {
Höhe: 100 %;
Rand: 0;
}Körper {
Anzeige: Flex;
justify-content: center;
Ausrichtungselemente: Mitte;
Biegerichtung: Säule;
}P {
Rand unten: 24px;
} - Verknüpfen Sie Ihre HTML-Datei mit dem CSS-Stil, indem Sie Folgendes zum HTML-Head-Tag hinzufügen.
<Verknüpfungrel="Stilvorlage"href="stile.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.
