HTML 與 XML 之間有何差異?

HTML 和 XML 是應用程式開發和 Web 開發常用的兩種標記語言。即使它們具有相似的名稱,但也有不同的使用案例。HTML 主要用於開發應用程式的 UI。它呈現在網站或應用程式上看到的文字、影像、按鈕、核取方塊和下拉式方塊。相較之下,XML 的主要用途是資料的交換和傳輸。它以機器和人類可讀的格式來對資料進行編碼。XML 描述資料的內容,而 HTML 則確定向最終使用者顯示資料的方式。

閱讀有關 XML 的內容 »

HTML 與 XML 之間有什麼相似之處?

XML 和 HTML 以及其他語言,如 LaTeX、SVG、Markdown 和 SGML,均屬於稱為標記語言的程式設計語言系列。

標記語言是一種用於向人類和其他軟體程式描述資料的系統。該語言使用易於閱讀的語法來定義資料的結構、類型、屬性、部件之間的關係、顯示和含義。 

作為標記語言,HTML 和 XML 有幾點相似之處。

語法

標記語言通常具有類似的語法,包括標籤和屬性。

標籤

標籤由諸如括號、逗號和句點的符號表示。標籤提供資料元素的結構和類型。它們定義內容的每個元素的開始和結束。在 XML 和 HTML 中,標籤包含在尖括號內,每個元素介於兩個一組的開口和閉合標籤之間。

屬性

屬性提供有關元素的詳細資訊,例如影像 URL。在 HTML 和 XML 中,可以在開口標籤內定義元素的屬性。

定義良好的結構

HTML 和 XML 文件都必須遵守指定語言的語法規則,才能得到正確處理。遵循規則的文件稱為格式良好的文件。格式良好的文件需要以下內容:

  1. 單個根元素
  2. 所有元素的閉合 (或自閉合) 標籤
  3. 以包含在其他標籤中的標籤形成正確的巢狀結構
  4. 正確描述特殊字元,例如 & 代表符號 &

開發人員使用文字編輯器應用程式或整合式開發環境 (IDE) 來編寫和檢查語法。

閱讀有關 IDE 的內容 »

用量

開發人員通常不會自己使用 HTML 或 XML 標記語言。這些語言與指令碼語言相結合,以建立動態網頁和應用程式。動態應用程式會因新傳入的資料而變更。

在 HTML 的情況下,應用程式頁面透過產生新 HTML 的指令碼語言動態變更。對於 XML,指令碼語言會使用新資訊來更新參數。

平台獨立性

平台獨立性是語言無需進行任何修改即可在不同的作業系統和平台上工作的能力。XML 和 HTML 均以文字為基礎,並且使用簡單的語法。這使得不同的軟體應用程式和作業系統可輕鬆解讀它們。XML 和 HTML 程式碼可跨瀏覽器和不同行動平台執行。

主要語法差異:HTML 與XML

HTML 和 XML 之間的主要差異在於它們的標籤。HTML 具有預定義的標籤,每個人都必須使用這些標籤。在編寫 HTML 時,您無法建立自己的標籤。相比之下,XML 會使用您能夠以文件建立者身分定義的自訂標籤。

接下來,我們深入討論 HTML 和 XML 在其標籤中的不同之處。

預定義標籤

HTML 中提供預定義的標籤。這意味著標籤本身來自 HTML 標準定義的集合清單。目前的 HTML 標準是 HTML5。 

以下是 HTML5 預定義標籤的範例:

  • <header> 是文件標頭的標籤
  • <p> 是段落的標籤
  • <h1><h6> 是六個標題等級的標籤
  • <a> 是超連結的標籤
  • <img> 是影像的標籤
  • <div> 是將其他元素分組的容器元素的標籤
  • <body> 是定義主要內容的標籤

相反,對於 XML,標籤是可擴展的,這意味著可出於文件用途自訂這些標籤。身為文件建立者,您可以定義標籤和屬性。它們可以是字母和數字的任意組合。

通常,文件建立者會使用描述資料的純文字。您必須編寫 XML 結構描述,其中定義用於驗證文件和形成共同理解的標籤與屬性。

我們在如下資料表中給出 HTML 和 XML 語法的一些範例。

HTML

XML

<p class="body_paragraph">這是一個段落</p>

class = 表示元素具有可用來套用樣式的類屬性 body_paragraph

<country language="English">加拿大</country>

country 表示國家/地區元素。language 表示該元素具有語言屬性:English。

<body>

<h1>這是標題</h1>

<p class="body_paragraph">這是一個段落</p>

<div>

<h2>這是副標題</h2>

<p>這是另一個段落</p>

</div>

</body>

<continent name="Europe">

<country language="English">

英國

<currency>GBP</currency>

</country>

<country language="German">

德國

<currency>EUR</currency>

</country>

</continent>

自閉合標籤

在 HTML 中,由於缺少內容,某些元素可以使用自閉合標籤 (以閉合斜線表示)。數量有限的 HTML 標籤可以使用自閉合標籤。

相比之下,XML 中的自閉合標籤可以存在於沒有內容的任何位置。

HTML

XML

<img src="my_image.jpg" alt="My image" />

<country name="United Kingdom" currency="GBP" />

其他主要差異:HTML 與XML

儘管它們有相似之處,但 XML 和 HTML 也有幾點區別。

目標

HTML 通常稱為 Web 語言。HTML 的主要用途是在瀏覽器中以圖形形式顯示內容,這些內容在以文字為基礎的文件中給出。

相比之下,XML 允許不同的應用程式以普遍理解的方式交換和存儲資料及其結構。XML 的主要用途是允許不同類型的應用程式 (如資料庫) 理解和使用相同的資料及其結構。 

動態

HTML 使用動態類型化,其中在執行期依據預期的資料類型檢查屬性類型。例如,如果屬性預期為數字,但是以字串形式輸入,則可能會在執行期導致網頁錯誤或非預期的行為。藉助動態類型化,可以使用新傳入的資料變更網頁。

相比之下,XML 使用靜態類型化,其中在 XML 結構描述中預先定義屬性類型,並在編譯或處理之前進行檢查。靜態類型化會導致更少的錯誤,但動態內容也較少。

結構描述

文件類型定義 (DTD) 或結構描述提供可針對類似文件驗證和重複的結構。它們通常包括如下資訊:

  • 使用中的 HTML 或 XML 版本
  • 允許的元素和屬性
  • 文件結構與元素關係的規則

在 HTML 中,DTD 是包含在 HTML 文件開頭的聲明。

在 XML 中,DTD 是單獨的檔案。DTD 在 XML 中更為重要,因為 XML 標籤是由文件建立者所定義的。DTD 有助於資料傳送方和接收方之間形成對標籤的相同理解。

使用 HTML 和 XML 的時機

HTML 是一種稱為簡報語言的標記類型。名稱簡報語言是由於 HTML 用於顯示用途。可以使用 HTML 來建立網頁和用戶端 Web 應用程式。它通常與用於形成樣式的階層式樣式表 (CSS) 和用於動態行為的 JavaScript 程式設計語言相結合。

相比之下,可以使用 XML 在兩個應用程式或系統之間交換資料。若要了解相同的格式,應用程式具有定義 XML 檔案內容的共用 XML 結構描述。

XML 仍得到廣泛使用,而 JSON 是另一種用於資料交換的輕量級標記語言,目前由於其可快速剖析而變得更受歡迎。您可以閱讀 JSON 和 XML 的比較,以選擇最適合自己的資料交換格式。

如何同時使用 HTML 和 XML

XML 可以內嵌在 HTML 中,並用 JavaScript 編程語言進行解析以建立動態的網頁。同樣,HTML 也可以在必要時內嵌在 XML 中 (使用純文字的字元資料 (CDATA))。請參閱以下範例。

HTML 中的 XML

XML 中的 HTML

<html>

  <head>

<title>內嵌式 XML 頁面</title>

    <script type="text/xml">

      <data>

        <item>

<name>蘋果</name>

          <price>1.00</price>

        </item>

        <item>

<name>百香果</name>

          <price>2.00</price>

        </item>

      </data>

    </script>

  </head>

  <body>

<h1>動態水果價格</h1>

    <div id="output"></div>

    <script>

      var xml = document.querySelector('script[type="text/xml"]').textContent;

      var parser = new DOMParser();

      var doc = parser.parseFromString(xml, "text/xml");

      var output = document.querySelector('#output');

      var items = doc.getElementsByTagName('item');

      for (var i = 0; i < items.length; i++) {

        var item = items[i];

        var name = item.getElementsByTagName('name')[0].textContent;

        var price = item.getElementsByTagName('price')[0].textContent;

        output.innerHTML += '<div><strong>' + name + '</strong>: ' + price + '</div>';

      }

    </script>

  </body>

</html>

<embeddedHTML>

<title>內嵌在 XML 中的 HTML 程式碼</title>

    <description><![CDATA[

        <div>

<h1>內嵌式 HTML 標頭</h1>

<p>內嵌式 HTML 段落。</p>

        </div>

    ]]></description>

</embeddedHTML>

可擴展超文字標記語言 (XHTML) 是另一種在其語法中結合 HTML 和 XML 的標記語言。

主要差異摘要:HTML 與XML

 

HTML

XML

這是什麼?

主要用於在瀏覽器中顯示結構化內容的標記語言。

主要用於在電腦系統之間交換結構化資料的標記語言。

發行年份

1998 年。

1993 年。

作用

簡報語言。

資料交換語言。

使用時機

建置用戶端網頁或 Web 應用程式。

在兩個系統之間交換資料 (但請檢查 JSON 是否為更合適的格式)。

標籤

預定義的標籤。

可擴展的標籤。

動態

類型化。

使用 XML 結構描述時固定。

AWS 如何支援您的 HTML 和 XML 需求?

所有 Amazon Web Services (AWS) 資料整合服務都能處理 XML 檔案。以下是兩個範例:

  • AWS Glue 是一種無伺服器資料整合服務,可以使用此服務透過互動式的點按式視覺化界面來準備資料,而無需編寫程式碼。AWS Glue DataBrew 可以輸入所有類型的檔案格式,包括 XML。
  • Amazon Simple Queue Service (Amazon SQS) 是全受管訊息佇列服務,可用來在任何磁碟區的軟體元件之間傳送、儲存和接收訊息。Amazon SQS 訊息可包含最多 256 KB 的文字資料,包括 XML、JSON 和無格式資料。

同樣,AWS 提供各式各樣的工具和服務來大規模開發、部署和操作您的應用程式。例如,可以使用以下兩種服務:

  • 使用 AWS Amplify Studio,您可以直觀地建置像素完美的 UI。只需按幾下滑鼠,即可將您的前端 UI 連線至雲端後端。
  • 透過 Amazon Lightsail,您只需按幾下滑鼠,就可以使用預先設定的開發堆疊建立自訂應用程式和網站。

立即建立帳戶,開始在 AWS 上部署應用程式。

與 AWS 搭配使用的後續步驟