XHTML MP教程(十八)：XHTML MP 中的链接

锚链接是用于导航的. 你选择一个锚链接后, 就可以跳到另一资源, 如一个 XHTML MP 页面, 或者滚动到当前 XHTML MP 文档的某一位置. 锚链接是用 <a></a> 标签对创建的.

<a> 标签的 href 属性用于指定目标链接的 URL (统一资源定位器). 所用的协议是 HTTP. URL 的形式如下:
http://主机名/路径/文件名#初始点?参数1=值1&参数2=值2...

如果你以前有过 HTML 或 WML 编程经验的话, 你应该很熟悉上面的格式了.

到当前 XHTML MP 页面的某个地方

就像前面所讲的, 你可以利用锚链接滚动到当前 XHTML MP 页面的某个地方. 要实现该效果, 首先你得在文档中设置一个链接目标 (目标锚) . 其次, 你得将一个锚链接指向该目标.

要想在 XHTML MP 文档中设置一个锚链接, 应该用 <a> 标签的 id 属性. 大部分 XHTML MP 标签都包含 id 属性. 这是一些例子:

<a id="destination_id"></a>
<a id="destination_id" />
<h1 id="destination_id">XHTML MP Tutorial</h1>
<p id="destination_id">Some text in a paragraph</p>

要想把一个锚链接指向目标链接, 你需要用目标链接的 id 作为入口构造一个 URL (注意, 入口以 # 字符开头), 然后把此 URL 作为锚链接的 href 属性的值, 像下面这样:

<a href="#destination_id">Select here to go to a location in the current XHTML MP document</a>

因为链接目标在当前 XHTML MP 文档中, 所以不需要在 URL 中指定主机名, 路径和文件名. 只需指定入口就可以了

下面的 XHTML MP 例子演示了如何在当前文档中跳转到某个地方:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
		
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>
		
  <body>
    <p><a id="top">Table of Contents:</a></p>
    <ul>
      <li>Part 1 XHTML MP Introduction</li>
      <li>Part 2 Development of Wireless Markup Languages</li>
      <li>Part 3 Advantages of XHTML MP</li>
      <li>Part 4 WML Features Lost in XHTML MP</li>
    </ul>
    <p><a href="#top">Back to top</a></p>
  </body>
</html>

下面是上述 XHTML MP 例子在一移动电话浏览器上的显示结果:

Nokia Mobile Browser 4.0

如果你选择 "Back to top" 链接, 页面将会滚动到显示 "Table of Contents" 文本的地方.

Nokia Mobile Browser 4.0

对于 Sony Ericsson 的移动电话, 在当前 XHTML MP 页面中跳转到某链接目标在 4.0 版的浏览器之前是没有被支持的. 4.0 版的最初被引入是在 Sony Ericsson Z1010 中. 因此, 之前的移动电话型号, 如 T610 和 T68i 都不支持此特征.

到另一个 XHTML MP 页面

跳到另一个 XHTML MP 页面简单而且直接. 只需创建一个锚链接并把目标页面的 URL 指定为 <a> 元素的 href 属性的值. 当用户选择那个锚链接的时候, 他将会被定向到目标页面.

下面的 XHTML MP 例子演示了如何创建一个可以把你引向另一个页面的锚链接:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>
				
  <body>
    <p>Table of Contents:</p>
    <ul>
      <li>Part 1 XHTML MP Introduction</li>
      <li>Part 2 Development of Wireless Markup Languages</li>
      <li>Part 3 Advantages of XHTML MP</li>
      <li>Part 4 WML Features Lost in XHTML MP</li>
    </ul>
    <p><a href="linksEg3.xhtml">Continue</a></p>
  </body>
</html>

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
			
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p>Table of Contents (continued):</p>
    <ul>
      <li>Part 5 Syntax Rules of XHTML MP</li>
      <li>Part 6 XHTML MP MIME Types and File Extension</li>
      <li>Part 7 XHTML MP Document Structure</li>
      <li>Part 8 XHTML MP Generic Metadata</li>
    </ul>
    <p><a href="linksEg2.xhtml">Go to the previous page</a></p>
  </body>
</html>

这些是linksEg2.xhtml 页面在 WAP 浏览器中的截屏图片:

Sony Ericsson T610	Nokia Mobile Browser 4.0

如果你选择了锚链接 "Continue", WAP 浏览器将显示另一个 XHTML MP 页面 (linksEg3.xhtml).

Sony Ericsson T610	Nokia Mobile Browser 4.0

WAP 首页用简短 URL

大家都知道, 用移动电话的数字键盘打字是很耗时间的. 你要始终记着保持你的 WAP 主页的 URL 尽量短. 以下是几种可以实现的方式:

充分利用子域名. 例如, 用 "http://wap.hahoo.cn/" 取代 "http://www.hahoo.cn/wap/". 要使 URL 更短, 还可以用 "http://hahoo.cn/".
Web 网站和 WAP 网站使用相同的 URL. 例如, 用 "http://www.hahoo.cn/" 或 "http://hahoo.cn/" 代替 "http://www.hahoo.cn/wap/" 作为你的 WAP 网站的首页. 如果 HTTP 请求发自移动设备, 你的网站的 WAP 版将会被返回客户端, 否则返回 Web 版 (撰写此教程时, sohu.com 就是这样做的).
设置你的 Web 服务器的缺省文档, 以便用户可以输入 "http://wap.hahoo.cn/", 而非 "http://wap.hahoo.cn/index.xhtml", 来访问你的网站. 对大部分 Web 服务器来说, 预设的缺省文档是 index.html / index.htm 或 default.html / default.htm. 设置缺省文档的一种方式是把缺省文档改为以 ".xhtml" 扩展结尾的一个文件, 如 index.xhtml 和 default.xhtml. 另一种方式是把你的 WAP 主页保存为 index.htm, index.html, default.htm, 或 default.html. (就像此教程早些时候提到的那样, XHTML MP 文档可以用 ".html" 或 ".htm" 作为文件扩展名.)

XHTML MP 图片链接

在 XHTML MP 中, 锚链接可以被附加到图片上. 只需把 <img> 标签放到 <a></a> 标签对中. 下面的 XHTML MP 展示了如何实现:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>
		
  <body>
    <p>
      This is page 1.<br/>
      <a href="linksEg5.xhtml"><img src="to2.gif" alt="Go to linksEg5.xhtml"/></a>
    </p>
  </body>
</html>

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
			
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>
			
  <body>
    <p>
      This is page 2.<br/>
      <a href="linksEg4.xhtml"><img src="to1.gif" alt="Go to linksEg4.xhtml"/></a>
    </p>
  </body>
</html>

这些是 linksEg4.xhtml 页面在 WAP 浏览器中的截图:

Sony Ericsson T610	Nokia Mobile Browser 4.0

如果你选择了图片, WAP 浏览器将显示 XHTML MP 文件linksEg5.xhtml.

Sony Ericsson T610	Nokia Mobile Browser 4.0

在 XHTML MP 中为链接设置快捷键

<a> 标签的 accesskey 属性用于为锚链接设置键. 有效的属性值为 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, * 和 #.

下面的 XHTML MP 例子演示了如何用 accesskey 属性设置快捷键:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
		
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>
		
  <body>
    <p>
      This is page 1.<br/>
      <a accesskey="1" href="linksEg7.xhtml"><img src="to2.gif" alt="Go to linksEg7.xhtml"/></a>
    </p>
  </body>
</html>

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML MP Tutorial</title>
  </head>
			
  <body>
    <p>
      This is page 2.<br/>
      <a accesskey="1" href="linksEg6.xhtml"><img src="to1.gif" alt="Go to linksEg6.xhtml"/></a>
    </p>
  </body>
</html>

如果你用移动电话浏览器查看上述两个 XHTML MP 文档, 你将会看到当你按下移动电话键盘的 "1" 键时, 锚链接将会被自动激活.
应当注意的是, 如果上述 XHTML MP 例子是在 PC 机的 Internet Explorer 上查看的话, 当你按下 "Alt + 1" 时, 锚链接将会成为焦点, 但不会被自动激活.
WAP CSS 的 -wap-accesskey 属性可被用作 accesskey 属性的另一可选方案.

由花火网络整理 www.hahoo.cn 上海网站建设

第18页共21页

返回教程首页

XHTML MP教程目录