yorickshan
3/19/2019 - 3:58 PM

链接

html6.md
content_copyfile_download
  • Rendered
  • Source

链接种类

  • 从一个网站指向另一个网站 (绝对URL)
  • 从一个网页指向同一网站内部另一个网页 (相对URL)
  • 从网页的一个位置指向同一网页内另一个位置
  • 启动电子邮件并添加收件人 <a href="mailto:jon@example.org">Email Jon</a>

常用的<a>的属性有：

自有属性

href – 指定超链接的目的地址（url）（最重要的属性）
rel – 规定当前文档与目标 URL 之间的关系，一般不用设置，属性值可以是
alternate – 可相互替代的内容
author – 文档作者
bookmark – 书签
nofollow – 告诉搜索引擎不要此链接到的权重（可以理解为表示虽然链接了目标网页，但是却不认可目标网页）
target – 指定超链接的打开方式，一般不设置该属性，属性值可以是
_blank – 在新的窗口打开
_self – 在当前窗口打开
name – 规定锚的名称（此属性在 HTML5 中已被去掉。）

标准属性

class – 规定元素的类名（classname）
id – 规定元素的唯一 id，常用于制作页面内部链接（锚点）
style – 规定元素的行内样式（inline style）
title – 规定元素的额外信息（标题，可在工具提示中显示）

事件属性

onclick – 鼠标点击时的动作

创建到其它页面的链接

HTML 链接的使用语法如下（尽量包含了上面的各个属性），

<a class="example-class" id="example-a-id" style="text-decoration: none; font-weight: bold;" title="这是一个 HTML 链接示例，链接到网站首页" href="https://cnzhx.net/" target="_blank" rel="alternate bookmark">水景一页</a>

点击上面的链接会打开网站。鼠标悬停时能看到提示语，也就是 title 属性的值。

提示：

上面示例中的四个字”水景一页“也可以是图片，或者其它 HTML 元素。

如果目标地址是个目录（或目录形式），最好总是给链接的结尾加上一个 / 符号。例如，如果链接是 href="https://cnzhx.net/blog", 点击后服务器需要响应两次请求，第一次会将链接转变为

href="https://cnzhx.net/blog/"

第二次才打开转变后的网址（过程应该很快，但是我们应该尽量避免这种不必要的过程）。

创建页面内部链接

前面提到过，id 属性常被用于创建到当前页面（文档）内部的链接，其作用类似于锚点（anchor）。也因此，HTML5 中将用于制作锚点的 的属性 name 取消了。

例如，在下面的位置创建一个”内部链接锚点位置“：

内部链接锚点位置

<a id="tips">内部链接锚点位置</a>

在同一个文档的其它位置创建一个到”内部链接锚点位置“的链接就是：

<a href="#tips">访问”内部链接锚点位置“</a>

而如果在别的文档中，还需要在 #tips 前面加上到目标文档的链接地址：

<a href="https://cnzhx.net/blog/html-links/#tips">访问 ”HTML 链接“ 页面上的”内部链接锚点位置“</a>

提示：

所有支持 id 属性的 HTML 标签都可以做为锚点，直接创建到该锚点的链接就可以了。如，

<h1 id="h1anchor">标题一</h1>

就有了一个锚点 h1anchor。比如本文内部的几个小标题都设有锚点，并且在标题后面还用一个符号建了个超链接到当前锚点的位置。这主要是因为在页面上是看不到锚点的，查看页面源文件才能看到，不方便。可以点击这里跳转到 1. 创建到其它页面的链接 试试看。

同一个页面内部不能有重复的 id 属性值。 如果创建了一个指向页面内部位置的超链接，但是却没有写锚点文本，如 <a href="https://cnzhx.net/blog/html-links/#">本文</a> 就会指向该页面的顶部。例如本站页面底部的”TOP“按钮就是用这种方式制作的（查看回到顶部按钮的制作方法）。

另外，本站给文档内部锚点都用一个符号 ¶ 标记出来了，将下面的代码放到锚点后面就可以了（注意将其中 # 号后面的文本 anchor 改成对应的猫点名称）：

<span class="anchorlink"><a href="#anchor">¶</a></span>

其中 anchorlink 类的 CSS 样式是：

.anchorlink {
    background-color: transparent;
    color: transparent;
    text-decoration: none;
    font-size: smaller;
    margin-left: 0.25em;
    margin-right: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.anchorlink a:link {
    background-color: transparent;
    color: transparent;
    text-decoration: none;
}
h1:hover .anchorlink a,
h2:hover .anchorlink a,
h3:hover .anchorlink a {
    color: lightgray;
}

<a href="#top"> 当前页面内某个位置
<a href="movies/dvd/#top"> 当前网站内某个位置
<a href="http:/www.baidu.com/#top"> 其他网站的某个位置