XML 注意事项

程序员文章站 2024-03-24 16:32:46

...

本文章部分内容转载自 W3school XML 注意事项，部分内容转载自参考资料。

Internet Explorer - XML 数据岛

它是什么？ XML 数据岛（XML Data Islands）是嵌入 HTML 页面中的 XML 数据。

为什么避免使用它？ XML 数据岛只在 Internet Explorer 浏览器中有效。

用什么代替它？在 HTML 中可以使用 JavaScript 和 XML DOM 来解析并显示 XML。

例 1 使用 XML 文档 “cd_catalog.xml”：

<?xml version="1.0" encoding="utf-8"?>
<catalog>
    <cd>
        <song>牵丝戏</song>
        <singer>微蓝海</singer>
        <year>2015</year>
    </cd>
    <cd>
        <song>长恨歌</song>
        <singer>微蓝海</singer>
        <year>2014</year>
    </cd>
    <cd>
        <song>昔言</song>
        <singer>微蓝海</singer>
        <year>2015</year>
    </cd>
    <cd>
        <song>尘埃落定</song>
        <singer>张敬轩</singer>
        <year>2013</year>
    </cd>
    <cd>
        <song>披星戴月</song>
        <singer>张敬轩</singer>
        <year>2008</year>
    </cd>
    <cd>
        <song>樱花树下</song>
        <singer>张敬轩</singer>
        <year>2008</year>
    </cd>
    <cd>
        <song>富士山下</song>
        <singer>陈奕迅</singer>
        <year>2006</year>
    </cd>
    <cd>
        <song>明年今日</song>
        <singer>陈奕迅</singer>
        <year>2002</year>
    </cd>
    <cd>
        <song>落花流水</song>
        <singer>陈奕迅</singer>
        <year>2006</year>
    </cd>
    <cd>
        <song>一丝不挂</song>
        <singer>陈奕迅</singer>
        <year>2010</year>
    </cd>
</catalog>

把 XML 文档绑定到 HTML 文档中的一个<xml>标签。id 属性定义数据岛的标识符，而 src 属性指向 XML 文件。

<table>标签的 datasrc 属性表示的是数据源，将 HTML 表格绑定到 XML 数据岛。数据岛的 id 前面要加上 “#” 。

<span>标签的 datafld 属性表示的是绑定的字段，引用要显示的 XML 元素。在上例中，引用的是 “song” 和 “singer” 元素。

当读取 XML 时，会为每个<cd>元素创建相应的表格行。

<html>
    <head></head>
    <body>
        <xml id="cdcat" src="cd_catalog.xml"></xml>

        <table border="1" datasrc="#cdcat">
            <tr>
                <td><span datafld="song"></span></td>
                <td><span datafld="singer"></span></td>
            </tr>
        </table>
    </body>
</html>

注释：

为了提高与 HTML5 的可互操作性和兼容性， Internet Explorer 10 标准模式和 Quirks 模式中删除了对”XML 数据岛”的支持。

这意味着，与在其他浏览器中相同，XML 数据岛将被分析为 HTML。

使用了 XML 数据岛的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。

在 HTML 页面添加 meta 标记，以选择采用 Internet Explorer 9 行为：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

例 2 在 HTML 中引入 XML 数据岛的方式是在 HTML 中直接嵌入 XML 。

可以绑定 XML 的 HTML 元素有：
a、button、div、frame、iframe、img、input（checkbox、hidden、label、password、radio 和 text）、label、span、table 和 textarea 等。

其中<table>比较特殊，它可以通过 datapagesize属性指定每页的行数，然后分页，在<tbody>中循环显示所有记录。代码如下：

<html>
    <head>
        <title> XML 数据岛</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
    </head>
    <body>
        <xml id="cd_catalog">
            <?xml version="1.0" encoding="utf-8"?>
            <catalog>
                <cd>
                    <song>牵丝戏</song>
                    <singer>微蓝海</singer>
                    <year>2015</year>
                </cd>
                <cd>
                    <song>长恨歌</song>
                    <singer>微蓝海</singer>
                    <year>2014</year>
                </cd>
                <cd>
                    <song>昔言</song>
                    <singer>微蓝海</singer>
                    <year>2015</year>
                </cd>
                <cd>
                    <song>尘埃落定</song>
                    <singer>张敬轩</singer>
                    <year>2013</year>
                </cd>
                <cd>
                    <song>披星戴月</song>
                    <singer>张敬轩</singer>
                    <year>2008</year>
                </cd>
                <cd>
                    <song>樱花树下</song>
                    <singer>张敬轩</singer>
                    <year>2008</year>
                </cd>
                <cd>
                    <song>富士山下</song>
                    <singer>陈奕迅</singer>
                    <year>2006</year>
                </cd>
                <cd>
                    <song>明年今日</song>
                    <singer>陈奕迅</singer>
                    <year>2002</year>
                </cd>
                <cd>
                    <song>落花流水</song>
                    <singer>陈奕迅</singer>
                    <year>2006</year>
                </cd>
                <cd>
                    <song>一丝不挂</song>
                    <singer>陈奕迅</singer>
                    <year>2010</year>
                </cd>
            </catalog>
        </xml>

        <table id="tbl" border="1px" width="300px" height="300px" align="center" datasrc="#cd_catalog" datapagesize="5">
            <thead>
                <tr bgcolor="#DCDCDC">
                    <th>歌曲名称</th>
                    <th>演唱歌手</th>
                    <th>发布日期</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td><span datafld="song"></span></td>
                    <td><span datafld="singer"></span></td>
                    <td><span datafld="year"></span></td>
                </tr>
            </tbody>
        </table>

        <br>

        <div align="center">
            <input type="button" value="首页" onclick="tbl.firstPage()" />
            <input type="button" value="上一页" onclick="tbl.previousPage()" />
            <input type="button" value="下一页" onclick="tbl.nextPage()" />
            <input type="button" value="尾页" onclick="tbl.lastPage()" />
        </div>
    </body>
</html>

页面效果展示如下：

XML 注意事项

Internet Explorer - 行为

它是什么？ Internet Explorer 5 引入了行为（behaviors）。Behaviors 是通过使用 CSS 样式向 XML （或 HTML ）元素添加行为的一种方法。

为什么避免使用它？只有 Internet Explorer 支持 behavior 属性。

用什么代替它？使用 JavaScript 和 XML DOM （或 HTML DOM）来代替它。

在微软 IE 5.0 版本的浏览器发布以前，网页编程中面临的最大挑战就是不能简单地创建组件，以达到多页面之间代码重用的目的。

这个问题一直困扰着 DHTML（Dynamic HTML）的网页编程者。他们只能不断地重复书写 HTML、CSS 和 Javascript 的代码，以满足多个页面上的重复或相似的功能。

自 IE 5.0 浏览器发布后，这种情况得到了改善，它可以将实现特定功能的代码封装在一个组件内，从而实现多页面的代码重用，这种新的技术就是 DHTML 中的”行为”（Behaviors）。

“行为”作为一个简单易用的组件，封装了页面上特定的功能或动作。当把一个”行为”附到 WEB 页面中的一个元件上时，这个元件的原有行为就会有所改变。网页编程者可以用”行为”来增强一个对象的功能，同时也简化了页面的 HTML 代码。

例1 的 HTML 文件中的<style>元素为<span>元素定义了一个行为：

<html>
    <head>
        <title>Internet Explorer Behavior</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
        <style type="text/css">
            span { behavior: url(behave.htc); position:relative; }
            button { margin=10px 10px 0px 0px; }
        </style>
    </head>
    <body>
        <span id="myspan">Mouse over me!!!</span>
        <br>
        <button onclick="myspan.move_up()">向上移动</button>
        <br>
        <button onclick="myspan.move_down()">向下移动</button>
        <br>
        <button onclick="myspan.move_left()">向左移动</button>
        <br>
        <button onclick="myspan.move_right()">向右移动</button>
    </body>
</html>

下面的 behave.htc 文件包含了一段 JavaScript，以及针对元素的事件句柄：

<PUBLIC:COMPONENT>

//"行为"添加4个事件
//"EVENT" 对应事件名称，"ONEVENT" 对应事件的事件句柄（Event Handlers），即事件触发时所调用的函数名称
//当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="font2blue()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="font2green()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2red()" />
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2yellow()" />

<PUBLIC:METHOD NAME="move_up">
<PUBLIC:METHOD NAME="move_down">
<PUBLIC:METHOD NAME="move_left">
<PUBLIC:METHOD NAME="move_right">

<script type="text/javascript">
    function font2red()
    {
        element.style.color="red";
    }

    function font2green()
    {
        element.style.color="green";
    }

    function font2yellow()
    {
        element.style.color="yellow";
    }

    function font2blue()
    {
        element.style.color="blue";
    }

    //定义向上移动文字的方法
    function move_up()
    {
        element.style.posTop -= 100;
    }

    //定义向下移动文字的方法
    function move_down()
    {
        element.style.posTop += 100;
    }

    //定义向左移动文字的方法
    function move_left()
    {
        element.style.posLeft -= 100;
    }

    //定义向右移动文字的方法
    function move_right()
    {
        element.style.posLeft += 100;
    }
</script>

</PUBLIC:COMPONENT>

例2 的 HTML 文件中的<style>元素为<h1>元素定义了一个行为：

<html>
    <head>
        <title>Internet Explorer Behavior</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
        <style type="text/css">
            h1 { behavior: url(behave.htc) }
        </style>
    </head>

    <body>
        <h1>Mouse over me!!!</h1>
    </body>
</html>

下面的 behave.htc 文件包含了一段 JavaScript，以及针对元素的事件句柄：

<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />

<script type="text/javascript">
    function hig_lite()
    {
    element.style.color='red';
    }

    function low_lite()
    {
    element.style.color='blue';
    }
</script>

参考资料：
XML 数据岛
 HTC（HTML Component）开发简介

上一篇： SpringBoot常见注意事项

下一篇： mybatis分页和PageHelper插件的使用

XML 注意事项

目录

Internet Explorer - XML 数据岛

Internet Explorer - 行为

XML 注意事项

异常注意事项

python 列表注意事项

Springboot打war包注意事项

SpringBoot常见注意事项

ThreadPoolTaskScheduler 注意事项

idea使用maven的注意事项

maven创建javaweb项目注意事项

SpringBoot整合Mybatis和MySql注意事项

springboot工程搭建的注意事项