2.1 XML、HTML、XHTML、DHTML、HTML DOM

  可擴展標記語言 (Extensible Markup Language, XML) 是一種邏輯性的文件架構,而不是一種特定的語言。將資料以 XML 的格式儲存,可使其更容易被電腦存取。以下即為一個 XML 文件的範例,要讓電腦能讀懂這些內容,必須先定義每一個標籤所代表的意義。
<?xml version="1.0" encoding="UTF-8"?>
<mail>
    <to>Steve</to>
    <from>Bill</from>
    <title>Good Morning</title>
    <content>Hello, Steve!</content>
</mail>
  超文本標記語言 (Hypertext Markup Language, HTML) 是最基本的網頁標記語言,副檔名使用 .html 或 .htm 皆可,最新版本為 HTML4.01 (HTML5 仍為草案)。HTML 在結構上類似 XML,但較 XML 鬆散,並且多數瀏覽器皆有容錯設計,能正常顯示語法不夠嚴謹、有些微錯誤的網頁。但使用不嚴謹的語法,容易產生一些超乎預期的錯誤,故逐漸衍生出結構嚴謹、符合 XML 架構的 XHTML。XHTML 的最新版本為 1.1,且與 HTML 相同,皆由 W3C 維護。以下為一些 HTML 與 XHTML 的比較:
巢狀結構HTML/XHTML<p>here is an emphasized<em>paragraph</em></p>
HTML only<p>here is an emphasized<em>paragraph</p></em>
小寫標籤HTML/XHTML<li>
HTML only<LI>
結束標籤HTML/XHTML<p>here is a paragraph</p><p>here is another paragraph</p>
HTML only<p>here is a paragraph<p>here is another paragraph
完整屬性HTML/XHTML<input type="checkbox" checked="checked">
HTML only<input type="checkbox" checked>
空元素HTML/XHTML<br/><hr/>
HTML only<br><hr>
屬性值HTML/XHTML<td rowspan="3">
HTML only<td rowspan=3>
  動態 HTML (Dynamic HTML, DHTML) 指的是一種結合 HTML、CSS、客戶端語言、文件物件模型 (Document Object Model, DOM) 來建立互動性網頁的方法。至於 DOM 指的是將物件的概念融入 HTML 或 XML 中,使開發者可以藉由程式直接控制每一個物件 (元素)。專門針對 HTML 文件的 DOM 稱為 HTML DOM,例如:
程式碼節點樹
<table>
    <tbody>
        <tr>
            <td>Shady Grove</td>
            <td>Aeolian</td>
        </tr>
        <tr>
            <td>Over the River, Charlie</td>
            <td>Dorian</td>
        </tr>
    </tbody>
</table>
Copyright © 2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
隨堂練習:試畫出一份 XML 文件的 DOM 節點樹。
註:HTML5 已於 2014 年 10 月正式發行。