admin 管理员组文章数量: 1086019
2024年4月19日发(作者：web中label标签作用)
维普资讯
网
惑实用第一
如何用ＸＭＬ在浏览器中显示图像
扩展标记语言（ＸＭＬ）以其结构规范，扩展性强，数据存
储和表现分离，自定义标签等特点而备受世人注目，自从其
问世以来．发展的步伐一刻也没有停止。目前其应用已经延
伸到信息发布、多媒体展示、电子商务、通用数据交换、图
形的矢量化表示等多种领域。但是，由于该语言不象ＨＴＭＬ
那样有许多开发工具支持，目前在ｗｅｂ信息发布方面还不是
非常普及，但由于其优良特性，取代［－ＩＴＭＬ成为新一代的数
据交换标准和］ｎｔｅｍｅｔ语言，已经是大势所趋。下面我们就用
该语言来实现一个显示图像的ＸＭＬ程序，和大家交流和学
习。
ＸＭＬ语言的核心包括三个方面，即ＸＭＬ大纲、ＸＭＬ文档
和）（ｓＬＴ。其中ＸＭＬ大纲定义了ＸＭＬ文档的数据结构、语法
及所使用的标签集合，它是一种规则的规则，类似于ｃ、
ｃ＋＋和Ｊａｖａ等高级语言中的ｓＬｒｕｅｔ和ｃｌａｓｓ定义，非常重要。
而ＸＭＬ文档则是ＸＭＬ大纲的宴例化．用于描述具体的实例数
据。由于ＸＭＬ语言中，数据的结构和数据的表现是分离的，
要想在潮览器中正确地显示具体的ＸＭＬ文档，就必须有一种
机制来表现它，这就是）（ｓＬＴ的作用．即扩展级联样式单：按
照ＸＭＬ语言的特点，我们把用ＸＭＬ显示图像的方法，分为以
下三步来实现。
第一步，设计并开发图像的ＸＭＬ大纲
ＸＭＬ大纲中，重要的有几个地方．一是正确理解“名
域 ，说白了，“名域 实际上对元素和元素属性的限定，
以防止多个文档组合时，元素及其属性的重名冲突，它的作
用和Ｊａｖａ中的包（ｐａｃｋａｇｅ）、ｃ＃中的命名空同（ｎａｍｅ＠ａｃｅ）
差不多，下列代码中，Ｓｃｈｅｍａ标签中的ｘｍｌｎｓ＝ １２１７１２：
ＳＣｈｅｍ膻一ｍｉｃｒｏｓｏｆｔ—ｃｏｒｎ：】江Ⅱｌ—ｄａｔａ＇’和ｘＩＩｌｌｌ珀： ＝“ＬｌｒｒＩ＝
ｓｃｈｅｍａｓ—ｍｉｃｒｏｓｏｆｔ—ＣＯｉｌ１：ｄａｔａｔｙｐｅｓ 都是名域。其次是如何定义
元素、元素的属性以及怎样使用处理指令等语法规则等。ＸＭＬ
大纲中，元素用ＥｌｅｍｅｎｔＴｙｐｅ标签定义，用ｅｌｅｍｅｎｔ标签引
用。而元素的属性用ＡｔｔｄｂｕｔｅＴｙｐｅ定义，用ａｔｔｒｉｂｕｔｅ标签引
用
要在Ｉｎｔｏｒｎｅｔ网上描述一幅图像，最基本的有图像的宽
度、高度、图像源（即ＵＲＬ）等要素，以下便是根据ＸＭＬ大
叶兴茂
纲的规则定义的图像ＸＭＬ大纲。
（？ｘｍｌ ｖｅｒｓｉｏｎ＝ １ ０ ｅｎｃｏｄｉｎｇ＝ ｇｂ２３１２ ７＞
（Ｓｃｈｅｍａ ｘｍｉｎｓ＝ ｕ ｒｎ：ｓｃｈｅｍａｓ—ｍｌｃｒｏｓｏｆｔ—ｃｏｍ ｘｍｌ—
ｃｌａｆａ
×ｍＩｎｓ：ｄｔ＝’ｕ ｒｎ：ｓｃｈｅｍａｓ—ｍｉｃｒｏｓｏｆｔ—ｔｏｍ：０ａ伯ｔｙｐｅｓ ＞
（１一一Ｔｈｌｓ ｓｃｈｅｍａ ｄｅｆｌｎｅｓ ＸＭＬ ｄｏｃｕｍｅｎｔ ｍａｌｎｌｙ ｕｓｅｄ
ｆｏｒ ｓｈｏｗ ８ｉｍａｇｅ一一＞
（１一一ｄｅｆｉｎｅ ｉｍａｇｅ ｅｌｅｍｅｎｔ ｉｎｃｌｕｄｉｎｇ ｃｈｉｌｄ ｎｏｄｅｓ ｃｏｍ
ｍｅｎｔ，ｓｏｕｒｃｅ．ｗｉｄｔｈ ａｎｄ ｈｅｉｇｈｔ一一＞
＜ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ｃｏｍｍｅｎｔ ／＞
＜ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ＳＯＵ ｒｃｅ ／＞
＜Ｅ；ｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ｗｉｄｔｈ ／＞
（ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ｈｅｉｇｈｔ ／＞
＜ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ｉｍａｇｅ ｃｏｎｔｅｎｔ＝ ｅｌｔＯｎｌｙ ）
＜ｅｌｅｍｅｎｔ ｔｙｐｅ： ｔｏｍｍｅｎｔ ＞
（ｅｌｅｍｅｎｔ ｔｙｐｅ＝ ｓｏｕ ｒｃｅ ＞
（ｅｌｅｍｅｎｔ ｔｙｐｅ＝ ｗｉｄｔｈ ／＞
（ｅｌｅｍｅｎｔ ｔｙｐｅ＝ ｈｅｉｇｈｔ ／＞
（／ＥｌｅｍｅｎｔＴｙｐｅ＞
＜ｆ一一ｄｅｆｉｎｅ ｌｉｎｋ ｅｌｅｍｅｎｔ ｉｎｃｌｕｄｉｎｇ ｃｈｉｌｄ ｎｏｄｅｓ ｈｒｅｆ ａｎｄ
ｔｅｘｔ一一＞
（ＥｉｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ｈｒｅｆ ／＞
（ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ｔｅｘｔ ／＞
＜ＥｉｅｍｅｎｔＴｙｐｅ ｎａｍｅ： ０ｎｋ ＞
＜ｅｌｅｍｅｎｔ ｔｙｐｅ＝ ｈｒｅｆ ／＞
（ｅＩｅｍｅｎｔ ｔｙｐｅ＝ ｔｅｘｔ ／＞
（／ＥｌｅｍｅｎｔＴｙｐｅ＞
（ｆ一一ｄｅｆｉｎｅ ｍｅｓｓａｇｅ ｅｌｅｍｅｎｔ ｉｎｃｌｕｄｉｎｇ ｃｈｉｌｄ ｎｏｄｅｓ
Ｅ Ｍａｌ ａｎｄ ｃｏｎｔｅｎｔ一一＞
＜ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ Ｅ
—
Ｍ ＞
＜ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ｃｏｎｔｅｎｔ ／＞
＜ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ＝ ｍｅｓｓａｇｅ ＞
（ｅｌｅｍｅｎｔ ｔｙｐｅ＝ Ｅ
—
Ｍａ¨ ／＞
（ｅｌｅｍｅｎｔ ｔｙｐｅ＝ ｃｏｎｔｅｎｔ ）
＜／ＥｉｅｍｅｅｔＴｙｐｅ＞
＜ＥｌｅｍｅｎｔＴｙｐｅ ｎａｍｅ： ｍｙＷｅｂ ｃｏｎｔｅｎｔ＝ ｅｌｔＯｎｌｙ ＞
＜ｅ ｅｍｅｎｔ ｔｙｐｅ＝ ｌｉｎｋ ／＞
＜ｅｌｅｍｅｎｔ ｔｙｐｅ＝ ｍｅｓｓａｇｅ ／＞
＜ｅｌｅｍｅｎｔ ｔｖｐｅ＝ ｉｍａｇｅ ／＞
＜／ＥｉｅｍｅｎｔＴｙｐｅ＞
＜／Ｓｃｈｅｍａ＞
维普资讯
实用第一
图像ＹｕＭＬ大纲中，定义的主要标签有ｉｍａｇｅ、ｃｏｍｍｅｎｔ、
ｓｏｕｒｃｅ、ｗｉｄｔｈ和ｈｅｉｇｈｔ等．用于描述图像及其宽度和高度等属
性 同时也定义 类似于ＨＴＭＬ语言中ａ标签的ｌｉｎｋ超链接标
签，用于定位具体的网络资源 显然，这些自定义的标签要比
那些死板的ＨＴＭＬ标签易懂得多，望文知意，一目ｒ然
第二步．编写规范的图像ＸＭＬ文档
使用上面定义的图像ＸＭＬ大纲，就能够描述具体的图像
对象，编写ＸＭＬ文挡了，代码如下所示：
＜？ｘｍｌ ｖｅｒｓｉｏｎ＝ １ Ｏ ｅｎｃｏｄ ｎｇ＝ ｇｂ２３１２ ）
＜７ｘｍｌ ｓｔｙｌｅｓｈｅｅｔ ｔｙｐｅ＝ｔｅｘｔ／￣ｓＩ ｈｒｅｆ： ｉｍａｇｅ×ｓ｝ ＞
（ｍｙＷｅｂ ｘｍｌｎｓ＝ ｘ—ｓｃｈｅｍａ：ｉｍａｇｅ ｓｃｈｅｍａ ｘｍｌ＞
＜¨ｎｋ＞
＜ｈｒｅｆ＞ｈ￣ｐ： ／ｗｗｗ ｍｉｒ ｇｏｖ ｃｆ３＜／ｈ ｒｅｆ＞
＜ｔｅｘｔ＞￣．辽浏览国＝资渭部网站＜／ｔｅ ｘ１＞
（，Ｉｉｎｋ＞
＜ｉｍａｇｅ＞
＜ｃｏｍｍｅｎｔ＞ｓｈｏｗ ａ ｉｍａｇｅ ｂｙ ＸＭＬ＜．，＇ｃｏｒａ１］ｌｅｎｔ＞
＜ｓｏｕ ｒｃｅ＞ｉｍａｇｅｓ ｓｃｅｎｅ￣ＪＰｇ（／ｓｏｕｒｃｅ＞
＜ｈｅｉｇｈｔ＞２５０＜，ｈｅｉｇｈｔ＞
＜ｗｉｄｔｈ＞６８０＜ ｗｌ—ｌ１＞
＜，／ｉｍａｇｅ＞
＜ｍｅｓｓａｇｅ
＜ＥＪＶｌａｉｌ＞ｍａｉｌｔｏ：ｉｎｆｏ ｘｍｙｅ＠ｍａｉｌ ｍｌｒ ｇｏｖ ＣＭ（／Ｅｊｒ１ａｌ｛）
＜ｃｏｎｔｅｎｔ）童口需源代码请与作者联系＜．／ｃｏｎｔｅｎｔ＞
＜／ｍｅｓｓａｇｅ＞
＜，ｍｖＷｅｂ＞
这里的图像ＸＭＬ文挡描述了一个超链接，一幅图像和一
个Ｅ Ｍａｒｌ地址 超链接指向国土资源部网站，而图像描述的
是一幅非常美丽的大陆风光，其数据源是ｉｍａｇｅｓ／
８￣ｅｎｅｒｙ．ｊｐｇ，宽度６８０像素．高度２５０像素。Ｅ＿Ｍｄ地址、即
是作者的电子邮箱，点击它可与作者联系。看到这些标签，略
懂英语的人，即使不明白ＸＭＬ的语法，也能知道其基本含
望。
第三步，ＸＳＬＴ表现图象的ＸＭＬ文挡
虽然定义了图像ＸＭＬ大纲和图像ＸＭＬ文挡，但是，浏览
器并不认识这些东西，要想让浏览器显示出来，还必须为其定
义表现方式，这时候，ＸＳＬＴ就发挥作用了，它把ＸＭＬ文档翻
译成其它形式的数据结构，供浏览器显示．目前如微软的
ＩＥ５．０支持的格式是ＥＨＴＭＬ，即扩展超文本标记语言，它也
是符合ＸＭＬ规范的结构良好的ＸＭＬ文档
＜ ｘｍｌ ｖｅｒｓｉｏｎ＝“。０ ＞
＜ｎ１ｍｌ ｘｍｌｎｓ：ｘｓｉ＝ ｈｔｔｐ： ｗｗｗ ｗ３ ｏｒｇ／＇ＴＲ／ＷＤ—ｘｓ１）
＜ｂｏｄｙ ｓｔｙｌｅ＝ ｆｏｎｔ—ｆａｍｌｌｖ：Ａｒ ａ ｈｅｌｖｅｔｉｃａ．ｓａｑｓ—ｓｅｒｉｆ；
ｆｏｎｔ—ｓｉｚｅ：９ ５ｐｔ：
ｂｏｒｄｅｒ：１ ｅｍ；
ｂａｃｋｇ ｒｏｕｎｄ—ｃｏ ｏｒ＃ＦＥＥＥＥＥ ）
＜ｄｉｖ ｓｔｙｌｅ＝ｍａｒｇｉｎ—ｌｅ ｔ １ ０ｐｘ；ｍａ ｒｇｉｎ—ｂｏｔｔｏｍ：１ ａｍ；
ｆｏｎｔ—ｓｉｚｅ：９ｐｔ ＞
＜！一一＜ｘｓｌ ｆｏｒ—ｅａｃｈ ｓｅｌｅｃｔ＝ ｍｙＷｅｂ ｛ｍａｃｅ＞一一＞
智慧瞧
网； 釜
＜ｃｅｎｔｅｒ＞
＜ａ ｓｔｙｌｅ＝ｆｏｎｔ—ａｌｚｅ ２ｅ 。ｃ＠ｏｒ：ｒｅｄ）
（ｘｓｌ：ａｔｔｒｉｂｕｔｅ ｎａ ｅ＝１ ｒｅｆ ＞
＜ｘｓｌ：ｖａｌｕｅ—ｏｆ ｓｅｌｅｃｔ＝ｍｙＷｅｂ／＇ｌｉｎｋ【Ｏ】 ｑｒｅｆ／＞
＜ ｘｓｌ：ａｔｔｒｉｂｕｔｅ＞
＜ｘｓｌ：ｖａｌｕｅ—ｏｆ ｓｅｌｅｃｔ：ｍｙＷｅｂ＇ｌｉｎｋ【０］ｔｅｘｔ ／＞
＜／ａ＞
（ｂ ｒ／）＜ｂ ｒ／＞
＜Ｉｍｇ
＜ｘｓ｝ａｔｔ ｒｌｂｕｔｅ ｒｌａｍｅ＝Ｓ ｒｃ ）
＜ｘａｌ：ｖａｌｕｅ—ｏｆ ｓｅｌｅｃｔ＝ｍｙＷｅｂ．．．ｉｍａｇｅ．＇ｓｏｕ ｒｃｅ ）
＜／ｘｓ｝ａｔｔｒｉｂｕｔｅ）
＜ｘｓｌ：ａｔｔｒｌｂｕｔｅ ｒｌａｍｅ＝ ｄ：ｈ＞
＜×ｓ ｖａｌｕｅ—ｏｆ ｓｅｌｅｃｔ： Ｗｅｂ ｉｍａｇｅ／ｗｉａｔｈ／＞
＜／ｘｓ｝：ａｔｔｒｉｂｕｔｅ）
＜ｘｓｌ：ａｔｔｒｌｂｕｔｅ ｆｌａｍｅ＝ｈｅｉｇｎ：
（ｘｓｌ ｖａｌｕｅ—ｏｆ ｓｅｌｅｃｔ＝。ｍｙＷｅｏ ｉｍａｇｅ ｈｅｉｇｈｔ ）
＜／ｘｓ｝。ａｔｔ ｒｉｂｕｔｅ）
＜／ｉｍｑ＞
（ｂｒ／＞＜ｂｒ／＞
＜ｓｐａｎ）
＜Ｐ ｓｔｙｌｅ＝ ｆｏｎｔ—ｓｉｚｅ：２ｅｒａ ＞
＜×ｓ｝：ｖａｌｕｅ—ｏｆ ｓｅｌｅｃｔ＝’ｍｙＷｅｂ／ｉｍａｇｅ／ｃｏｍｍｅｑｔ －）
＜／ｐ＞
＜／ｓｐａｎ＞
＜ａ ｓｔｙｌｅ＝ ｆＯｎｔ—ｓｉｚｅ：１ ５ｅｍ ｃｏｌｏ ｒ：ｂｌｕｅ＞
＜ｘｓｌ：ａｔｔｒｌｂｕｔｅ ｎａ ｅ＝ ｈｒｅｆ ）
（ＸＳｋ ｖａ￣ｕｅ—ｏｆ ｓｅｌｅｃｔ＝ ｍｙＷｅｂ／ｍｅｓｓａｇｅ／Ｅ＿Ｍａ ＞
＜ ｘｓｌ’ａｔｔｒｉｂｕｔｅ＞
＜ｘｓｌ：ｖａｌｕｅ—ｏｆ ｓｅｌｅｃｔ＝ ｍｙＷｅｂ．＂ｍｅｓｓａｇｅ ｃ０ｎｔｅｎ ）
＜ ａ＞
＜／ｃｅｎｔｅｒ＞
＜ｌ一一＜／ｘｓｌ ｆｏｒ—ｅａｃ１＞一一
（，ｄｉｖ＞
＜３１ｏａＶ＞
＜／ｈｔｍ＞
上述代码和ＨＴＭＬ差不多，只要熟悉ＨＴＭＬ，很容易掌
握：这里使用了名域ｘｍｌｎｓ；ｘｓｌ＝ｈｔｔｐ：／／ ｗ３ ｏｒｇ／ｌ￣／
ＷＤ—ｘｓｔ，其局部名称是ｘ８ｌ：标签ａｔｔｒｉｂｕｔｅ、ｖａｌｕｅ—ｏｆ、ｆｏｒ—
ｅａｃｈ等均受其约束。其中ｆｏｒ—ｅａｃｈ标签类似与高级语言中的
循环语句．用来通过模式匹配遍历并转化满足条件的ＸＭＬ诼
树：ＸＳＬＴ的语法完全是规范的ＸＭＬ，这也体现了ＸＭＬ的简
单性，一种文法走天下。要注意的是ＥＨＴＭＬ是结构良好的文
挡，而ＨＴＭＬ却不是。两者最主要的区别是ＥＨＴＭＬ中的所有
标签都是封厨的，型如‘ｐ＞、（／ｐ＞、（ｂｒ／＞等格式，象
ＨＴＭＬ中‘ｐ＞、＜ｈｒ＞－￣标签在ＸＭＬ文挡中，再也行不通了。
但它们转换起来并不麻烦和复杂，只要使这些不封闭的标签封
闭起来，就可以了，如把‘ｐ＞变成‘ｐ／＞，（ｂｒ＞变成（ｂｒ／＞：
本文中涉及的代码在ＩＥ５．０浏览器中，经过严格测试
（牧稿呈期：２００１年２月１６ ｊ）
ａ嘲 蛹咖蛳两 攀；嘲 譬螭 ５７
版权声明：本文标题：如何用XML在浏览器中显示图像 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1713480286a636758.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论