For at se XML-data som en del af en webside, kan du bruge XSLT; browsere giver ikke denne mulighed alene.
XML er et sprog, der bruges til at strukturere, gemme og udveksle data. XSLT er et andet sprog, der giver dig mulighed for at transformere dine XML-data til andre formater, såsom HTML.
Du kan bruge XSLT til at vise XML-data på en HTML-webside. Det kan være nyttigt at bruge XML og XSLT til at vise dine data, da det giver dig mulighed for at strukturere dataene på en måde, der giver mening til dine specifikke behov.
Sådan tilføjes eksempeldata til en XML-fil
For at vise XML-data på en webside skal du først oprette XML-filen og tilføje data til den.
- Opret en ny fil kaldet data.xml.
- Inde i XML-filen skal du erklære kodningen og XML-versionen:
1.0 UTF-8?> - Link XML-filen til en XSL-stylesheet-fil, som du vil oprette i et senere trin.
tekst/xsl xmlstylesheet.xsl?> - Tilføj data til XML-filen. XML indeholder strukturerede data og gemmer hvert datapunkt i et separat tag. Dette eksempel inkluderer et root-tag kaldet spil. Inde i spil tag, gemme hvert enkelt spil i sit eget spil tag. Gem data for hvert spil, såsom navn og Udvikler i separate tags.
1.0 UTF-8?>
tekst/xsl xmlstylesheet.xsl?>
<spil>
<spil>
<navn>Den sidste af os del IInavn>
<Udvikler>Frække hundUdvikler>
spil>
<spil>
<navn>Tsushimas spøgelsenavn>
<Udvikler>Sucker Punch ProductionsUdvikler>
spil>
<spil>
<navn>Death Strandingnavn>
<Udvikler>Kojima ProductionsUdvikler>
spil>
spil>
Sådan bruger du XSLT til at læse data fra XML-filen
Opret en ny XSL-fil for at gå gennem hvert datapunkt på XML-siden og vise dataene.
- I samme mappe som din XML-fil skal du oprette en ny fil kaldet xmlstylesheet.xsl.
- Inde i filen skal du erklære XSL-versionen og tilføje den grundlæggende XSL-tag-struktur:
1.0 UTF-8?>
<xsl: stilarkversion="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Din kode her
xsl: stilark> - Inden i det primære XSL-tag skal du tilføje en skabelon tag. Det er her, du kan tilføje tilpasset HTML-kode for at vise og style dine XML-data.
<xsl: skabelonmatch="/">
<html>
<legeme>
// Din HTML-kode herinde
legeme>
html>
xsl: skabelon> - Inde i kropsmærket skal du bruge xsl: for-hver tag-vælger. Dette vil fungere som en for-løkke til at sløjfe gennem hver spil tag indlejret under spil tag.
<xsl: for-hverVælg="spil/spil">
xsl: for-hver> - Vis navnet og udviklerdatapunkterne i for-hver-løkken ved hjælp af xsl: værdi-af tag-vælger.
<xsl: værdi-afVælg="navn" />
<xsl: værdi-afVælg="Udvikler" />
Sådan viser du data på en HTML-webside
Du vil ikke være i stand til at åbne XSLT- eller XML-filen direkte i browseren for at se dataene som en del af en webside. Opret en ny HTML-fil, og gengiv dataene ved hjælp af en iframe tag.
- I samme mappe som dine XML- og XSL-filer skal du oprette en ny fil kaldet index.html.
- Tilføj den grundlæggende struktur af en HTML-fil. Hvis du ikke har brugt HTML før, kan du friske op på indledende HTML-koncepter.
html>
<html>
<hoved>
<titel>Eksempel på XML og XSLTtitel>
hoved>
<legeme>
legeme>
html> - Inde i legeme tag, brug en iframe tag for at linke til XML-filen og XSL-filen:
<h1>Eksempel på XML og XSLTh1>
<s>Følgende indhold genereres fra en XML-fil:s>
<iframesrc="data.xml"xslt="xmlstylesheet.xsl">iframe> - Opret en ny fil kaldet styles.css.
- Tilføj noget CSS i filen for at style din webside. Du er velkommen til at ændre din CSS ved hjælp af andre interessante CSS tips og tricks.
html,
krop {
højde: 100%;
margin: 0;
}krop {
display: flex;
retfærdiggøre-indhold: center;
align-items: center;
flex-retning: kolonne;
}p {
margin-bund: 24px;
} - Link din HTML-fil til CSS-stilen ved at tilføje følgende til HTML-head-tagget.
<linkrel="stylesheet"href="styles.css"> - Åbn din HTML-fil ved hjælp af en browser for at se dine XML-data. Nogle browsere understøtter ikke XSLT, men nogle browsere såsom Firefox gør det.
Vis data på HTML-websider
Der er mange måder at vise data på HTML-websider, XML og XSLT er en af dem. Du er velkommen til at udforske de andre måder, du kan gøre dette på, såsom at gemme og vise brugerinput ved hjælp af JavaScript.
