上海网站建设

上海网站建设

咨询热线:(021)51698180


HTML,CSS

上海网站建设RSS订阅  RSS订阅  新浪微博  新浪微博  上海网站建设客服  客服  获取报价  获取报价

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 例子在一移动电话浏览器上的显示结果:
 
XHTML MP教程(十八):XHTML MP 中的链接1
Nokia Mobile Browser 4.0
 
如果你选择 "Back to top" 链接, 页面将会滚动到显示 "Table of Contents" 文本的地方.
 
XHTML MP教程(十八):XHTML MP 中的链接2
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 浏览器中的截屏图片:
 
XHTML MP教程(十八):XHTML MP 中的链接3

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

Sony Ericsson T610
XHTML MP教程(十八):XHTML MP 中的链接5

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

Nokia Mobile Browser 4.0
 
 
如果你选择了锚链接 "Continue", WAP 浏览器将显示另一个 XHTML MP 页面 (linksEg3.xhtml).
 
XHTML MP教程(十八):XHTML MP 中的链接7

Sony Ericsson T610
XHTML MP教程(十八):XHTML MP 中的链接8

Nokia Mobile Browser 4.0
 

WAP 首页用简短 URL

 
大家都知道, 用移动电话的数字键盘打字是很耗时间的. 你要始终记着保持你的 WAP 主页的 URL 尽量短. 以下是几种可以实现的方式:
  1.  充分利用子域名. 例如, 用 "http://wap.hahoo.cn/" 取代 "http://www.hahoo.cn/wap/". 要使 URL 更短, 还可以用 "http://hahoo.cn/".
  2. Web 网站和 WAP 网站使用相同的 URL. 例如, 用 "http://www.hahoo.cn/" 或 "http://hahoo.cn/" 代替 "http://www.hahoo.cn/wap/" 作为你的 WAP 网站的首页. 如果 HTTP 请求发自移动设备, 你的网站的 WAP 版将会被返回客户端, 否则返回 Web 版 (撰写此教程时, sohu.com 就是这样做的).
  3. 设置你的 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 浏览器中的截图:
 
XHTML MP教程(十八):XHTML MP 中的链接9

Sony Ericsson T610
XHTML MP教程(十八):XHTML MP 中的链接10

Nokia Mobile Browser 4.0
 
如果你选择了图片, WAP 浏览器将显示 XHTML MP 文件linksEg5.xhtml.
 
XHTML MP教程(十八):XHTML MP 中的链接11

Sony Ericsson T610
XHTML MP教程(十八):XHTML MP 中的链接12

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 上海网站建设