För att visa XML-data som en del av en webbsida kan du använda XSLT; webbläsare tillhandahåller inte denna funktion på egen hand.
XML är ett språk som används för att strukturera, lagra och utbyta data. XSLT är ett annat språk som låter dig omvandla din XML-data till andra format, som HTML.
Du kan använda XSLT för att visa XML-data på en HTML-webbsida. Att använda XML och XSLT för att visa dina data kan vara användbart, eftersom det låter dig strukturera data på ett sätt som är vettigt för dina specifika behov.
Hur man lägger till exempeldata till en XML-fil
För att visa XML-data på en webbsida måste du först skapa XML-filen och lägga till data till den.
- Skapa en ny fil som heter data.xml.
- Inuti XML-filen, deklarera kodningen och XML-versionen:
1.0 UTF-8?> - Länka XML-filen till en XSL-formatmallsfil, som du kommer att skapa i ett senare steg.
text/xsl xmlstylesheet.xsl?> - Lägg till data i XML-filen. XML innehåller strukturerad data och lagrar varje datapunkt i en separat tagg. Det här exemplet innehåller en root-tagg som kallas spel. Inuti spel tag, lagra varje enskilt spel i sitt eget spel märka. Lagra data för varje spel som t.ex namn och utvecklare i separata taggar.
1.0 UTF-8?>
text/xsl xmlstylesheet.xsl?>
<spel>
<spel>
<namn>The Last of Us Del IInamn>
<utvecklare>Stygg hundutvecklare>
spel>
<spel>
<namn>Tsushimas spökenamn>
<utvecklare>Sucker Punch Productionsutvecklare>
spel>
<spel>
<namn>Death Strandingnamn>
<utvecklare>Kojima Productionsutvecklare>
spel>
spel>
Hur man använder XSLT för att läsa data från XML-filen
Skapa en ny XSL-fil för att gå igenom varje datapunkt på XML-sidan och visa data.
- Skapa en ny fil som heter i samma mapp som din XML-fil xmlstylesheet.xsl.
- Inuti filen, deklarera XSL-versionen och lägg till den grundläggande XSL-taggstrukturen:
1.0 UTF-8?>
<xsl: stilmallversion="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Din kod här
xsl: stilmall> - Lägg till en inuti XSL-taggen mall märka. Det är här du kan lägga till anpassad HTML-kod för att visa och stil dina XML-data.
<xsl: mallmatch="/">
<html>
<kropp>
// Din HTML-kod här
kropp>
html>
xsl: mall> - Inuti body-taggen, använd xsl: för varje taggväljare. Detta kommer att fungera som en for-loop för att gå igenom var och en spel taggen kapslad under spel märka.
<xsl: för varjeVälj="spel/spel">
xsl: för varje> - Visa namnet och utvecklardatapunkterna inuti för varje loop med hjälp av xsl: värde-av taggväljare.
<xsl: värde-avVälj="namn" />
<xsl: värde-avVälj="utvecklare" />
Hur man visar data på en HTML-webbsida
Du kommer inte att kunna öppna XSLT- eller XML-filen direkt i webbläsaren för att se data som en del av en webbsida. Skapa en ny HTML-fil och rendera data med en iframe märka.
- Skapa en ny fil som heter i samma mapp som dina XML- och XSL-filer index.html.
- Lägg till den grundläggande strukturen för en HTML-fil. Om du inte har använt HTML tidigare kan du fräscha upp inledande HTML-koncept.
html>
<html>
<huvud>
<titel>Exempel på XML och XSLTtitel>
huvud>
<kropp>
kropp>
html> - Inuti kropp tagga, använd en iframe tagg för att länka till XML-filen och XSL-filen:
<h1>Exempel på XML och XSLTh1>
<sid>Följande innehåll genereras från en XML-fil:sid>
<iframesrc="data.xml"xslt="xmlstylesheet.xsl">iframe> - Skapa en ny fil som heter styles.css.
- Inuti filen lägger du till lite CSS för att utforma din webbsida. Ändra gärna din CSS med andra intressanta CSS tips och tricks.
html,
kropp {
höjd: 100%;
marginal: 0;
}kropp {
display: flex;
motivera-innehåll: center;
align-items: center;
flex-riktning: kolumn;
}p {
margin-bottom: 24px;
} - Länka din HTML-fil till CSS-stilen genom att lägga till följande i HTML-head-taggen.
<länkrel="stilmall"href="styles.css"> - Öppna din HTML-fil med en webbläsare för att se dina XML-data. Vissa webbläsare stöder inte XSLT, men vissa webbläsare som Firefox gör det.
Visa data i HTML-webbsidor
Det finns många sätt att visa data på HTML-webbsidor, XML och XSLT är ett av dem. Utforska gärna andra sätt du kan göra detta på, som att lagra och visa användarinmatning med JavaScript.