Pentru a vizualiza datele XML ca parte a unei pagini web, puteți utiliza XSLT; browserele nu oferă această capacitate singure.
XML este un limbaj folosit pentru structura, stocarea și schimbul de date. XSLT este un alt limbaj care vă permite să vă transformați datele XML în alte formate, cum ar fi HTML.
Puteți utiliza XSLT pentru a afișa date XML pe o pagină web HTML. Utilizarea XML și XSLT pentru a vă afișa datele poate fi utilă, deoarece vă permite să structurați datele într-un mod care să aibă sens pentru nevoile dvs. specifice.
Cum să adăugați date de exemplu la un fișier XML
Pentru a afișa date XML pe o pagină web, mai întâi trebuie să creați fișierul XML și să adăugați date la acesta.
- Creați un fișier nou numit date.xml.
- În interiorul fișierului XML, declarați codificarea și versiunea XML:
1.0 UTF-8?> - Conectați fișierul XML la un fișier de foaie de stil XSL, pe care îl veți crea într-un pas ulterior.
text/xsl xmlstylesheet.xsl?> - Adăugați date în fișierul XML. XML conține date structurate și stochează fiecare punct de date într-o etichetă separată. Acest exemplu include o etichetă rădăcină numită jocuri. În interiorul jocuri etichetați, stocați fiecare joc individual în interiorul său joc etichetă. Stocați date pentru fiecare joc, cum ar fi Nume și dezvoltator în etichete separate.
1.0 UTF-8?>
text/xsl xmlstylesheet.xsl?>
<jocuri>
<joc>
<Nume>Ultimul dintre noi partea a II-aNume>
<dezvoltator>Câine obraznicdezvoltator>
joc>
<joc>
<Nume>Fantoma lui TsushimaNume>
<dezvoltator>Sucker Punch Productionsdezvoltator>
joc>
<joc>
<Nume>Death StrandingNume>
<dezvoltator>Kojima Productionsdezvoltator>
joc>
jocuri>
Cum să utilizați XSLT pentru a citi datele din fișierul XML
Creați un nou fișier XSL pentru a trece prin fiecare punct de date din pagina XML și pentru a afișa datele.
- În același folder cu fișierul XML, creați un fișier nou numit xmlstylesheet.xsl.
- În interiorul fișierului, declarați versiunea XSL și adăugați structura de bază a etichetelor XSL:
1.0 UTF-8?>
<xsl: foaie de stilversiune="1.0"xmlns: xsl=" http://www.w3.org/1999/XSL/Transform">
// Codul dvs. aici
xsl: foaie de stil> - În interiorul etichetei XSL principale, adăugați a șablon etichetă. Aici puteți adăuga cod HTML personalizat pentru a afișa și a stila datele dvs. XML.
<xsl: șablonMeci="/">
<html>
<corp>
// Codul dvs. HTML aici
corp>
html>
xsl: șablon> - În interiorul etichetei corporale, utilizați xsl: pentru fiecare selector de etichete. Aceasta va acționa ca o buclă pentru a trece prin fiecare joc etichetă imbricată sub jocuri etichetă.
<xsl: pentru fiecareSelectați="jocuri/joc">
xsl: pentru fiecare> - În interiorul buclei pentru fiecare, afișați numele și punctele de date ale dezvoltatorului, folosind xsl: valoare-de selector de etichete.
<xsl: valoare-deSelectați="Nume" />
<xsl: valoare-deSelectați="dezvoltator" />
Cum să afișați date pe o pagină web HTML
Nu veți putea deschide fișierul XSLT sau XML direct în browser pentru a vizualiza datele ca parte a unei pagini web. Creați un fișier HTML nou și redați datele folosind un iframe etichetă.
- În același folder cu fișierele XML și XSL, creați un fișier nou numit index.html.
- Adăugați structura de bază a unui fișier HTML. Dacă nu ați folosit HTML înainte, puteți perfecționa concepte introductive HTML.
html>
<html>
<cap>
<titlu>Exemplu XML și XSLTtitlu>
cap>
<corp>
corp>
html> - În interiorul corp etichetați, utilizați un iframe etichetă pentru a lega fișierul XML și fișierul XSL:
<h1>Exemplu XML și XSLTh1>
<p>Următorul conținut este generat dintr-un fișier XML:p>
<iframesrc=„data.xml”xslt=„xmlstylesheet.xsl”>iframe> - Creați un fișier nou numit stiluri.css.
- În interiorul fișierului, adăugați niște CSS pentru a vă stila pagina web. Simțiți-vă liber să vă modificați CSS-ul folosind alte elemente interesante Sfaturi și trucuri CSS.
html,
corp {
inaltime: 100%;
marja: 0;
}corp {
display: flex;
justificare-conținut: centru;
alinierea elementelor: centru;
flex-direcție: coloană;
}p {
margine-jos: 24px;
} - Conectați fișierul HTML la stilul CSS adăugând următoarele la eticheta HTML head.
<legăturărel="foaia de stil"href=„styles.css”> - Deschideți fișierul HTML folosind un browser pentru a vizualiza datele XML. Unele browsere nu acceptă XSLT, dar unele browsere, cum ar fi Firefox, acceptă.
Afișați datele în pagini web HTML
Există multe modalități de afișare a datelor în paginile web HTML, XML și XSLT fiind una dintre ele. Simțiți-vă liber să explorați alte modalități în care puteți face acest lucru, cum ar fi stocarea și afișarea intrărilor utilizatorului folosind JavaScript.