XML Academy 繁體中文教學網站
XML Academy 提供豐富的線上XML教學資源網站，含Xml開啟程式、Xml如何開啟教學、Xml格式、語法、範例、編輯器、XPath、DOM、XSD、XSLT、AJAX、測驗與互動體驗的XML編程教學。
XML 是什麼？
XML 是可延伸標記語言，重點在描述資料，而不是像 HTML 一樣主要負責顯示畫面。它常用於資料交換、系統整合、設定檔、文件結構與標準格式定義。
XML 的核心特性
開發者可以自訂標籤名稱，例如 <productName>、<price>，讓資料更容易理解。
XML 是純文字格式，可被不同語言與平台讀取，非常適合資料交換。
系統可以在原有結構上新增欄位，不一定會破壞舊版程式的讀取方式。
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>小華</to>
<from>老師</from>
<subject>提醒</subject>
<message>請於週五前繳交 XML 作業。</message>
</note>XML vs HTML
HTML 重點是畫面與內容顯示；XML 重點是資料結構與資料內容。
XML 本身不執行功能
XML 不會自動做事，必須由程式讀取、解析、驗證或轉換。
常見應用
RSS、Sitemap、SVG、Office 文件格式、設定檔與企業交換格式都常用 XML。
XML 語法規則
學 XML 最重要的是先寫出 Well-Formed XML。也就是必須有單一根元素、標籤成對、大小寫一致、元素正確巢狀、屬性值加引號，特殊字元需轉義。
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book id="b001">
<title>XML 入門</title>
<author>王小明</author>
<price>580</price>
</book>
</books>新手最常犯的錯誤
<title>XML 是錯的，必須寫成 <title>XML</title>。
<Book> 與 </book> 會被視為不同標籤。
< 應寫為 <，& 應寫為 &。
唯一根元素
整份 XML 文件只能有一個最外層根節點，例如 <catalog>。
屬性值必須加引號
正確：<book id="b01">；錯誤：<book id=b01>。
正確巢狀
<b><i>文字</i></b> 才是正確寫法，不能交錯關閉。
更多範例與教學參考
除了基本 note.xml 之外，實務上還有書籍清單、產品型錄、RSS、Sitemap、命名空間混用文件與 API 傳輸格式等多種 XML 範例。
bookstore.xml
適合練習巢狀資料、屬性、XPath 查詢與 DOM 解析。
RSS Feed
常見於新聞與部落格訂閱，是標準 XML 文件應用的典型案例。
Sitemap.xml
網站地圖用來列出頁面與更新時間，是搜尋引擎常見的 XML 格式。
產品型錄 catalog.xml
適合搭配 XSD 驗證與 XSLT 顯示轉換，模擬商業資料交換情境。
<bookstore>
<book category="WEB">
<title lang="zh-TW">XML 前端實戰</title>
<author>林曉芸</author>
<year>2026</year>
<price>680</price>
</book>
<book category="DATA">
<title lang="zh-TW">資料交換格式設計</title>
<author>陳大為</author>
<year>2024</year>
<price>720</price>
</book>
</bookstore>XML 命名空間 Namespaces
當不同來源的 XML 恰好使用相同標籤名稱時，命名空間可以避免語意衝突。最常見寫法是使用 xmlns 搭配前綴詞，例如 h:table、f:table。
<root xmlns:h="http://www.w3.org/TR/html4/"
xmlns:f="https://example.com/furniture">
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>命名空間三大重點
前綴只是方便閱讀，真正用來區分命名空間的是 URI。
通常將多個 xmlns 寫在根節點，便於整份文件管理。
xmlns="..." 可讓子節點省略前綴。
XML Schema / XSD
XSD 用來定義 XML 允許有哪些元素、屬性、資料型別、出現順序與次數。也就是說，XML 不只要語法正確，還要符合你定義的資料規格。
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="subject" type="xs:string"/>
<xs:element name="message" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>XSD 適合做什麼？
例如字串、整數、日期、布林值，避免錯誤格式流入系統。
可規範元素先後順序，以及某節點可出現幾次。
不同團隊與系統可依據同一份 Schema 進行資料交換。
XML DOM
DOM 會把 XML 視為樹狀結構，讓程式能讀取節點、修改內容、插入新節點或刪除節點。前端常用 DOMParser() 將 XML 字串轉為 XML Document 物件。
const text = `
<bookstore>
<book>
<title>Everyday XML</title>
<author>Amy Chen</author>
</book>
</bookstore>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(text, "text/xml");
const title =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
console.log(title);XPath
XPath 是查詢 XML 的強力工具，可以用路徑語法選取節點、屬性、文字與條件過濾結果，例如 //book/title、//book[@category='WEB']。
常見 XPath 寫法
/bookstore/book/title
//title 可抓出所有 title 節點。
//book[price>600]、//book[@category='WEB']
XSLT：把 XML 轉成 HTML
XSLT 是將 XML 轉換成其他格式的標準工具，最常見就是把 XML 轉成 HTML 表格或文件頁面。你可以用 xsl:template、xsl:for-each、xsl:value-of 來輸出資料。
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>課程清單</h2>
<table border="1">
<tr>
<th>標題</th>
<th>價格</th>
</tr>
<xsl:for-each select="bookstore/book">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>XSLT 適合的情境
把 XML 報表轉成 HTML、文件或其他展示格式。
依需求重新排序、過濾與格式化 XML 內容。
在企業資料交換流程中，XSLT 非常適合做格式轉換。
AJAX + XML
AJAX 可以在不重新整理整頁的情況下向伺服器請求資料，再由 JavaScript 解析 XML 後更新畫面。這很適合做後台報表、即時資料清單與互動式查詢。
function loadCourses() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
const xml = this.responseXML;
const titles = xml.getElementsByTagName("title");
let html = "";
for (let i = 0; i < titles.length; i++) {
html += "<li>" + titles[i].textContent + "</li>";
}
document.getElementById("list").innerHTML = html;
}
};
xhttp.open("GET", "courses.xml", true);
xhttp.send();
}XML Playground / 範本產生器
你可以快速產生一份 XML 樣板，拿來當課堂作業、文件範本、API 回傳範例或資料模型初稿。
<products>
<product id="p001">
<name>產品 1</name>
<price>100</price>
</product>
<product id="p002">
<name>產品 2</name>
<price>200</price>
</product>
<product id="p003">
<name>產品 3</name>
<price>300</price>
</product>
</products>
XML 小測驗
做完以下測驗，可以快速檢查你是否掌握 XML 的基本概念、語法規則、XPath 查詢與 XSD 驗證用途。