HTML HTML5 PHP Mysql Linux 缓存技术 工具 资讯 读书 其他

HTML 链接(Links)


在几乎所有的网页中都能发现链接。链接允许用户点击它们从一个网页跳转到另一个网页。


Examples

亲自试一试 - 例子

HTML 超链接
示例演示在HTML文档中如何创建链接。

(你可以在本页底部找到更多例子。)


HTML 超链接 (链接)

在HTML中使用 <a> 标签定义超链接.

一个超链接(或者叫链接)可以是一个文字,一组文字,或是图片,你点击它们跳转到另一个网页文档。

当你将鼠标移动到链接上,鼠标箭头会转换成一个小手。

这个<a>元素最重要的属性是href属性,它表明这里链接跳转的地址。

默认情况下,在所有浏览器中链接会以以下形式出现:

  • 一个未被访问的链接有下划线,颜色是蓝色
  • 一个已被访问的链接有一个下划线,显示为紫色
  • 在点击时链接有下划线,显示为红色

HTML 链接语法

链接代码很简单,例如:

<a href=" 链接地址 "> 链接文本 </a>

href属性指定链接的目标地址。

例子

<a href="http://www.phpxuexi.net/">访问w3xuexi</a>

示例显示成这样: 访问w3xuexi

点击链接后将调整到w3xuexi主页。

提示: 这个" 链接文本 " 不仅仅可以是文本,也可以是图片或者其他HTML元素。


HTML 链接 - target属性

target属性指定链接在哪里打开。

下面的例子演示链接将在一个新浏览器窗口或一个新页签中打开:

例子

<a href="http://www.phpxuexi.net/" target="_blank">访问W3xuexi!</a>

亲自试一试 »


HTML 链接 - id属性

id属性可以被用于创建一个书签。

提示: 书签不被以任何指定形式显示,他们是读者看不见的。

例子

通过id实现的锚链接:

<a id="tips">有用的提示</a>

在同一个页面创建一个链接指向“有用的提示”:

<a href="#tips">访问有用的提示</a>

Or, create a link to the "Useful Tips Section" from another page:

<a href="http://www.phpxuexi.net/html/html_comments.html#tips">
访问有用的提示</a>


注意 - 有用的提示

注意: 总是在访问子文件夹时在末尾添加一个斜线。如何你的链接是:href="http://www.w3xue.com/html",这样会向产生两次请求,服务端会在首次在地址后面加一个斜线,然后创建一个新请求: href="http://www.phpxuexi.net/html/.


Examples

更多例子

一个图片链接
示例演示了用一个图片作为链接

锚链接跳转
示例演示了如何跳转到书签位置

跳槽框架
示例演示了如何跳出框架(如果你的网站被锁定在框架内)

创建一个邮件链接
示例演示了如何链接到邮件地址(只有你安装了邮件才会工作)

创建一个邮件链接 2
示例演示里另一个邮件链接





To Top