Exemple complet : conversion XML + XSLT vers HTML
Préparez deux fichiers :
students.xml: document XML de stockage des données élèvestransform.xsl: feuille de style XSL qui transforme le XML en page HTML
Lorsque le navigateur chargestudents.xml, il applique automatiquement les règles XSLT pour produire la page web.
Si le fichier XML utilise l’encodage
ISO‑8859‑1(jeu de caractères d’Europe occidentale), certains textes non‑anglais ne s’enregistrent pas correctement et provoquent des caractères corrompus. Modifiez systématiquement l’encodage en UTF‑8 dans votre code pour résoudre définitivement ce problème.
students.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<class>
<student>
<name>Tom</name>
<age>12</age>
<height>145</height>
</student>
<student>
<name>Jack</name>
<age>16</age>
<height>175</height>
</student>
<student>
<name>Smiths</name>
<age>22</age>
<height>245</height>
</student>
</class>Langage du code : HTML, XML (xml)Points importants :
<?xml-stylesheet ... ?>: instruction de traitement qui indique au navigateur d’utiliser transform.xsl pour transformer le XML courantencoding="UTF-8": prend en charge tous les caractères linguistiques et évite les caractères illisibles
transform.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Student List</title>
</head>
<body>
<h3>Student Name List</h3>
<ul>
<!-- Parcourt tous les nœuds class/student -->
<xsl:for-each select="class/student">
<li>
<xsl:value-of select="name"/>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>Langage du code : HTML, XML (xml)Explication de la syntaxe principale
<xsl:stylesheet>: balise racine XSLT, déclare l’espace de noms<xsl:template match="/">: correspond au nœud racine XML, point d’entrée de la transformation<xsl:for-each select="class/student">: itère sur chaque nœud étudiant<xsl:value-of select="name"/>: récupère le contenu texte du nœud<name>
3. Mode d’exécution
- Placez les deux fichiersdans le même dossier
- Ouvrez directement
students.xmlavec votre navigateur web - Le moteur XSLT réalise automatiquement la conversion et affiche la page HTML de liste
Apparition de caractères corrompus
- L’en‑tête XML est réglé sur
encoding="ISO‑8859‑1", ce jeu de caractères ne prend pas en charge les textes non anglais ; - L’encodage indiqué dans la balise meta HTML diffère de l’encodage réel du fichier ;
- L’éditeur n’enregistre pas le fichier au format UTF‑8 ;
Afficher toutes les informations des élèves
Si vous voulez afficher nom, âge et taille ensemble, remplacez la boucle :
<xsl:for-each select="class/student">
<li>
Name: <xsl:value-of select="name"/> ,
Age: <xsl:value-of select="age"/> ,
Height: <xsl:value-of select="height"/>
</li>
</xsl:for-each>Langage du code : HTML, XML (xml)
Exemple XSLT
Previous: Présentation
Next: Boucle