For å se XML-data som en del av en nettside, kan du bruke XSLT; nettlesere tilbyr ikke denne muligheten på egen hånd.
XML er et språk som brukes til å strukturere, lagre og utveksle data. XSLT er et annet språk som lar deg transformere XML-dataene dine til andre formater, for eksempel HTML.
Du kan bruke XSLT til å vise XML-data på en HTML-nettside. Å bruke XML og XSLT for å vise dataene dine kan være nyttig, siden det lar deg strukturere dataene på en måte som gir mening for dine spesifikke behov.
Hvordan legge til eksempeldata til en XML-fil
For å vise XML-data på en nettside, må du først opprette XML-filen og legge til data til den.
- Opprett en ny fil kalt data.xml.
- Inne i XML-filen erklærer du kodingen og XML-versjonen:
1.0 UTF-8?> - Koble XML-filen til en XSL-stilarkfil, som du vil opprette i et senere trinn.
tekst/xsl xmlstylesheet.xsl?> - Legg til data i XML-filen. XML inneholder strukturerte data, og lagrer hvert datapunkt i en egen tag. Dette eksemplet inkluderer en root-tag kalt spill. Inne i spill tag, lagre hvert enkelt spill i sitt eget spill stikkord. Lagre data for hvert spill, for eksempel Navn og utvikler i separate tagger.
1.0 UTF-8?>
tekst/xsl xmlstylesheet.xsl?>
<spill>
<spill>
<Navn>Den siste av oss del IINavn>
<utvikler>Slem hundutvikler>
spill>
<spill>
<Navn>Ghost of TsushimaNavn>
<utvikler>Sucker Punch Productionsutvikler>
spill>
<spill>
<Navn>Death StrandingNavn>
<utvikler>Kojima Productionsutvikler>
spill>
spill>
Hvordan bruke XSLT til å lese data fra XML-filen
Opprett en ny XSL-fil for å gå gjennom hvert datapunkt på XML-siden og vise dataene.
- I samme mappe som XML-filen, lag en ny fil kalt xmlstylesheet.xsl.
- Inne i filen, erklær XSL-versjonen, og legg til den grunnleggende XSL-tagstrukturen:
1.0 UTF-8?>
<xsl: stilarkversjon="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Koden din her
xsl: stilark> - Inne i XSL-hovedkoden legger du til en mal stikkord. Det er her du kan legge til tilpasset HTML-kode for å vise og style XML-dataene dine.
<xsl: malkamp="/">
<html>
<kropp>
// HTML-koden din her
kropp>
html>
xsl: mal> - Inne i body tag, bruk xsl: for-hver merkevelger. Dette vil fungere som en for-løkke for å gå gjennom hver spill tag nestet under spill stikkord.
<xsl: for-hverplukke ut="spill/spill">
xsl: for-hver> - Inne i for-hver-løkken viser du navnet og utviklerdatapunktene ved å bruke xsl: verdi-av merkevelger.
<xsl: verdi-avplukke ut="Navn" />
<xsl: verdi-avplukke ut="utvikler" />
Hvordan vise data på en HTML-webside
Du vil ikke kunne åpne XSLT- eller XML-filen direkte i nettleseren for å se dataene som en del av en nettside. Opprett en ny HTML-fil, og gjengi dataene ved hjelp av en iframe stikkord.
- I samme mappe som XML- og XSL-filene dine oppretter du en ny fil som heter index.html.
- Legg til den grunnleggende strukturen til en HTML-fil. Hvis du ikke har brukt HTML før, kan du friske opp innledende HTML-konsepter.
html>
<html>
<hode>
<tittel>Eksempel på XML og XSLTtittel>
hode>
<kropp>
kropp>
html> - Inne i kropp tag, bruk en iframe tag for å koble til XML-filen og XSL-filen:
<h1>Eksempel på XML og XSLTh1>
<s>Følgende innhold genereres fra en XML-fil:s>
<iframesrc="data.xml"xslt="xmlstylesheet.xsl">iframe> - Opprett en ny fil kalt styles.css.
- Inne i filen legger du til litt CSS for å style nettsiden din. Føl deg fri til å endre CSS ved hjelp av andre interessante CSS tips og triks.
html,
kropp {
høyde: 100%;
margin: 0;
}kropp {
display: flex;
rettferdiggjøre-innhold: senter;
align-items: center;
flex-retning: kolonne;
}p {
marg-bunn: 24px;
} - Koble HTML-filen til CSS-stilen ved å legge til følgende i HTML-head-taggen.
<linkrel="stilark"href="styles.css"> - Åpne HTML-filen ved hjelp av en nettleser for å se XML-dataene dine. Noen nettlesere støtter ikke XSLT, men noen nettlesere som Firefox gjør det.
Vis data i HTML-nettsider
Det er mange måter å vise data på HTML-nettsider, XML og XSLT er en av dem. Utforsk gjerne andre måter du kan gjøre dette på, for eksempel å lagre og vise brukerinndata ved å bruke JavaScript.
