Web前端技术开发学习笔记（HTML标记语⾔篇）——第9章在⽹页中创建超链
接
第9章在⽹页中创建超链接
9.1 创建超链接
创建超链接使⽤的标记是< a>。超链接要能进⾏正确的链接跳转，需要同时存在两个端点。即源端点和⽬标端点。
源端点是指⽹页中提供链接单击的对象，如链接⽂本或链接图像；
⽬标端点是指链接跳过去的页⾯或位置，如⽹页、书签等；
超链接的⽬标端点使⽤< a>标记的href属性来指定，源端点则通过< a>标记的内容来指定。
9.1.1 超链接标记
超链接< a>标记既可以⽤来设置超链接，也可以⽤来设置书签。其属性表如下：
属性属性值描述
href超链接⽂件路径指定链接路径(必设属性)，⽤于设置超链接的⽬标端点
name书签名定义书签名称
target⽬标窗⼝名称在指定的⽬标窗⼝中打开链接⽂件
title提⽰⽂字设置链接提⽰⽂字
使⽤< a>标记创建超链接的基本语法如下：
<a href=“⽬标端点”>源端点</a>
语法说明：源端点可以是⽂本，也可以是图⽚。⽬标端点制定了超链接页⾯URL，⽤户单击源端点后，页⾯将跳转到⽬标端点所指页⾯。
9.1.2 设置超链接窗⼝
超链接页⾯默认情况下在当前窗⼝打开，有时为了某种⽬的，希望超链接页⾯在其他窗⼝，如新开⼀个窗⼝中打开，此时我们创建超链接时就必须修改它的⽬标窗⼝。⽬标窗⼝的修改可以通过target属性来实现。
基本语法
<a href=“⽬标端点”target=“⽬标窗⼝名称”>源端点</a>
语法说明：target属性可以取下表所⽰的5种值
属性值描述
_blank在新窗⼝中打开链接⽂档
_self在同⼀个框架或同⼀窗⼝中打开链接⽂档(默认属性值)
_parent在上⼀级窗⼝中打开，⼀般在框架页⾯中经常使⽤
_top在浏览器的整个窗⼝中打开，忽略任何框架
框架名称在指定的框架窗⼝中打开链接⽂档
9.2 超链接的链接路径
每个⽂件都有⼀个指定⾃⼰所处的位置的标识。对于⽹页来说，这个标识就是URL，⽽对于⼀般的⽂件则是它的路径，即所在的⽬录和⽂件名。
绝对路径：⽂件的完整路径
相对路径：相对于当前⽂件的路径
总体来说，相对路径包含以下3种情况：
1. 两个⽂件在同⼀⽬录下
2. 链接⽂件在当前⽂件的下⼀级⽬录
3. 链接⽂件在当前⽂件的上⼀级⽬录
对上述相对路径的链接路径设置分别如下：
1. 同⼀⽬录，只需输⼊链接⽂件名称
2. 下⼀级⽬录，需在链接⽂件名前添“下⼀级⽬录名/”
3. 上⼀级⽬录，需在链接⽂件名前添加“…/”
9.3 超链接的类型
根据超链接⽬标端点及源端点的内容，我们可以将超链接分成不同的类型。
（1）根据⽬标端点的内容，可将链接分成以下⼏种类型：
内部链接
外部链接
书签链接
脚本链接
⽂件下载链接
（2）按照源端点的内容，⼜可将链接分成以下⼏种类型：
⽂本链接
图像链接
图像映射
9.3.1 内部链接
内部链接是指在同⼀个⽹站内部，不同⽹页之间的链接关系。
基本语法
<a href=“file_url”>源端点</a>
语法说明：通过“href”属性指定链接⽂件，即⽬标端点，“file_url”表⽰链接⽂件路径，⼀般使⽤相对路径；“源端点”既可以是⽂本，也可以是图⽚。
9.3.2 外部链接
外部链接是指跳转到当前⽹站外部，和其他⽹站中的页⾯或其他元素之间的链接关系。
基本语法
<a href=“URL”>源端点</a>
html网页设计超链接语法说明：通过“href”属性指定链接⽂件，即⽬标端点，“URL”表⽰链接⽂件的路径，⼀般情况下，该路径需要使⽤绝对路径；“源端点”既可以是⽂本，也可以是图⽚。
常⽤的URL格式如下表：
URL格式服务描述
www进⼊万维⽹
mailto:E-mail启动邮件发送系统
ftp://FTP进⼊⽂件传输服务器
telnet://Telnet启动远程登录⽅式
news://News启动新闻讨论组
上述URL中，除了发送邮件的URL设置较复杂外，其他的URL的使⽤都⽐较简单，下⾯主要介绍⼀下发送邮件的URL。
邮件链接基本语法：
<a href=“mailto：邮址1?subject=content&cc=邮址2&bcc=邮址3”>源端点</a>
语法说明：邮址1代表收件⼈的邮箱地址，subject属性⽤于设置邮件主题，cc属性⽤于设置抄送邮箱地址，bcc属性⽤于设置暗抄送邮箱地址。源端点可以是⽂本也可以是图⽚。
注意：“？”和“&”两个符号后⾯都不能包含空格。
9.3.3 书签链接
书签链接指的是⽬标端点为⽹页中的某个书签的链接。
创建书签链接涉及两个步骤：
创建书签
创建书签链接
1.创建书签
创建书签的标记与链接标记⼀样，都使⽤< a>标记
基本语法
<a name=“书签名”>[⽂字/图⽚]</a>
语法说明：[⽂字/图⽚]中的”[]”表⽰⽂字或图⽚可有可⽆，书签将在光标处建⽴⼀个名为name属性值所规定的书签。
注意：书签名中不能含有空格。
2.创建书签链接
基本语法
（1）链接到同⼀页⾯中的书签，称为内部书签链接：
<a href=“#书签名”>源端点</a>
（2）链接到其他页⾯中的书签，称为外部书签链接：
<a href=“file_url#书签名”>源端点</a>
语法说明：如果书签与书签链接在同⼀页⾯，则链接路径为#号加上书签名；如果书签和书签链接分别处在不同的页⾯，则必须在书签名及#号前加上书签所在的页⾯路径。
书签主要是起到⼀个定位作⽤，当点击时，会⽴即返回到书签所对应的内容。
9.3.4 脚本链接
脚本链接，指的是使⽤脚本作链接⽬标端点的链接。通过脚本可以实现HTML语⾔完成不了的功能
基本语法
<a href=“javascript:...”>源端点</a>
语法说明：在javascript：后⾯编写的就是具体的脚本。
9.3.5 ⽂件下载
当链接的⽬标⽂档类型属于.doc、.Rar、.cab、.zip、.exe等时，可以获得⽂件下载链接。要创建⽂件下载，只要在链接地址处输⼊⽂件路径即可。当⽤户单击链接后，浏览器会⾃动判断⽂件类型，做出不同情况的处理。
基本语法
<a href=“file_url”>链接内容</a>
语法说明：file_url指明下载⽂件的路径。
浏览器会⾃动根据下载⽂件的类型给出不同的处理⽅式。
9.3.6 ⽂本链接
⽂本链接是指源端点为⽂本的超链接
基本语法
<a href=“file_url”>⽂本</a>
语法说明：file_url可以是任意的⽬标端点
9.3.7 图⽚链接
图⽚链接是指源端点为图⽚的超链接
基本语法
<a href=“file_url”><img src=“Img_url”...></a>
语法说明：file_url指明了链接⽬标端点，img_url指明了图⽚⽂件路径。默认情况下，图⽚链接中图⽚会显⽰蓝⾊的边框线，如果不想显⽰边框，应设置图⽚的border=“0”。
9.3.8 图像映射
图像映射是指源端点为图⽚热区的超链接。⼀幅图像被切分成不同的区域，每⼀个区域可以链接到不同的地址，这些区域称为图像的热区。基本语法
<img src=“img_url”use map=“#map_name”>
<map name=“map_name”>
<area shape=“rect”coords=“X1,y1,x2,y2”href=“链接地址1”>
<area shape=“circle”coords=“X,y,r”href=“链接地址2“>
<area shape=“poly”coords=“x1,y1,x2,y2,x3,y3,...”href=“链接地址3”>
...
</map>
语法说明：
1）img标记中的usemap属性⽤于 激活映射；
2）< map>标记⽤于定义图像映射中包含热点的映射；
3）< area>标记⽤于在图像映射中定义⼀个热区，其包含了3个必须设置的属性：shape、coords和href；
4）href属性⽤于设置每个热区的链接路径；
5）shape属性设置热区形状。图像映射包括3种形状的热区：矩形、圆形和多边形。coords属性设置热区坐标，热区形状决定了coords的取值，shape属性和coords属性的取值关系。
shape coords描述
矩形rect x1，y1，x2，y2(x1,y1)为矩形左上顶点坐标，(x2,y2)为矩形右下顶点的坐标
圆形circle x，y，r(x，y)为圆⼼坐标，r为半径长度
多边形poly x1，y1，x2，y2，…(x1,y1)(x2,y2)…分别为多边形的各个顶点坐标，各顶点按单击⽣成的先后排序

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