### 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 技術地圖 (家族)
### 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 選到什麼)*。\
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>
```
Sign in with Wallet
Connect another wallet