HTML Links


HTML Links - Hyperlinks

The HTML <a> tag defines a hyperlink that you can click on to jump to another document. 通过点击超链接可以跳到另一个文件。

<a href="url">Link text</a>

Tips:

  • The “Link text” is the visible part and doesn’t have to be text. 标签 <a> 的内容也可以是图片或者其他HTML元素,只要用 <a> 标签将那个元素包围住。
  • 记得在子文件索引后加一个 trailing slash 结尾斜杠,否则可能会向服务器发送两个request。Many servers will automatically add a trailing slash to the address, and then create a new request.

URL

绝对 URL (full web address), 如: https://www.w3schools.com/scripts/example.js

相对 URL(local link) (指向站点内的文件) (without https://www….),如:/scripts/example.js

Links - Colors

默认情况下在所有浏览器中,一个链接有以下几种状态:

  • An unvisited link is underlined and blue 未访问的链接,下划线,蓝色
  • A visited link is underlined and purple 已访问过的链接,下划线,紫色
  • An active link is underlined and red 链接按下去不松开时,下划线,红色

The href Attribute

The most important attribute of the <a> element is the href attribute which specifies the destination addresse. 属性 href 指定了一个超级链接的目的地.

创建一个 email 链接:

<a href="mailto:xxx@yyy">  

The target Attribute

属性 target 指定在哪里打开所链接的文件。该特性不同取值的表现如下表所示:

_blankin a new window or tab(在新窗口或标签里打开)
_selfin the same frame as it was clicked (default) 在相同的框架内打开
_parentin the parent frame
_topin the full body of the window. 比如本来webpage被锁定在一个框架里,如果链接的target特性值设为_top,点击链接后会 break out 这个frame,全窗口显示被链接的文件。
framenamein a named frame

HTML Links - Create a Bookmark

在HTML文件内创建书签 to allow readers jump to specific parts of a web page.

首先在目标元素上添加 id 特性,

<a id="tips">Useful Tips Section</a>

同页内超链接跳转:

<a href="#tips">Visit the Useful Tips Section</a>

链接其他网页中的指定区域:

<a href="http://blog.csdn.net/html_links.htm#tips">Visit the Useful Tips Section</a>