关于XHTML中的超链接的实例详解

这篇文章主要介绍了XHTML中的超链接标签使用教程,包括锚链接和链接相对地址用法的介绍,需要的朋友可以参考下

超链接，也叫“链接”。超链接在我们浏览的网页上可以说是无处不在，我们点击网页上某个链接地址，即链接到另一个网页，这就是超链接在起作用。
使用 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed 标签来定义超链接，语法：
c60cbc61f025a6f264a9a60816412c53显示的文字或图片5db79b134e9f6b82c0b36e0489ee08ed
例子：

XML/HTML Code复制内容到剪贴板

<a href="http://www.baidu.com/">链接至百度</a>

1. 浏览器显示效果：

2. 链接至百度

3. 当我们点击上面 “链接至百度” 字样时，浏览器便会转向百度首页。

超链接属性
超链接属性：
href 链接地址。可以是绝对网页地址或者相对地址。
target 链接目标。取值为 _blank 会在新窗口中打开链接地址，缺省则使用当前窗口打开链接地址。
name 锚链接，这个我们下面会单独讲到。

相对网页链接地址：

XML/HTML Code复制内容到剪贴板

<a href="/css" target="_blank">p+CSS教程</a>

1. 这个例子使用了相对地址，而在上面链接至百度的例子，则使用了绝对地址。

增加了 target 属性的例子：

XML/HTML Code复制内容到剪贴板

<a href="http://www.baidu.com/" target="_blank">链接至百度</a>

1. 再次点击该链接时，浏览器会启用新页面打开链接地址，而原页面窗口得以保留。

2. 提示

3. 当一个链接地址与当前主题或流程并不十分紧密时，通常会启用 target="_blank" 属性，否则尽量不要启用新窗口，以便给浏览者以友好的浏览体验。

4. 如果页面是由几个页面框架帧组成，那么 target 属性还可以有其他取值

邮件超链接
邮件链接例子：

XML/HTML Code复制内容到剪贴板

<a href="mailto:admin@xyz.com">联系xyz站的站长</a>

1. 点击此链接，将启用默认的邮件客户端撰写邮件。

锚链接
锚链接是指页面内的链接，但现在很多人也把文字超链接叫做锚链接。
我们举个例子解释一下锚的作用：
例如我们有一篇文章写得很好，有很多人都在文章后面作了评论，而发表评论的窗口一般都在评论结束最底下的位置。网站会在发表评论的地方设置一个锚链接，而在显示评论的位置设计一个链接到锚链接，如：“发表评论”。如果有人不想查看别人留下的评论而想立刻跳转到评论输入窗口，那么点击“发表评论”即可在本业内快速跳转到评论输入窗口。这种设计无疑提高了浏览者的用户体验。
使用锚链接的例子
创建锚：

XML/HTML Code复制内容到剪贴板

<p><a name="comment"></a></p>

1. 创建链接至锚的超链接地址：

XML/HTML Code复制内容到剪贴板

<p><a href="#comment">链接至comment锚</a></p>

1. 从例子可以看出，访问一个锚，就是在链接地址后面加上“#”号和锚的名字。上面这个例子由于是链接到本页的锚，因此前面的链接地址被忽略（注：实际是相对地址被忽略，在此不做展开讨论）。

2. 提示

3. 如果你要实验这个锚标记的用法，那么注意一点，将链接至锚的超链接和锚标记之间保持足够的网页空间，才能看出效果。可以用我们上面学到的换行标签来创建足够多的上下空白空间来进行测试。

4. 你也可以创建一个链接至其他页面的锚标记，例如：

XML/HTML Code复制内容到剪贴板

<p><a href="http://www.abc.com/#test">链接至锚</a></p>

当然需要在 www.abc.com 这个页面有这个 test 锚标记才行，否则只会链接至 www.abc.com 页面而忽略这个锚标记

【相关推荐】

1. HTML免费视频教程

2. 对HTTP Headers知识点的图文说明

3. html中怎么样才能让JSON数据显示的方法介绍

4. html实现消息按钮上的数量角标的实例详解

5. Html完成异步上传文件的Jquery代码实例    

以上是关于XHTML中的超链接的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！