【小白入门】始于前端UI（二）——XML简介

最新推荐文章于 2024-06-26 21:38:00 发布

阿阿阿是阿翼啊

最新推荐文章于 2024-06-26 21:38:00 发布

阅读量922

点赞数 1

分类专栏： HTML 文章标签： xml

本文链接：https://blog.csdn.net/weixin_43226986/article/details/111505681

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 什么是XML

XML （eXtensible Markup Language）指可扩展标记语言，被设计用来传输和存储数据。

区别于XML，HTML 被设计用来显示数据。但需要注意的是XML并不能替代HTML，两者重点偏重不同，XML作为HTML的补充，可以帮助HTML文档中显示动态数据。

对XML的学习可以参照HTML进行。

通过 XML，数据能够存储在独立的 XML 文件中。这样您就可以专注于使用 HTML/CSS 进行显示和布局，并确保修改底层数据不再需要对 HTML 进行任何的改变。

XML提供了许多便利，比如：

把数据从HTML中分离
简化数据共享：XML以纯文本格式进行存储
简化数据传输：由于可以通过各种不兼容的应用程序来读取数据，XML可以在不兼容系统之间数据交换
简化平台扩展、更新：依然是由于其以文本格式存储，可以在不损失数据的情况下，扩展或者升级到新的操作系统、应用程序或浏览器

2. XML树结构

XML 文档形成了一种树结构，它从"根部"开始，然后扩展到"枝叶"。
XML文档必须包含根元素，根元素是其他一切元素的父元素

<?xml version="1.0" encoding="UTF-8"?> <!--XML声明，它定义了版本和所使用的编码（UTF-8 : 万国码, 可显示各种语言）-->
<note>	<!--根元素-->

<!--接下来四行描述根的4个子元素（to, from, heading, body）-->
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>

#根元素的结尾
</note>

3. XML语法规则

必须有根元素
声明

<?xml version="1.0" encoding="utf-8"?>

所有的XML元素都必须有一个关闭标签，省略关闭标签是非法的
XML标签对大小写敏感，打开标签和关闭标签必须使用相同的大小写
必须正确嵌套

<!-- 正确 -->
<b><i>This text is bold and italic</i></b>

<!-- 错误 -->
<b><i>This text is bold and italic</b></i>

XML属性值必须加引号，列如<note date="12/11/2007">
实体引用

<!-- 如果您把字符 "<" 放在 XML 元素中，会发生错误，这是因为解析器会把它当作新元素的开始。这样会产生 XML 错误。因此用实体引用代替“<”--->
<message>if salary &lt; 1000 then</message>

下表为5个预定义的实体引用：

注释： 在 XML 中，只有字符 “<” 和 “&” 确实是非法的。大于号是合法的，但是用实体引用来代替它是一个好习惯。

4. XML属性

除了属性必须加双引号以外，还需要注意以下问题：

属性不能包含多个值（元素可以）
属性不能包含树结构（元素可以）
属性不容易扩展，所以尽量用元素来描述数据

有时候会向元素分配 ID 引用。这些 ID 索引可用于标识 XML 元素，它起作用的方式与 HTML 中 id 属性是一样的。

<messages>
<note id="501">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
<note id="502">
<to>Jani</to>
<from>Tove</from>
<heading>Re: Reminder</heading>
<body>I will not</body>
</note>
</messages>

5. 查看XML文件

XML文件不会直接显示为HTML页面，XML 文档将显示为代码颜色化的根以及子元素。
XML 文档不会携带有关如何显示数据的信息。

6. 显示XML

6.1 使用CSS显示XML

使用 CSS 来格式化 XML 文档是有可能的，但并不是常用方法

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
.
.
.
</CATALOG>

6.2 使用XSLT显示XML

XSLT是首选的XML样式表语言，它比CSS更加完善。通过使用 XSLT，可以把 XML 文档转换成 HTML 格式。

7. XML解析器（XML parser）

XML 解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。

7.1 解析XML文档

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

7.2 解析XML字符串

txt="<bookstore><book>";
txt=txt+"<title>Everyday Italian</title>";
txt=txt+"<author>Giada De Laurentiis</author>";
txt=txt+"<year>2005</year>";
txt=txt+"</book></bookstore>";

if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}