21xrx.com
登录
  

HTML 超链接

上一章 下一章

超链接几乎在所有的网页中都能找到.超链接允许用户单击就能从一个网页跳转到另一个网页.

HTML Links-超链接

HTML的链接叫超链接

超链接是一段文字或一张图片,只要你能点击的都行,从一个页面跳转到另一个页面.

HTML Links-语法

在HTML里,超链接用<a>标签定义.

例子

href属性指定目的地址(http://www.21xrx.com).

链接文字是可见部分(访问我们)

单击链接文字,将送你到指定地址.

    链接文字不一定非得是文字.它可以是一张图片也可以是其它的HTML元素.

本地链接

上面的例子都是用的绝对URL地址(完整的网络地址).

本地链接(链接到同一网站)是通过相对URL地址指定的(没有http://www....).

HTML 超链接-颜色

当你移动鼠标经过超链接时,两件事通常会发生:

  • 鼠标会从箭头形状变为一只小手.
  • 超链接元素的颜色将会改变.

默认情况下,一个超链接将显示为下面这个样子(在全部的浏览器里):

  • 一个未被访问的链接有一条下划线并且颜色是蓝色.
  • 一个被访问过的链接有一条下划线并且颜色是紫色.
  • 一个正在被单击的链接有一条下划线并且颜色是红色.

你能改变默认的颜色,用CSS样式:

HTML超链接-target属性

target属性指定从哪里打开文档.

例如下面的这个例子将从新的浏览器窗口或新的选项卡打开链接文档:

例子

target值描述
_blank在一个新的浏览器窗口或新的选项卡打开链接文档
_self在当前单击页面(iframe)打开链接文档(默认选项)
_parent在当前iframe的上一个iframe中打开链接文档
_top在当前窗口的主体中打开链接文档
framename在指定的iframe中打开链接文档(以iframe的name属性作为连接)

如果你的网页在iframe里,你可以用target="_top"跳出iframe:

HTML 链接-图片作为链接

用图片作为链接很常用:

例子

    IE9(或更早)显示图片会有边框,所以添加border:0来防止图片有边框.

HTML链接-创建书签

HTML书签用来允许用户跳转到页面的指定部分.

如果你的网页很长,那么书签将很实用.

为了使用书签,首先你得先创建书签,然后用链接指向书签.

当链接被点击时,页面将滚动到书签的位置.

例子

首先,用id属性创建一个书签:

然后,在同一个页面里添加一个指向书签的链接.

或者,从另一个页面给书签添加链接;

本章小结

  • 用HTML的<a>元素定义一个链接
  • 用HTML的href属性定义链接的地址
  • 用HTML的target属性定义从哪里打开链接
  • 把HTML的<img>元素嵌套于<a>标签,图片作为链接
  • 在一个页面里用HTML的id属性(id="value")来定义书签.
  • 用HTML的href属性(href="#value")链接到书签

HTML链接标签

标签描述
<a>定义超链接
  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2