Chcete-li zobrazit data XML jako součást webové stránky, můžete použít XSLT; prohlížeče tuto možnost samy o sobě neposkytují.
XML je jazyk používaný ke strukturování, ukládání a výměně dat. XSLT je další jazyk, který vám umožňuje transformovat vaše XML data do jiných formátů, jako je HTML.
K zobrazení dat XML na webové stránce HTML můžete použít XSLT. Použití XML a XSLT k zobrazení dat může být užitečné, protože vám umožňuje strukturovat data způsobem, který dává smysl pro vaše konkrétní potřeby.
Jak přidat ukázková data do souboru XML
Chcete-li zobrazit data XML na webové stránce, musíte nejprve vytvořit soubor XML a přidat do něj data.
- Vytvořte nový soubor s názvem data.xml.
- Uvnitř souboru XML deklarujte kódování a verzi XML:
1.0 UTF-8?> - Propojte soubor XML se souborem šablony stylů XSL, který vytvoříte v pozdějším kroku.
text/xsl xmlstylesheet.xsl?> - Přidejte data do souboru XML. XML obsahuje strukturovaná data a ukládá každý datový bod do samostatné značky. Tento příklad zahrnuje kořenovou značku s názvem hry. Uvnitř hry tag, uložte každou jednotlivou hru do své vlastní hra štítek. Ukládejte data pro každou hru, např název a vývojář v samostatných značkách.
1.0 UTF-8?>
text/xsl xmlstylesheet.xsl?>
<hry>
<hra>
<název>Poslední z nás část IInázev>
<vývojář>Nezbedný pesvývojář>
hra>
<hra>
<název>Duch Tsushimanázev>
<vývojář>Sucker Punch Productionsvývojář>
hra>
<hra>
<název>Death Strandingnázev>
<vývojář>Kojima Productionsvývojář>
hra>
hry>
Jak používat XSLT ke čtení dat ze souboru XML
Vytvořte nový soubor XSL pro procházení každého datového bodu na stránce XML a zobrazení dat.
- Ve stejné složce jako váš soubor XML vytvořte nový soubor s názvem xmlstylesheet.xsl.
- Uvnitř souboru deklarujte verzi XSL a přidejte základní strukturu značek XSL:
1.0 UTF-8?>
<xsl: šablona stylůverze="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Váš kód zde
xsl: šablona stylů> - Do hlavní značky XSL přidejte a šablona štítek. Zde můžete přidat vlastní kód HTML pro zobrazení a styl vašich dat XML.
<xsl: šablonazápas="/">
<html>
<tělo>
// Zde je váš HTML kód
tělo>
html>
xsl: šablona> - Uvnitř značky těla použijte xsl: pro každého selektor značek. To bude fungovat jako for-loop pro procházení každým hra značka vnořená pod hry štítek.
<xsl: pro každéhovybrat="hry/hra">
xsl: pro každého> - Uvnitř smyčky for-each zobrazte název a vývojářské datové body pomocí xsl: hodnota-of selektor značek.
<xsl: hodnota-ofvybrat="název" />
<xsl: hodnota-ofvybrat="vývojář" />
Jak zobrazit data na webové stránce HTML
Soubor XSLT nebo XML nebudete moci otevřít přímo v prohlížeči a zobrazit data jako součást webové stránky. Vytvořte nový soubor HTML a vykreslete data pomocí souboru iframe štítek.
- Ve stejné složce jako vaše soubory XML a XSL vytvořte nový soubor s názvem index.html.
- Přidejte základní strukturu souboru HTML. Pokud jste HTML ještě nepoužívali, můžete to oprášit úvodní pojmy HTML.
html>
<html>
<hlava>
<titul>Příklad XML a XSLTtitul>
hlava>
<tělo>
tělo>
html> - Uvnitř tělo tag, použijte an iframe tag pro odkaz na soubor XML a soubor XSL:
<h1>Příklad XML a XSLTh1>
<p>Následující obsah je generován ze souboru XML:p>
<iframesrc="data.xml"xslt="xmlstylesheet.xsl">iframe> - Vytvořte nový soubor s názvem styly.css.
- Do souboru přidejte nějaké CSS pro stylování vaší webové stránky. Neváhejte a upravte své CSS pomocí jiných zajímavostí CSS tipy a triky.
html,
tělo {
výška: 100 %;
okraj: 0;
}tělo {
displej: flex;
justify-content: center;
align-items: center;
směr ohybu: sloupec;
}p {
margin-bottom: 24px;
} - Propojte svůj soubor HTML se styly CSS přidáním následujícího do značky HTML head.
<odkazrel="stylesheet"href="styles.css"> - Chcete-li zobrazit data XML, otevřete soubor HTML pomocí prohlížeče. Některé prohlížeče nepodporují XSLT, ale některé prohlížeče jako Firefox ano.
Zobrazení dat na webových stránkách HTML
Existuje mnoho způsobů, jak zobrazit data na webových stránkách HTML, jedním z nich je XML a XSLT. Neváhejte a prozkoumejte další způsoby, jak toho dosáhnout, jako je ukládání a zobrazování uživatelského vstupu pomocí JavaScriptu.
