迹忆客 专注技术分享

本文介绍如何在 HTML 页面上显示 XML 代码。

可扩展标记语言 (XML) 简介

它是一种类似于 HTML 的标记语言，但没有内置标签。 相反，标签是由用户根据用户的要求创建的。

这是一种以结构化方式存储数据的有效方法，以后可以在不同端点之间快速访问、搜索和共享数据。

最重要的是，因为 XML 语法是标准化的，所以即使您开始跨平台或系统共享或传输 XML，无论是直接还是通过 Web，接收者仍然能够解析数据。

与 HTML 的区别

它与 HTML 有点相同，因为两者都使用标签，但不同的是 XML 没有任何预定义的标签。 相反，所有标签都是根据用户的需要和要求制作的。

这些标签具有适当的数据格式，可以从一个标签传输到另一个标签。 此外，HTML 关注网页的外观并对其进行增强，而 XML 只是发送给某人的一条信息或数据。

在 HTML 中显示 XML 代码

由于 XML 也与标签一起工作，因此在 HTML 页面上显示 XML 代码是一项挑战，因为它还会通过 HTML 标签的操作来操作 XML 标签。

因此，如果我们需要在 HTML 页面上显示 XML 代码，我们既可以将其封装在 <xmp> 标签中，也可以将其写在 <textarea> 中。

在这两种情况下，在呈现 HTML 页面时都不会操作 XML 标记，但会显示整个代码。

使用 <xmp> 标签在 HTML 页面上显示 XML 代码

示例代码：

<h1> Example to display XML code in HTML </h1>
<xmp>
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <article>
        <data>
            <title>Test HTML page</title>
            <author>NSS</author>
            <country>Pakistan</country>
            <year>2022</year>
        </data>
    </article>
</xmp>

上面的 HTML 代码使用 <xmp> 标签并将我们的 XML 数据包含在这个标签中。 XML 数据包含一些数据。 XML的每一个标签都是其中保留的数据的名称。

现在，<xmp> 的效果是该 XML 代码将按原样显示，无需解释。 请注意，我们还在代码中使用了 HTML 标记来标记两者之间的区别。

但问题是 <xmp> 标签现在在 HTML 3.2 之后被弃用了。 因此，在当前的 HTML 版本中直接使用它是不可取的。

使用 <textarea> 标签在 HTML 页面上显示 XML 代码

显示 XML 代码的另一种方法是将其包含在 <textarea> 中。 <textarea> 的功能也是如此。 它将按原样显示其中的任何文本而无需对其进行操作。

我们可以指定行数和列数来设置 <textarea> 的大小。 请看下面的示例，我们使用 <textarea> 以预格式化的样式在屏幕上显示 XML。

示例代码：

<h1> Example to display XML code in HTML </h1>
<textarea cols="35" rows="20" style="border:none;">
    <?xml version="1.0" encoding="ISO-8859-1"?>
<article>
    <data>
        <title>Test HTML page</title>
        <author>NSS</author>
        <country>Pakistan</country>
        <year>2022</year>
    </data>
</article>
</textarea>

我们应用了 border: none 以便它隐藏文本框并且不显示它。 让我们看看它的输出。

因此我们可以说，如果我们需要按原样显示任何 XML 代码而不在 HTML 页面上呈现其标记，我们可以使用这两种方法中的任何一种。