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小时内删除。