Ak chcete zobraziť údaje XML ako súčasť webovej stránky, môžete použiť XSLT; prehliadače samy o sebe túto možnosť neposkytujú.
XML je jazyk používaný na štruktúrovanie, ukladanie a výmenu údajov. XSLT je ďalší jazyk, ktorý vám umožňuje transformovať vaše údaje XML do iných formátov, ako je HTML.
Na zobrazenie údajov XML na webovej stránke HTML môžete použiť XSLT. Používanie XML a XSLT na zobrazenie údajov môže byť užitočné, pretože vám umožňuje štruktúrovať údaje spôsobom, ktorý dáva zmysel pre vaše špecifické potreby.
Ako pridať vzorové údaje do súboru XML
Ak chcete zobraziť údaje XML na webovej stránke, musíte najprv vytvoriť súbor XML a pridať doň údaje.
- Vytvorte nový súbor s názvom data.xml.
- Vo vnútri súboru XML deklarujte kódovanie a verziu XML:
1.0 UTF-8?> - Prepojte súbor XML so súborom šablóny so štýlmi XSL, ktorý vytvoríte v neskoršom kroku.
text/xsl xmlstylesheet.xsl?> - Pridajte údaje do súboru XML. XML obsahuje štruktúrované údaje a ukladá každý údajový bod do samostatnej značky. Tento príklad obsahuje koreňovú značku s názvom hry. Vnútri hry tag, uložte každú jednotlivú hru do svojej vlastnej hra tag. Ukladajte údaje pre každú hru, ako napr názov a vývojár v samostatných značkách.
1.0 UTF-8?>
text/xsl xmlstylesheet.xsl?>
<hry>
<hra>
<názov>The Last of Us časť IInázov>
<vývojár>Nezbedný pesvývojár>
hra>
<hra>
<názov>Duch Tsushimanázov>
<vývojár>Sucker Punch Productionsvývojár>
hra>
<hra>
<názov>Death Strandingnázov>
<vývojár>Kojima Productionsvývojár>
hra>
hry>
Ako používať XSLT na čítanie údajov zo súboru XML
Vytvorte nový súbor XSL, aby ste prešli každým údajovým bodom na stránke XML a zobrazili údaje.
- V rovnakom priečinku ako váš súbor XML vytvorte nový súbor s názvom xmlstylesheet.xsl.
- Vo vnútri súboru deklarujte verziu XSL a pridajte základnú štruktúru značky XSL:
1.0 UTF-8?>
<xsl: šablóna so štýlmiverzia="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Tu je váš kód
xsl: šablóna so štýlmi> - Do hlavnej značky XSL pridajte a šablóna tag. Tu môžete pridať vlastný kód HTML na zobrazenie a úpravu údajov XML.
<xsl: šablónazápas="/">
<html>
<telo>
// Tu je váš HTML kód
telo>
html>
xsl: šablóna> - Vo vnútri značky tela použite xsl: pre každého selektor značiek. Toto bude fungovať ako slučka for-loop, ktorá bude prechádzať cez každú z nich hra značka vnorená pod hry tag.
<xsl: pre každéhovyberte="hry/hra">
xsl: pre každého> - Vo vnútri cyklu for-každého zobrazte názov a údajové body vývojára pomocou xsl: hodnota-of selektor značiek.
<xsl: hodnota-ofvyberte="názov" />
<xsl: hodnota-ofvyberte="vývojár" />
Ako zobraziť údaje na webovej stránke HTML
Súbor XSLT alebo XML nebudete môcť otvoriť priamo v prehliadači a zobraziť údaje ako súčasť webovej stránky. Vytvorte nový súbor HTML a vyrenderujte údaje pomocou súboru iframe tag.
- V rovnakom priečinku ako vaše súbory XML a XSL vytvorte nový súbor s názvom index.html.
- Pridajte základnú štruktúru súboru HTML. Ak ste ešte nepoužívali HTML, môžete to oprášiť úvodné koncepty HTML.
html>
<html>
<hlavu>
<titul>Príklad XML a XSLTtitul>
hlavu>
<telo>
telo>
html> - Vnútri telo tag, použite an iframe značka na prepojenie na súbor XML a súbor XSL:
<h1>Príklad XML a XSLTh1>
<p>Nasledujúci obsah je generovaný zo súboru XML:p>
<iframesrc="data.xml"xslt="xmlstylesheet.xsl">iframe> - Vytvorte nový súbor s názvom styles.css.
- Vnútri súboru pridajte nejaké CSS na štýl vašej webovej stránky. Neváhajte a upravte svoje CSS pomocou iných zaujímavostí CSS tipy a triky.
html,
telo {
výška: 100 %;
okraj: 0;
}telo {
displej: flex;
zdôvodniť-obsah: stred;
align-items: center;
smer ohybu: stĺpec;
}p {
margin-bottom: 24px;
} - Prepojte svoj súbor HTML so štýlom CSS pridaním nasledujúceho kódu do značky HTML head.
<odkazrel="štýlov"href="styles.css"> - Ak chcete zobraziť údaje XML, otvorte súbor HTML pomocou prehliadača. Niektoré prehliadače nepodporujú XSLT, ale niektoré prehliadače ako Firefox áno.
Zobrazenie údajov na webových stránkach HTML
Existuje mnoho spôsobov, ako zobraziť údaje na webových stránkach HTML, jedným z nich sú XML a XSLT. Neváhajte a preskúmajte ďalšie spôsoby, ako to môžete urobiť, ako je napríklad ukladanie a zobrazovanie vstupu používateľa pomocou JavaScriptu.
