Ejemplo completo: conversión de XML + XSLT a HTML
Prepare dos archivos:
students.xml: documento XML original que almacena la información de los estudiantestransform.xsl: hoja de estilos XSL para convertir XML en página HTML
Cuando el navegador cargastudents.xml, aplica automáticamente las reglas XSLT y renderiza la página web.
Si el archivo XML declara la codificación como
ISO‑8859‑1(juego de caracteres de Europa occidental), algunos textos no en inglés no se guardan correctamente y aparecen caracteres corruptos. Debe unificar la codificación a UTF‑8 desde el código para solucionar totalmente el problema.
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>Code language: HTML, XML (xml)Notas importantes:
<?xml-stylesheet ... ?>instrucción de procesamiento: indica al navegador que use transform.xsl para convertir el XML actualencoding="UTF-8"admite caracteres de todos los idiomas y evita caracteres corruptos
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>
<!-- Recorrer todos los nodos 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>Code language: HTML, XML (xml)Explicación de la sintaxis principal
<xsl:stylesheet>: etiqueta raíz de XSLT, declara el espacio de nombres<xsl:template match="/">: coincide con el nodo raíz XML, punto de entrada de la transformación<xsl:for-each select="class/student">: recorre cada nodo de estudiante<xsl:value-of select="name"/>: extrae el contenido de texto del nodo<name>
3. Modo de ejecución
- Coloque los dos archivosdentro de la misma carpeta
- Abra directamente
students.xmlcon el navegador web - El motor XSLT ejecuta la conversión de forma automática y genera la página HTML con listas
Aparecen caracteres corruptos
- La cabecera XML usa
encoding="ISO‑8859‑1", este juego de caracteres no admite contenido distinto al inglés; - La codificación definida en la etiqueta meta de HTML no coincide con la codificación real del archivo;
- El editor no guarda el archivo con codificación UTF‑8;
Mostrar toda la información del estudiante
Si desea mostrar nombre, edad y estatura al mismo tiempo, reemplace el fragmento del bucle:
<xsl:for-each select="class/student">
<li>
Nombre: <xsl:value-of select="name"/> ,
Edad: <xsl:value-of select="age"/> ,
Estatura: <xsl:value-of select="height"/>
</li>
</xsl:for-each>Code language: HTML, XML (xml)
Ejemplo XSLT
Previous: Apresentação
Next: Laço de repetição