`
fanjava
  • 浏览: 235696 次
  • 来自: ...
文章分类
社区版块
存档分类
最新评论

第一个XML文档

阅读更多

3章 第一个XML文档

本章教读者用自己定义的可为文档所理解的标记来创建简单的XML文档。读者将学到如何编写样式单,以便用于在文档中描述标记内容如何显示。最后,还要学到如何将文档装到Web浏览器中以便查看。<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

由于本章利用示例来加以讲解,而不是从原理出发,因而不会涉及许多细节。有经验的读者将会注意到几处例外和特殊情况没有在本章加以讨论。对此不必担心。在下几章中将会讨论到。对于大部分内容,不必太关心技术内容。正如HTML一样,也可通过复制其他人创建的简单的示例并按自己的需要加以修改来学习。

为了达到上述目的,我鼓励大家按我在本章中给出的示例键入程序逐步进行,并将这些代码装入讨论过的不同的程序中。这将使读者对XML产生基本感受,这将使在未来几章中提到的技术细节在特定示例的环境中容易掌握。

本章的主要内容包括:

·???????? 创建简单的XML文档

  • 仔细研究这个简单的XML文档

  • 赋给XML标记以具体意义

  • XML文档上附加样式单

3.1 Hello XML

本节遵照老程序员介绍新语言的传统,先用一个能够在屏幕上打印出“Hello World”的程序加以介绍。XML是标记语言,而不是编程语言,但是基本原理还是适用的。最简单的方法是以一个完全的可运行的有扩展能力的示例开始,而不要尝试以更基本的无任何功能的程序开始。如果用户在使用基本的工具时确实遇到了问题,在简短的文档环境中也比在复杂的文档环境下更容易调试和改正。

在本节中,读者将学到如何创建一个简单的XML文档并将其保存在文件中。然后我们对其中的代码及其意义再加以仔细考察。

<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" /><chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899"><span style="mso-bookmark: _Toc509819502"><span lang="EN">3.1.1</span></span></chsdate> 创建一个简单的XML文档

在本节中,读者将学到如何键入一个实际的XML文档。我们从能够想像得到的最简单的XML文档开始。这个文档列在清单3-1中:

清单3-1Hello XML

<?xml version="1.0" standalone="yes"?>

<foo></foo>

Hello XML!

这虽然不太复杂,但却是一个“好”的XML的文档。更准确地说,这是一个结构完整的XML文档(XML中有一些用于文档的专门术语,依照到底满足了哪条规则而被认为是的 。其中“结构完整的”就是一条这样的术语,在本书的后面要对此加以讨论。)可在任何使用方便的文本编辑器,如NotepadBBEdit或是emacs中键入这个文档。

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 33.75pt; HEIGHT: 21pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www1.xml.net.cn/books/bible/image/Image18.gif" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image001.png"><font face="宋体"></font></imagedata></shape>结构完整性将在第6结构完整的XML文档中加以讨论。

<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899"><span style="mso-bookmark: _Toc509819503"><span lang="EN">3.1.2</span></span></chsdate> 保存XML文件

当键入了上面的代码之后,请将该文档保存在名为hello.xml的文件中。也可以使用诸如HelloWorld.xmlMyFirstDocument.xml或是其他文件名,但三个字母的扩展名.xml是标准的,一般不要更改。而且还要确保以普通的文本格式加以保存,而不要用某些字处理程序,如WordPerfectMicrosoft Word的内建格式。

<shape id="_x0000_s1026" style="MARGIN-TOP: -120.35pt; Z-INDEX: 1; MARGIN-LEFT: -85.05pt; WIDTH: 33.75pt; POSITION: absolute; HEIGHT: 35.25pt; mso-wrap-distance-left: 0; mso-wrap-distance-right: 0; mso-position-vertical-relative: line" alt="" type="#_x0000_t75" o:allowoverlap="f"><font face="宋体"><imagedata src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image003.gif" o:title="Image19"></imagedata><?xml:namespace prefix = w ns = "urn:schemas-microsoft-com:office:word" /><wrap type="square"></wrap></font></shape>如果使用的是Windows 95/98上的Notepad来编辑文件,当保存文档时,一定要将文件名用双引号括起来,即“Hello.xml”,而不要只是Hello.xml,正如图3-1所示的一样。如果没有引号,Notepad会在文件名后再加上.txt扩展名,也就是文件名变成了Hello.xml.txt,这完全不是我们所希望出现的。

<shape id="_x0000_i1026" style="WIDTH: 275.25pt; HEIGHT: 188.25pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www1.xml.net.cn/books/bible/image/Image20.gif" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image004.png"><font face="宋体"></font></imagedata></shape>

3-1 Notepad中用带引号的文件名来保存XML文档

Windows NT版本的Notepad还会给出将文件保存为Unicode格式的选项。令人惊奇的是,这样保存也可以,不过我们还是坚持使用基本的ASCII文本格式比较好。XML文件既可以是Unicode格式也可以是Unicode的名为UTF-8的压缩版本,这是严格的ASCII的超集,因而纯ASCII文件也是合法的XML文件。

<shape id="_x0000_i1027" style="WIDTH: 31.5pt; HEIGHT: 24pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www1.xml.net.cn/books/bible/image/Image21.gif" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image006.png"><font face="宋体"></font></imagedata></shape>UTF-8ASCII将在第7外国语言和非罗马文本中加以更为详细的讨论。

<chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899"><span style="mso-bookmark: _Toc509819504"><span lang="EN">3.1.3</span></span></chsdate> XML文件装入Web浏览器

既然已经创建了第一个XML文档,当然想看一看了。这个文件可以在支持XML的浏览器,如Internet Explorer 5.0中直接打开。图3-2显示的就是结果。

我们看到的结果将依不同的浏览器而有所不同。在本例情况下,文件是格式化得很好的,以不同的颜色来表示不同的句法。不过所看到的并没有吸引人的地方。问题在于浏览器并不了解如何来处理FOO元素。我们必须指示浏览器如何来处理每个元素,这就要用到样式单了。我们将要简单地介绍一下,但首先还是仔细地考察一下这个文档。

<shape id="_x0000_i1028" style="WIDTH: 265.5pt; HEIGHT: 183pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www1.xml.net.cn/books/bible/image/Image22.gif" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image008.png"><font face="宋体"></font></imagedata></shape>

3-2 hello.xmlInternet Explorer 5.0中的显示结果


.2 考察简单的XML文档

让我们检查一下列在清单3-1中的这个简单的XML文档,以便更好地理解每行代码的意义。第一行是XML声明:

<?xml version="1.0" standalone="yes"?>

这是XML处理指令的例子。处理指令以开始,而以?>结束。在后的第一个单词是处理指令名,在本例中是xml

XML声明有versionstandalone两个特性。特性是由等号分开的名称-数值对。位于等号左边的是特性名,而其值位于等号的右边,并用双引号括起来。

每一个XML文档都以一个XML声明开始,用以指明所用的XML的版本。在上例中, version特性表明这个文档符合XML 1.0规范。XML声明还可以有standalone特性,这告诉我们文档是否在这一个文件里还是需要从外部导入文件。在本例中,以及在以后的几章中,所有的文档都在一个文件里完成,因而standalone特性的值要设置为yes

现在让我们看一下清单3-1中的下面的三行:

<foo></foo>

Hello XML!

总体上说,这三行组成了FOO元素。分开说,<foo></foo>是开始标记,而是结束标记,Hello XML!FOO元素的内容。

读者可能要问,<foo></foo>标记的意义是什么?回答是“你要让它是什么就是什么”。除了几百个预定义的标记之外,XML还允许用户创建所需的标记。因而<foo></foo>标记可以具有用户赋于的任何意义。同一个XML文档可以用不同的标记名编写,正如清单3-23-33-4所表明的:

清单3-2greeting.xml

<?xml version="1.0" standalone="yes"?>

<greeting></greeting>

Hello XML!

清单3-3paragraph.xml

<?xml version="1.0" standalone="yes"?>

Hello XML!

清单3-4document.xml

<?xml version="1.0" standalone="yes"?>

<document></document>

Hello XML!

清单3-13-4这四个文档用的标记名各不相同,但都是等价的,因为具有相同的结构和内容。


3.3 赋于XML标记以意义

标记可有三类意义:结构、语义和样式。结构将文档分成元素树。语义将单个的元素与外部的实际事物联系起来。而样式指定如何显示元素。

结构只是表达文档的形式,而不管单个标记和元素间的差别。例如,上面清单3-13-4中的四个XML文档结构是相同的。它们都指定文档具有一个非空的基本元素。标记的不同名称没有结构上的意义。

语义的意义存在于文档之外,在作者的心中或是读者或是某些生成或读取这些文件的计算机程序中。例如,理解HTML但不理解XMLWeb浏览器,可能会将段落的意义赋给

标记,但不会赋给标记<greeting></greeting><foo></foo> 或是<document></document>。讲英语的人可能会比<foo></foo>

更容易理解<greeting></greeting>或是<document></document>的意义。正如“美丽”的意义存在于观察者心中。

计算机作为一个哑机器,不能说是真正地理解任何事物的意义。计算机只是根据预先确定的公式来处理位和字节而已(虽然非常快)。对于一台计算机而言,用<foo></foo>或是

与使用<greeting></greeting><document></document>标记没有什么差别。即使对于Web浏览器来说,也不能说它理解什么是段落。所有的浏览器了解的是,当遇到一个段落时,在下一个元素前面要放置一个空行。

自然地,使标记的名称能够尽可能反映其包含的意义更好一些。许多学科,如数学和化学正在创建该学科的工业标准和标记集。如果合适的话,应该使用这些标准和标记集。但是大多数情况下,还是需要什么标记就创建什么标记。

以下是一些其他可能的标记:

<molecule><integral></integral></molecule>

<person><salary></salary></person>

<author><email></email></author>

<planet><sign></sign></planet>

<bill><plus></plus></bill>

<hillary><plus></plus></hillary>

<gennifer><plus></plus></gennifer>

<paula><plus></plus></paula>

<monica><equals></equals></monica>

<divorce></divorce>

可以与标记相联系的第三类意义是样式意义。样式意义指定标记的内容如何在计算机屏幕上或是其他输出设备上展示。样式意义说明特定的元素是否是用粗体、斜体、绿色的<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="24" unitname="磅"><span lang="EN">24</span>磅</chmetcnv>的字体还是其他字体加以表示。计算机在理解样式时比理解语义意义要好一些。在XML中,样式意义是通过样式单来施加的。


.4 XML文档编写样式单

XML允许用户来创建任何所需要的标记。当然,由于用户在创建标记上有完全的自由,因而通用的浏览器无法预期用户的标记的意义,也无法为显示这些标记而提供规则。因而,用户必须为文档编写样式单,告诉浏览器如何显示特定的标记。与标记集类似,用户创建的样式单可由不同的文档不同的人所共享,还可将自己创建的样式单与其他人编写的样式单集成在一起。

正如在第1章中所讨论的,现在有不止一种样式单语言可以使用。这里所用的是级联样式单(Cascading Style Sheets,简写为CSS)。CSS的优势在于它是W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>制定的标准,为编写HTML的许多人所熟悉,且被前卫的具有XML能力的浏览器所支持。

<shape id="_x0000_s1027" style="MARGIN-TOP: 0px; Z-INDEX: 2; MARGIN-LEFT: 0px; WIDTH: 27pt; POSITION: absolute; HEIGHT: 27.75pt; mso-position-horizontal: left; mso-position-vertical-relative: line" alt="" type="#_x0000_t75" o:allowoverlap="f"><font face="宋体"><imagedata src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image003.gif" o:title="Image19"></imagedata><wrap type="square"></wrap></font></shape>正如在第1章所注意到的,另一种可能的选择是可扩展的样式语言(Extensible Style Language)。XSL是当前最强大和灵活的样式语言,是特别为应用XML而设计的。但是,XSLCSS更为复杂,而且未被很好地支持,同时还没有完成。

<shape id="_x0000_i1029" style="WIDTH: 31.5pt; HEIGHT: 23.25pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www1.xml.net.cn/books/bible/image/Image21.gif" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image006.png"><font face="宋体"></font></imagedata></shape>XSL将在第51415章中加以讨论。

清单3-2中的greeting.xml示例只包括一个标记<greeting></greeting>,因而所需做的一切是为GREETING元素定义样式。清单3-5是一个很简单的样式单,指定GREETING元素的内容应该以<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="24" unitname="磅"><span lang="EN">24</span>磅</chmetcnv>的粗体显示为块级的元素。

清单3-5greeting.xsl

GREETING{display: block; font-size: <chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="24" unitname="pt">24pt</chmetcnv>; font-weight: bold;}

清单3-5应该在文本编辑器中键入,保存为名为greeting.css的新文件,放在与清单3-2中的文件所在的同一目录中。扩展名.css代表级联样式单(Cascading Style Sheet)。同样.css扩展名是重要的,而文件名却不怎么重要。如果打算将这一样式单只用在一个XML文档上的话,那么与XML具有同样的文件名(扩展名为.css而不是.xml)常常更为方便。


.5 将样式单附加到XML文档上

在编写好XML文档和用于该文档的CSS样式单之后,还需要告诉浏览器将样式单作用到该文档上。长时期以来,可能有许多不同的方法可达到这一目的,包括浏览器-服务器通过HTTP文件头协商、命名约定和浏览器一侧的缺省方法。但是目前,唯一的有效方法是在XML文档中包括另一个处理指令,以便指定所要使用的样式单。

处理指令是<?xml-stylesheet ?>和它的两个特性,typehreftype特性指定所用的样式语言,而href特性指定一个可以找到样式单的URL(可能是相对的)。在清单3-6中,xml-stylesheet处理指令指明施加于文档的样式单文件名为greeting.css,是用CSS样式单语言编写的。

清单3-6:带有xml样式单处理指令的greeting.xml

<?xml version="1.0" standalone="yes"?>

<?xml-stylesheet type="text/css2" href="greeting.css"?>

<greeting></greeting>

Hello XML!

既然我们已经创建好了第一个XML文档和样式单,那么当然想看一看结果了。我们所要做的就是将清单3-6装入Mozilla或是Internet Explorer 5.0。图3-3是显示在Internet Explorer 5.0中的具有样式的欢迎画面。图3-4是显示在早期开发版本的Mozilla中的具有样式的欢迎画面。

<shape id="_x0000_i1030" style="WIDTH: 290.25pt; HEIGHT: 201.75pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www1.xml.net.cn/books/bible/image/Image23.gif" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image012.png"><font face="宋体"></font></imagedata></shape>

3-3 Internet Explorer 5.0中显示的styledgreeting.xml文件

<shape id="_x0000_i1031" style="WIDTH: 296.25pt; HEIGHT: 202.5pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www1.xml.net.cn/books/bible/image/Image24.gif" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C05%5Cclip_image014.png"><font face="宋体"></font></imagedata></shape>

3-4 在早期的开发者版本的Mozilla中显示的styledgreeting.xml文件


3.6 本章小结

在本章中,读者学到了如何创建一个简单的XML文档。总的来说,包括以下内容:

·???????? 如何编写和保存简单的XML文档

  • 如何把三种类型的意义(结构、语义和样式)赋给XML标记

  • 如何为XML文档编写CSS样式单,从而告诉浏览器如何显示特定的标记

  • 如何将带有xml-stylesheet处理指令的CSS样式单附加到XML文档上

  • 如何将XML装入浏览器中

在下一章中,我们将要研究XML文档的更为大型的例子,用来演示在选择XML标记时的更多的实际考虑。

分享到:
评论

相关推荐

    生成XML文件ABAP程序

    构建XML文档的第一步通常是定义根元素。示例代码中通过`l_element_ArchiveBatch = l_document-&gt;create_simple_element(name = 'ArchiveBatch', parent = l_document)`创建了名为`ArchiveBatch`的根元素。 #### 4.2 ...

    合并2个结构相同的xml文件

    在这个例子中,我们首先导入第二个XML文件(假设为`file2.xml`),然后匹配并复制第一个XML文件(假设为`file1.xml`)的根节点。在处理相同结构的元素时,我们遍历第二个文件中的对应元素,并复制其所有子节点。最后...

    字符串转化为XML文件

    * 声明:XML文件的第一行是声明,用于指定XML文件的版本和编码方式。 * 元素:XML文件由元素组成,元素可以包含文本、属性和其他元素。 * 属性:元素可以具有属性,用于提供额外的信息。 * 文本:元素可以包含文本,...

    excel文档解析和生成xml文件

    这段代码展示了如何打开一个Excel文件,获取第一个工作表,并遍历每一行和每一列,打印出所有单元格的值。 接下来,我们需要将这些数据转换为XML格式。这里我们使用JDOM库,它提供了一种简单的方式来构建和操作XML...

    tinyxml2解析XML文件读取数据

    - `XMLElement::FirstChild()`和`XMLElement::FirstChildElement()`分别获取第一个子节点和第一个子元素。 - `XMLElement::NextSibling()`和`XMLElement::NextSiblingElement()`用于遍历同级节点。 - `XMLElement...

    C++读取XML文件

    TinyXML是一个小型、轻量级的开源库,设计用于在C++中解析XML文档。它的主要优点在于简单易用,同时保持了良好的性能。下面我们将详细介绍如何使用TinyXML进行XML文件的读取操作。 1. **安装TinyXML库** 在项目中...

    java 操作xml文件(包含xml文件和对应jar包)

    DOM将整个XML文档加载到内存中,形成一棵树形结构,方便访问和修改;SAX是事件驱动的解析器,它逐行扫描XML,仅在遇到特定元素时触发事件;而StAX则允许程序以流式方式处理XML,既可以读也可以写,具有较低的内存...

    xml文件第一个

    在您下载的"xml文件第一个"中,可能包含了XML的基本结构示例,用于新手练习和了解XML。虽然文件没有注释,但通过阅读和解析文件内容,可以直观地理解XML的基本元素和结构。如果遇到不熟悉的标签或结构,可以查阅XML...

    读写XML文件的两个小程序

    第一个知识点:XML的基本结构 XML文档由元素(Element)、属性(Attribute)、文本内容(Text Content)等构成。元素是XML文档的核心,通常以尖括号包围,如`&lt;element&gt;`。元素可以包含其他元素、属性或文本内容。...

    MATLAB读取XML格式的数据文件

    这个函数将XML文件解析成一个XML文档对象模型(DOM),然后可以通过DOM API访问XML文件中的元素、属性和文本。例如,如果你有一个名为"data.xml"的XML文件,你可以这样读取它: ```matlab doc = xmlread('data.xml'...

    java操作xml文件的一个简单代码

    2. **DOM(Document Object Model)**:DOM是XML的一种解析模型,它将整个XML文件加载到内存中,形成一棵树形结构,允许通过节点遍历和操作XML文档。在Java中,`javax.xml.parsers.DocumentBuilderFactory`和`org.w3...

    易语言 xml解析 易语言 xml解析 教程 带源码

    XML文档由一系列嵌套的元素构成,每个元素可以有自己的属性和内容。 2. **XML解析器**:在易语言中,我们需要使用特定的XML解析库或模块来解析XML文档。这些解析器可以帮助我们解析XML数据,将其转换为易语言可以...

    自己做的第一个xml的例子,包括读写

    在“自己做的第一个xml的例子,包括读写”这个项目中,我们可以推测这是一个简单的C#程序,该程序实现了XML文件的创建、读取和写入操作。下面我们将深入探讨XML的基本概念以及如何在C#中进行操作。 1. XML基本结构...

    c++操作xml文件

    2. **CXmlNode**:这个类代表XML文档中的一个节点,可以是元素、属性、文本等。它可能包含获取和设置节点名、值、属性的方法,以及遍历子节点的接口。比如`getName`、`getValue`、`setAttribute`、`getChildNodes`等...

    Java实现XML文档到word文档转换

    宋体"&gt;这是第一段的内容! 黑体"&gt;这是第二段的内容! ``` 在这个例子中,`&lt;font&gt;`元素包含了三个属性:`size`(字体大小)、`color`(字体颜色)和`name`(字体类型),这些属性将在后续的解析和转换过程...

    php读取xml文件类

    1. **创建DOMDocument对象**:首先,我们需要创建一个DOMDocument对象,这将作为处理XML文档的基础。 ```php $doc = new DOMDocument(); ``` 2. **加载XML文件**:然后,使用`load()`方法加载XML文件到DOM...

    xml 文件 压缩与解压

    // 只解压第一个XML文件 } } } catch (IOException e) { e.printStackTrace(); } } // GZIP解压 public void decompressGzipToXml(String gzipPath, String xmlOutputPath) { try (FileInputStream fis = ...

    XML学习指南pdf

    第2章 创建并显示第一个XML文档 2.1 创建一个XML文档 2.1.1 创建XML文档 2.1.2 XML文档剖析 2.1.3 一些基本的XML规则 2.2 显示XML文档 2.2.1 显示没有样式表的XML文档 2.2.2 在Internet Explorer 5中获取XML ...

    js读取xml文件并获取文件内容

    - `childNodes[0]`获取第一个子节点。 - `nodeValue`获取节点的值。 3. **显示数据**: - 最后,将获取到的数据展示在HTML页面中。 ```html &lt;span id="to"&gt;&lt;/span&gt; &lt;span id="from"&gt;&lt;/span&gt; ...

Global site tag (gtag.js) - Google Analytics