Voit tarkastella XML-tietoja osana verkkosivua käyttämällä XSLT: tä; selaimet eivät tarjoa tätä ominaisuutta yksinään.
XML on kieli, jota käytetään tietojen jäsentämiseen, tallentamiseen ja vaihtamiseen. XSLT on toinen kieli, jonka avulla voit muuntaa XML-tietosi muihin muotoihin, kuten HTML-muotoon.
Voit käyttää XSLT: tä XML-tietojen näyttämiseen HTML-verkkosivulla. XML: n ja XSLT: n käyttäminen tietojen näyttämiseen voi olla hyödyllistä, koska sen avulla voit jäsentää tiedot tavalla, joka sopii tarpeisiisi.
Esimerkkitietojen lisääminen XML-tiedostoon
XML-tietojen näyttämiseksi verkkosivulla sinun on ensin luotava XML-tiedosto ja lisättävä siihen tietoja.
- Luo uusi tiedosto nimeltä data.xml.
- Ilmoita XML-tiedoston sisällä koodaus ja XML-versio:
1.0 UTF-8?> - Linkitä XML-tiedosto XSL-tyylitaulukkotiedostoon, jonka luot myöhemmässä vaiheessa.
text/xsl xmlstylesheet.xsl?> - Lisää tietoja XML-tiedostoon. XML sisältää jäsenneltyä dataa ja tallentaa jokaisen datapisteen erilliseen tunnisteeseen. Tämä esimerkki sisältää juuritunnisteen nimeltä pelejä. Sisällä pelejä -tagia, tallenna jokainen yksittäinen peli omaan sisäänsä peli tag. Tallenna kunkin pelin tiedot, kuten nimi ja kehittäjä erillisissä tunnisteissa.
1.0 UTF-8?>
text/xsl xmlstylesheet.xsl?>
<pelejä>
<peli>
<nimi>The Last of Us, osa IInimi>
<kehittäjä>Tuhma koirakehittäjä>
peli>
<peli>
<nimi>Tsushiman haamunimi>
<kehittäjä>Sucker Punch Productionskehittäjä>
peli>
<peli>
<nimi>Death Strandingnimi>
<kehittäjä>Kojima Productionskehittäjä>
peli>
pelejä>
Kuinka käyttää XSLT: tä tietojen lukemiseen XML-tiedostosta
Luo uusi XSL-tiedosto, joka kiertää XML-sivun jokaisen datapisteen läpi ja näyttää tiedot.
- Luo samaan kansioon XML-tiedoston kanssa uusi tiedosto nimeltä xmlstylesheet.xsl.
- Ilmoita tiedoston sisällä XSL-versio ja lisää XSL-perustunnisterakenne:
1.0 UTF-8?>
<xsl: tyylitaulukkoversio="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Koodisi tässä
xsl: tyylitaulukko> - Lisää XSL-päätunnisteen sisään a sapluuna tag. Täällä voit lisätä mukautetun HTML-koodin näyttämään ja muotoilemaan XML-tietojasi.
<xsl: malliottelu="/">
<html>
<kehon>
// HTML-koodisi tässä
kehon>
html>
xsl: malli> - Käytä body-tunnisteen sisällä xsl: jokaiselle tunnisteen valitsin. Tämä toimii for-silmukana silmukaksi jokaisen läpi peli -tunnisteen alla pelejä tag.
<xsl: jokaisellevalitse="pelit/peli">
xsl: jokaiselle> - Näytä jokaisen silmukan sisällä nimi ja kehittäjän datapisteet käyttämällä xsl: arvo-of tunnisteen valitsin.
<xsl: arvo-ofvalitse="nimi" />
<xsl: arvo-ofvalitse="kehittäjä" />
Tietojen näyttäminen HTML-verkkosivulla
Et voi avata XSLT- tai XML-tiedostoa suoraan selaimessa nähdäksesi tiedot osana verkkosivua. Luo uusi HTML-tiedosto ja renderöi tiedot käyttämällä iframe tag.
- Luo samaan kansioon XML- ja XSL-tiedostojen kanssa uusi tiedosto nimeltä index.html.
- Lisää HTML-tiedoston perusrakenne. Jos et ole aiemmin käyttänyt HTML: ää, voit päivittää sitä johdattelevia HTML-käsitteitä.
html>
<html>
<pää>
<otsikko>XML- ja XSLT-esimerkkiotsikko>
pää>
<kehon>
kehon>
html> - Sisällä kehon tag, käytä an iframe -tunniste, joka linkittää XML- ja XSL-tiedostoon:
<h1>XML- ja XSLT-esimerkkih1>
<s>Seuraava sisältö luodaan XML-tiedostosta:s>
<iframesrc="data.xml"xslt="xmlstylesheet.xsl">iframe> - Luo uusi tiedosto nimeltä styles.css.
- Lisää tiedoston sisään CSS-symboli verkkosivusi tyylin lisäämiseksi. Voit vapaasti muokata CSS: ääsi käyttämällä muita mielenkiintoisia CSS-vinkkejä ja temppuja.
html,
body {
korkeus: 100%;
marginaali: 0;
}body {
näyttö: flex;
perustella-sisältö: keskus;
kohdista kohteet: keskellä;
flex-suunta: pylväs;
}p {
marginaali-ala: 24px;
} - Linkitä HTML-tiedostosi CSS-tyyliin lisäämällä seuraavat HTML head -tunnisteeseen.
<linkkirel="tyylitaulukko"href="tyylit.css"> - Avaa HTML-tiedosto selaimella nähdäksesi XML-tietosi. Jotkut selaimet eivät tue XSLT: tä, mutta jotkut selaimet, kuten Firefox, tukevat.
Näytä tiedot HTML-verkkosivuilla
On monia tapoja näyttää tietoja HTML-sivuilla, XML ja XSLT ovat yksi niistä. Voit vapaasti tutkia muita tapoja tehdä tämä, kuten käyttäjän syötteiden tallentamiseen ja näyttämiseen JavaScriptin avulla.