---
# System prepended metadata

title: XML

---

### 1. 名詞解釋 

以下是題目中列出的技術名詞簡要定義 ：

* **DOM (Document Object Model)**：文件物件模型，將 HTML/XML 文件視為樹狀結構，讓程式（如 JS）能存取與修改內容。
* **RDF (Resource Description Framework)**：資源描述框架，用於描述網路資源的 W3C 標準（語意網基礎）。
* **XSL (Extensible Stylesheet Language)**：可延伸樣式表語言，用於轉換和呈現 XML。
* **XML Schema (XSD)**：用來定義 XML 文件結構與資料型態的語言。
* **OWL (Web Ontology Language)**：網路本體語言，用於定義術語及其關係，支援語意網。
* **XBRL (eXtensible Business Reporting Language)**：可延伸商業報告語言，專用於財務與商業數據交換。
* **SMIL**：同步多媒體整合語言，用於描述多媒體呈現的時間與佈局。
* **SVG (Scalable Vector Graphics)**：可縮放向量圖形，基於 XML 的 2D 圖形格式。
* **URI (Uniform Resource Identifier)**：統一資源識別碼，用於唯一標識網路上的資源（URL 是其子集）。
* **XPath**：在 XML 文件中導航並選取節點的路徑語言。
* **Well-formed document (格式良好)**：符合 XML 語法規則（如標籤有閉合、屬性有引號）。
* **Valid document (有效)**：除了格式良好外，還符合 DTD 或 Schema 的定義。


* **RWD (Responsive Web Design)**：響應式網頁設計，讓網頁能適應不同裝置的螢幕尺寸。
* **SCORM**：數位學習內容交換標準，確保教材在不同學習平台（LMS）間的互通性。
* **Namespace**：命名空間，解決 XML 標籤名稱衝突的問題（通常使用 URI）。
* **CSS**：層疊樣式表，控制網頁的外觀與佈局。
* **Metadata**：元數據，即「描述資料的資料」。

### 2. 何謂 XML? 特性與優點 

* **定義**：XML (Extensible Markup Language) 可延伸標記語言。
* **特性**：純文字格式、具有自我描述性（Self-descriptive）、標籤可自訂。
* **優點**：跨平台/跨系統資料交換容易、內容（Data）與呈現（Presentation）分離、結構嚴謹。

### 3. XML 發展歷史 

* 源自 1986 年的 **SGML** (標準通用標記語言)。
* 為了適應 Web 傳輸需求，W3C 於 **1998** 年發布 XML 1.0 標準。
* 設計目標是結合 SGML 的強大功能與 HTML 的易用性。

### 4. XML、HTML、SGML 比較 

* **SGML**：母語言，功能最強大但也最複雜，用於大型文件標準。
* **XML**：SGML 的子集（Subset），簡化了 SGML，兼具彈性與簡潔。
* **HTML**：SGML 的一種應用語言，主要用於網頁呈現。

### 5. XML 與 HTML 語法差異 

* **XML**：區分大小寫、標籤必須閉合、標籤可自訂、屬性值必須加引號、空白會被保留。
* **HTML**：不區分大小寫（HTML4）、部分標籤可不閉合、標籤固定（如 `<div>`）、對錯誤容忍度高。

### 6. XML 技術地圖 (家族) 

![螢幕擷取畫面 2025-12-14 132423](https://hackmd.io/_uploads/ry8Scaifbl.png)


### 7-8. Web 2.0 (下一代 Web) 特性 

* **使用者創作內容 (UGC)**：如 Wiki、Blog。
* **參與與互動**：社群網路 (Social Network)。
* **互通性**：API 混搭 (Mashup)。
* **豐富的使用者體驗**：RIA / AJAX 技術。
* **大眾分類法**：標籤 (Tagging / Folksonomy)。
* **去中心化**：長尾效應。
* **軟體即服務**：SaaS。

### 9. (同第2題) 

請參考第 2 題答案。

### 10. 設計理想 XML 的兩大重點 

* **良好的語意化標籤名稱 (Good semantics tag name)**。
* **良好的元素結構 (Good element structure)**：正確使用巢狀結構表達資料關係。

### 11. 完整 XML 網站的三大區域 

1. **資料層**：使用 XML 儲存內容。
2. **轉換層**：使用 DOM 或 Server-side Script 處理。
3. **表現層**：使用 XSL 或 CSS 進行格式化輸出。

### 12-14. XSL 相關 

* **XSL**：是用來轉換 XML 文件的語言。
* **結合方式**：
    * 使用 <?xml-stylesheet ...?> 指令。
    * 伺服器端轉換 (Server-side)。
    * 客戶端 JavaScript 轉換 (Client-side)。
    * 使用專門的 XSLT Processor。


* **XSL 設計模式**：通常指 **Push** (推模式, 樣板驅動) 與 **Pull** (拉模式, 迴圈驅動) 等策略。

### 15. HTML5 解決了 HTML4 的哪些問題? 

* 依賴外掛 (Flash/Silverlight) 才能播放影音的問題（HTML5 新增 `<video>`, `<audio>`）。
* 缺乏語意化結構（HTML4 全是 `<div>`，HTML5 新增 `<header>`, `<article>` 等）。
* 錯誤處理機制不統一。
* 缺乏本地儲存功能（HTML5 新增 LocalStorage）。

### 16. XPath 運算 

* *(此題需要具體的 XML 範例與運算式才能作答，一般考試會給一段 XML，問 /bookstore/book[1]/title 選到什麼)*。\
![image](https://hackmd.io/_uploads/r1YA1CiMWe.png)
![image](https://hackmd.io/_uploads/rkPylCjMWl.png)
a. {姓名, 電話}
b. {金額, 寄款人, 經辦局收款戳}

### 17-18. HTML5 功能與語法改變 

* **語法改變**：宣告簡化 (`<!DOCTYPE html>`)、編碼簡化 (`<meta charset="UTF-8">`)、語法更寬鬆（某些情況下可省略引號）。
* **新增功能**：
    1. **語意標籤**：`nav`, `section`, `footer`。
    2. **多媒體**：`audio`, `video`。
    3. **圖形**：`canvas`, `svg`。
    4. **API**：Geolocation (地理定位), Drag and Drop (拖放), Web Storage。



### 19. DTD 四大指令 

* `<!ELEMENT ...>`：定義元素。
* `<!ATTLIST ...>`：定義屬性。
* `<!ENTITY ...>`：定義實體（變數）。
* `<!NOTATION ...>`：定義外部內容格式。

### 20. DTD vs Namespace 

* **DTD**：用於驗證文件的「合法性」與結構（Validating）。
* **Namespace**：用於解決標籤「名稱衝突」的問題（Unique Identification）。
* **比較**：兩者目的不同，但常一起使用。DTD 較舊，不支援 Namespace 語法；XML Schema 則完美支援 Namespace。

### 21&28. RWD (響應式網頁設計) 

* **定義**： Responsive Web Design。透過一組程式碼，讓網站能適應不同裝置（桌機、平板、手機）。
* **三大技術核心**：
1. **Fluid Grids** (流動佈局/百分比寬度)。
2. **Flexible Images** (彈性圖片 `max-width: 100%`)。
3. **Media Queries** (媒體查詢 `@media`)。



### 22. Web Accessibility (無障礙網頁) 

* **標準**：**WCAG** (Web Content Accessibility Guidelines)。
* **台灣標準**：NCC 無障礙網頁開發規範。
* **四大原則 (POUR)**：
1. **Perceivable (可感知)**：資訊需能被察覺（如圖片加 alt 文字）。
2. **Operable (可操作)**：所有功能可用鍵盤操作。
3. **Understandable (可理解)**：內容與操作易懂。
4. **Robust (穩健)**：兼容各種輔助科技。

* **實作**：圖片需加 alt 屬性 ；連結需有意義的文字描述 。



### 23. DTD 繪圖與實作 

* *(需依據考試給定的 DTD 畫出樹狀圖，並寫出一段符合該 DTD 的 XML)*。

    ex. 
    ```
    <!ELEMENT bookstore (book+)> 
    <!ELEMENT book (title, author, price)>
    <!ATTLIST book id ID #REQUIRED>
    <!ELEMENT title (#PCDATA)>
    <!ELEMENT author (#PCDATA)>
    <!ELEMENT price (#PCDATA)>
    ```
**答案**：
```
    樹狀圖：
    bookstore
     └── book
         ├── title
         ├── author
         └── price

    合法XML：
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE bookstore SYSTEM "bookstore.dtd">
    <bookstore>
        <book id="b1">
            <title>XML Basics</title>
            <author>John Smith</author>
            <price>500</price>
        </book>
    </bookstore>
```

### 24. 表單轉 XML 

* *(需看圖片將機票內容轉為 XML)*。
* **範例結構**：
    ```
    <電子機票>
        <姓名>王小明</姓名>
        <航班>BR123</航班>
        <日期>2024-01-01</日期>
    </電子機票>
    ```



### 25. JSON 

* **資料型態**：JSON 主要針對 **Object (物件 `{ }`)** 與 **Array (陣列 `[ ]`)**。
* **轉換**：XML 的標籤轉為 JSON 的 Key，內容轉為 Value。
```
    JSON
    {
      "student": {
        "id": "S001",
        "name": "Amy",
        "age": 20,
        "courses": ["XML", "Web", "Database"]
      }
    }

    XML
    <?xml version="1.0" encoding="UTF-8"?>
    <student>
        <id>S001</id>
        <name>Amy</name>
        <age>20</age>
        <courses>
            <course>XML</course>
            <course>Web</course>
            <course>Database</course>
        </courses>
    </student>
```

### 26. HTTP 

* **五大特點**：無狀態 (Stateless)、無連線 (Connectionless)、媒體獨立、基於文字、Client-Server 架構。
* **八種方法**：`GET`, `POST`, `PUT`, `DELETE`, `HEAD`, `OPTIONS`, `TRACE`, `CONNECT`。

### 27. CSS 

* **定義**：Cascading Style Sheets。
* **Selector (選擇器)**：用來指定要套用樣式的 HTML 元素（如 tag, id, class）。
* **三種結合方式**：
1. **Inline** (行內)：style 屬性。
2. **Internal** (內部)：`<style>` 標籤。
3. **External** (外部)：`<link>` 引入 .css 檔。


* **Box Model (盒子模型)**：由內而外包含 **Content (內容) -> Padding (內距) -> Border (邊框) -> Margin (外距)**。

### 29. SVG vs Canvas 

* **SVG**：向量圖 (Vector)，基於 XML，每個圖形都是 DOM 元素，適合地圖、圖表，縮放不失真。
* **Canvas**：點陣圖 (Raster)，基於 JavaScript 繪製，適合高頻繁重繪的遊戲或特效，放大會失真。

### 30. JavaScript 

* **功能**：修改 HTML 內容與屬性、修改 CSS 樣式、驗證表單、處理事件。
* **四種輸出方式**：
    1. innerHTML (寫入 HTML 元素)。
    2. document.write() (寫入文件)。
    3. window.alert() (跳出視窗)。
    4. console.log() (控制台輸出)。



### 31. UX vs UI 

* **UX (User Experience)**：使用者體驗。關注使用者的感受、流程順暢度、需求研究。
* **UI (User Interface)**：使用者介面。關注視覺設計、排版、色彩、按鈕美觀。

### 32. XML Schema 實作

```
    <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

      <xs:element name="students">
        <xs:complexType>
          <xs:sequence>
            <xs:element name="student" maxOccurs="unbounded">
              <xs:complexType>
                <xs:sequence>
                  <xs:element name="name" type="xs:string"/>
                  <xs:element name="age" type="xs:integer"/>
                </xs:sequence>
                <xs:attribute name="id" type="xs:string" use="required"/>
              </xs:complexType>
            </xs:element>
          </xs:sequence>
        </xs:complexType>
      </xs:element>

    </xs:schema>

```
    
ANS
```
    <students>
        <student id="S001">
            <name>Amy</name>
            <age>20</age>
        </student>
        <student id="S002">
            <name>Bob</name>
            <age>22</age>
        </student>
    </students>
```


### 33. XQuery 實作
```
<students>
    <student id="S001">
        <name>Amy</name>
        <age>20</age>
    </student>
    <student id="S002">
        <name>Bob</name>
        <age>23</age>
    </student>
    <student id="S003">
        <name>Chris</name>
        <age>19</age>
    </student>
</students>
    
給定的查詢
for $s in /students/student
where $s/age > 20
return $s/name


```
    
ANS
```
<name>Bob</name>
```