XML + XSLT 轉換 HTML 完整範例
準備兩份檔案：
students.xml：原始資料XML文件，存放學生資訊transform.xsl：XSL樣式表，用來把XML轉成HTML網頁
瀏覽器載入students.xml時，會自動套用XSLT規則渲染成網頁。
XML檔宣告編碼為
ISO‑8859‑1（西歐字元集），部分非英文文字無法正常儲存，直接出現亂碼；需要透過程式統一改成UTF‑8編碼，才能徹底解決亂碼問題。
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)重點說明：
<?xml-stylesheet ... ?>處理指令：告訴瀏覽器使用transform.xsl轉換目前的XMLencoding="UTF-8"支援各國語言字元，避免亂碼
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>
<!-- 迴圈讀取所有 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)核心語法解釋
<xsl:stylesheet>：XSLT根標籤，宣告命名空間<xsl:template match="/">：比對XML根節點，轉換的進入點<xsl:for-each select="class/student">：逐一遍歷每個學生節點<xsl:value-of select="name"/>：取出<name>節點的文字內容
3、執行方式
- 把兩個檔案放在同一個資料夾
- 直接用瀏覽器打開
students.xml - XSLT引擎自動完成轉換，最後渲染出HTML列表頁面
出現亂碼
- XML開頭設定
encoding="ISO‑8859‑1"，該字元集不支援非英文內容； - HTML的meta標籤編碼與檔案實際編碼不一致；
- 儲存檔案時編輯器的編碼不是UTF‑8；
顯示完整學生資訊
如果想同時顯示姓名、年齡、身高，替換迴圈區段：
<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>Code language: HTML, XML (xml)