在html中超链接_HTML链接及页⾯内部链接
基本上每个⽹页上都能到链接(link)。链接允许⽤户通过点击它们跳转到⼀个新的⽹页或者当前⽹页的另⼀个位置，所以⼜称为“超链接”(hyperlink)。这东西有点⼉像游戏⾥的“传送门”，是联系⽹络不同位置的重要⼿段。
下⾯简单介绍 HTML 中(超)链接及其特性，然后简单介绍 1. 如何创建到其它页⾯的链接；2. 如何创建页⾯内部链接。
0. 超链接
超链接使⽤ HTML 标记语⾔的 来标记。使⽤ 标记包裹的内容可以是⼀个单词、⼀组单词(句⼦)或者是图⽚。点击之后可以跳转到另外⼀个⽂档，也可以跳转到当前⽂档内部的其它位置。这取决于 的属性设置。
默认情况下，当⿏标指针移到⼀个超链接(链接)上的时候，原来的“箭头”会变成“⼩⼿”。但是这可以通过 CSS 来控制和改变。
默认情况下，所有浏览器中链接的外观都是如下表现(当然也可以通过 CSS 来控制和改变)：
未被访问的链接带有下划线⽽且是蓝⾊的
已被访问的链接带有下划线⽽且是紫⾊的
活动链接带有下划线⽽且是红⾊的
做为⼀个 HTML 标签(元素)， 也⽀持很多 HTML 属性(attribute)，包括 HTML 标准属性(所有 HTML 和 XHTML 标签都⽀持的属性，仅有少数例外)和 HTML 事件属性(使 HTML 事件触发浏览器中的⾏为，例如当⿏标滑过或者悬停，或者当⽤户点击某个 HTML 元素时启动⼀段 JavaScript)。
常⽤的 的属性有：
⾃有属性
href – 指定超链接的⽬的地址(url)(最重要的属性)
rel – 规定当前⽂档与⽬标 URL 之间的关系，⼀般不⽤设置，属性值可以是
alternate – 可相互替代的内容
author – ⽂档作者
bookmark – 书签
nofollow – 告诉搜索引擎不要此链接到的权重(可以理解为表⽰虽然链接了⽬标⽹页，但是却不认可⽬标⽹页)
target – 指定超链接的打开⽅式，⼀般不设置该属性，属性值可以是
_blank – 在新的窗⼝打开
_self – 在当前窗⼝打开
name – 规定锚的名称(此属性在 HTML5 中已被去掉。)
标准属性
class – 规定元素的类名(classname)
id – 规定元素的唯⼀ id，常⽤于制作页⾯内部链接(锚点)
html网页设计超链接style – 规定元素的⾏内样式(inline style)
title – 规定元素的额外信息(标题，可在⼯具提⽰中显⽰)
事件属性
onclick – ⿏标点击时的动作
1. 创建到其它页⾯的链接
HTML 链接的使⽤语法如下(尽量包含了上⾯的各个属性)，
显⽰到⽹页上就是这个样⼦：
点击上⾯的链接会打开本站⾸页。⿏标悬停时能看到提⽰语，也就是 title 属性的值。
提⽰：
上⾯⽰例中的四个字”⽔景⼀页“也可以是图⽚，或者其它 HTML 元素。
如果⽬标地址是个⽬录(或⽬录形式)，最好总是给链接的结尾加上⼀个 / 符号。例如，如果链接是
href="cnzhx/blog"
点击后服务器需要响应两次请求，第⼀次会将链接转变为
href="cnzhx/blog/"
第⼆次才打开转变后的⽹址(过程应该很快，但是我们应该尽量避免这种不必要的过程)。
2. 创建页⾯内部链接
前⾯提到过，id 属性常被⽤于创建到当前页⾯(⽂档)内部的链接，其作⽤类似于锚点(anchor)。也因此，HTML5 中将⽤于制作锚点的 的属性 name 取消了。
例如，在下⾯的位置创建⼀个”内部链接锚点位置“：
内部链接锚点位置
在同⼀个⽂档的其它位置创建⼀个到”内部链接锚点位置“的链接就是：
显⽰出来就是，
⽽如果在别的⽂档中，还需要在 #tips 前⾯加上到⽬标⽂档的链接地址：
显⽰出来就是，
提⽰：
所有⽀持 id 属性的 HTML 标签都可以做为锚点，直接创建到该锚点的链接就可以了。如，
标题⼀
就有了⼀个锚点 h1anchor。⽐如本⽂内部的⼏个⼩标题都设有锚点，并且在标题后⾯还⽤⼀个符号建了个超链接到当前锚点的位置。这主要是因为在页⾯上是看不到锚点的，查看页⾯源⽂件才能看到，不⽅便。可以点击这⾥跳转到 1. 创建到其它页⾯的链接 试试看。
同⼀个页⾯内部不能有重复的 id 属性值。
如果创建了⼀个指向页⾯内部位置的超链接，但是却没有写锚点⽂本，如
就会指向该页⾯的顶部。例如本站页⾯底部的”TOP“按钮就是⽤这种⽅式制作的(查看回到顶部按钮的制作⽅法)。
另外，本站给⽂档内部锚点都⽤⼀个符号 ¶ 标记出来了，将下⾯的代码放到锚点后⾯就可以了(注意将其中 # 号后⾯的⽂本 anchor 改成对应的猫点名称)：
其中 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;
}
因为主要是针对
等 HTML 标记使⽤页⾯内部链接。©

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。