如何使用 XSLT 在 HTML 網頁上顯示 XML 數據
XML 是一種用於構建、存儲和交換數據的語言。XSLT 是另一種語言，它允許您將 XML 數據轉換為其他格式，例如 HTML。
您可以使用 XSLT 在 HTML 網頁上顯示 XML 數據。使用 XML 和 XSLT 來顯示您的數據可能很有用，因為它允許您以對您的特定需求有意義的方式構建數據。
如何將示例數據添加到 XML 文件
要在網頁上顯示 XML 數據，首先需要創建 XML 文件並向其中添加數據。
- 創建一個名為data.xml的新文件。
- 在 XML 文件中，聲明編碼和 XML 版本：
<?xml version="1.0"encoding="UTF-8"?> - 將 XML 文件鏈接到 XSL 樣式表文件，您將在後面的步驟中創建該文件。
<?xml-stylesheet type="text/xsl"href="xmlstylesheet.xsl"?> - 將數據添加到 XML 文件。XML 包含結構化數據，並將每個數據點存儲在單獨的標記中。此示例包含一個名為games的根標籤。在遊戲標籤內，將每個單獨的遊戲存儲在其自己的遊戲標籤內。將每個遊戲的數據（例如名稱和開發者）存儲在單獨的標籤中。
<?xml version="1.0"encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl"href="xmlstylesheet.xsl"?>
<games>
<game>
<name>The Last of Us Part II</name>
<developer>Naughty Dog</developer>
</game>
<game>
<name>Ghost of Tsushima</name>
<developer>Sucker Punch Productions</developer>
</game>
<game>
<name>Death Stranding</name>
<developer>Kojima Productions</developer>
</game>
</games>
如何使用 XSLT 從 XML 文件中讀取數據
創建一個新的 XSL 文件以遍歷 XML 頁面中的每個數據點並顯示數據。
- 在與 XML 文件相同的文件夾中，創建一個名為xmlstylesheet.xsl的新文件。
- 在文件中，聲明 XSL 版本，並添加基本的 XSL 標記結構：
<?xml version="1.0"encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
// Your code here
</xsl:stylesheet> - 在主 XSL 標記內，添加一個模板標記。您可以在此處添加自定義 HTML 代碼以顯示和設置 XML 數據的樣式。
<xsl:template match="/">
<html>
<body>
// Your HTML code in here
</body>
</html>
</xsl:template> - 在 body 標籤內，使用xsl:for-each標籤選擇器。這將作為一個 for 循環來循環遍歷嵌套在遊戲標籤下的每個遊戲標籤。
<xsl:for-each select="games/game">
</xsl:for-each> - 在 for-each 循環內，使用xsl:value-of標記選擇器顯示名稱和開發人員數據點。
<xsl:value-of select="name" />
<xsl:value-of select="developer" />
如何在 HTML 網頁上顯示數據
您將無法直接在瀏覽器中打開 XSLT 或 XML 文件來查看作為網頁一部分的數據。創建一個新的 HTML 文件，並使用iframe標記呈現數據。
- 在與 XML 和 XSL 文件相同的文件夾中，創建一個名為index.html的新文件。
- 添加 HTML 文件的基本結構。如果您以前沒有使用過 HTML，則可以復習一下 HTML 的介紹性概念。
<!DOCTYPE html>
<html>
<head>
<title>XML and XSLT Example</title>
</head>
<body>
</body>
</html> - 在body標籤內，使用iframe標籤鏈接到 XML 文件和 XSL 文件：
<h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="xmlstylesheet.xsl"></iframe> - 創建一個名為styles.css的新文件。
- 在文件中，添加一些 CSS 來設置網頁樣式。隨意使用其他有趣的 CSS 提示和技巧修改您的 CSS。
html,
body {
height: 100%;
margin: 0;
}body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}p {
margin-bottom: 24px;
} - 通過將以下內容添加到 HTML head 標記，將您的 HTML 文件鏈接到 CSS 樣式。
<link rel="stylesheet" href="styles.css"> - 使用瀏覽器打開 HTML 文件以查看 XML 數據。某些瀏覽器不支持 XSLT，但某些瀏覽器（如 Firefox）支持。
在 HTML 網頁中顯示數據
在 HTML 網頁中顯示數據的方法有很多種，XML 和 XSLT 就是其中之一。隨意探索可以執行此操作的其他方法，例如使用 JavaScript 存儲和顯示用戶輸入。
發佈留言