HTML 链接

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。
超链接可以是文字或图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
通过使用 <a> 标签在 HTML 中创建链接。超链接的代码如:<a href="url">Link text</a> href 属性规定链接的目标,开始标签和结束标签之间的文字被作为超级链接来显示。

如下代码:

<a href="http://f2e.tming.net.cn/">F2E.TMING</a>

页面上显示为 F2E.TMING

注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。

HTML 链接 - target 属性

<a> 标签的 target 属性规定在何处打开链接文档。
target属性有4个保留的目标名称用作特殊的文档重定向操作:

1) _blank
在一个新打开、未命名的窗口中载入目标文档。如<a href="http://f2e.tming.net.cn/" target="_blank">F2E.TMING</a> 即是在新窗口打开该网站。

2) _self
在相同的框架或者窗口中显示。这个是target属性的默认值,如没有设置target属性,则<a>标签的默认目标就是_self。如: <a href="http://f2e.tming.net.cn/">F2E.TMING</a><a href="http://f2e.tming.net.cn/" target="_self">F2E.TMING</a> 即是在当前窗口跳转

3) _parent
这个目标使得文档载入父窗口或者包含了超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

4) _top
这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

此外,target属性也可以设置为其他目标名,如:<a href="1.html" target="window1">新窗口1</a> 点击后浏览器将打开一个新的窗口,将它标记为 "window1",然后在其中显示1.html这个文档

HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。当使用命名锚时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
要使用锚链接,首先需要在 HTML 文档中对锚进行命名。命名锚的语法:<a name="label">锚点1</a>
然后,在文档中用如下方式创建指向该锚的链接:<a href="#label">跳转到锚点1</a>

例:
页面上已在段落“HTML 链接 - target 属性”的开始位置添加了一个锚点,代码为:<a name="links_target"></a> ,链接代码如下

<a href="#links_target">跳转至段落:HTML 链接 - target 属性</a>

点击试试效果:跳转至段落:HTML 链接 - target 属性

如果锚链接在页面上没有对应的命名锚,点击后会跳转到页面顶部。因此也可通过设置href="#"来实现跳转到顶部的功能。点击试试:回到顶部

注释:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。

其它技巧

1) 链接添加文字提示
可以使用title属性让鼠标悬停在超链接上的时候,显示该超链接的文字注释。
<a href="http://f2e.tming.net.cn/" title="爱思资源网首页">首页</a> 。鼠标移到链接上查看效果:首页

2) 链接到email地址
只要将链接的href属性设置为mailto:邮箱地址,点击这个链接,就会触发你的邮件客户端,如<a href="mailto:xxx@xxx.com">联系我们</a>。点击查看效果:联系我们

习题

习题1 | 习题2 | 习题3 | 习题4