HTML网页设计教程 第5章 超级链接
HTML超链接课件
超 链 接
1.超链接基本知识。 2.超链接的建立方法。
3.内部链接、书签链接、外部链接。
超链接基本知识
1. 超链接 超文本链接(hypertextlink)通常简称为 超链接(hyperlink),或者简称为链接(link )。链接是HTML 的一个最强大和最有价值 的功能。链接是指文档中的文字或者图像与另 一个文档、文档的一部分或者一幅图像链接在 一起。
more.html 文件的代码如下:
<html> <head> <title>目标窗口的打开方式</title> </head> <body> <center><h2>影片详情</h2></center> <font size=4>《孤岛》The Island</font><br><br> 男青年林肯· 6E(伊万· 迈克格雷戈)生活在 一个貌似乌托邦、却被21 世纪中叶先进的科学技术设备武装起来的社区 里。<br> 但是,不久后的一个意外让林肯惊觉:原来 ,他头脑中一切关于自己身世和整个这个社区的认识都是一个巨大的谎 言!他和社区里的所有居民其实都是“神秘岛”居民们的克隆人,他们 的存在只是为了给他们的“原型”提供各种更换用的身体零件,而这个 社区其实只是个软禁他们的牢笼……<br> </body> </html>
target值
_parent _blank
HTML超链接
4、超链接4.1网页链接代码结构:<html><head><title>超链接</title></head><body><a href="链接网址">......</a><a href="链接网址">......</a><a href="链接网址">......</a></body></html>注释:<a>表示超链接,英文名称为anchor。
<a>可以指向任何一个文件源,如HTML网页、图片或其他任何类型的文件。
在上例中,<a>和</a>是超链接的标签,......是链接名。
<a>表示一个超链接的开始,</a>是一个超链接的结束,单击<a>与</a>中间包含的内容,即可以打开相应链接网页。
超链接文本默认带下划线且文字颜色为蓝色,当鼠标在“超链接名”上方时指针会变成手状。
如果是本地链接,则该网页必须和超链接网页在同一目录下。
4.2target和titletarget和title使用的代码结构:<html><head><title>......</title></head><body><a title="文字" href="网页链接地址">......</a><br><a href="网页链接地址" target="_blank">......</a></body></html>taret="_blank":在新窗口中打开超链接。
Html语言——超级链接
编码 %3B %2F %3F %3A %40 %3D %26 %3C
7
School of Applied Technology Soochow University
URL的保留字符和不安全字符 的保留字符和不安全字符
字符 > “ # : % { } |
2011-3-21
描述 大于号 双引号 井号 冒号 百分号 左大括号 又大括号 竖线
注意:一般除了字母、数字和“ 注意:一般除了字母、数字和“$,-,_,.,+,!,*,’,()外,其他 外 所有字符都应该使用编码” 所有字符都应该使用编码”
2011-3-21 School of Applied Technology Soochow University 9
2 建立指向其他页面的链接 其格式为: 其格式为: <a href=”目标文件的路径/目 目标文件的路径/ 目标文件的路径 标 文 件 名 .html”> 热点文本 </a>
热点文本
5) 创建指向本页中的链接 要在当前页面内实现超链接,需要定义两个标记: 要在当前页面内实现超链接,需要定义两个标记:一个为超链接标 另一个为书签标记。超链接标记的格式为: 记,另一个为书签标记。超链接标记的格式为: <a href=”#记号名”> 热点文本</a> 记号名” 热点文本 / 记号名 即单击热点文本,将跳转到“记号名”开始的文本。 即单击热点文本,将跳转到“记号名”开始的文本。 书签就是用<a>标记对该文本做一个记号。若有多个链接的书签名, <a>标记对该文本做一个记号 书签就是用 <a> 标记对该文本做一个记号 。 若有多个链接的书签名 , 书签名在<a> name属性中定义 <a>的 属性中定义。 书签名在<a>的name属性中定义。 格式为: 格式为: <a name=”记号名”> 目标文本附近的字符串 </a> 记号名” 记号名 /
html5-超链接
Html基础 超链接
创建超链接 在HTML中创建超链接非常简单,只需用<a></a>标记 环绕需要被链接的对象即可,其基本语法格式如下:
<a href="跳转目标" target="目标窗口的弹出方式">文本 或图像</a>
在上面的语法中,<a>标记是一个行内标记,用于定 义超链接,href和target为其常用属性,下面对它们进 行具体地解释。
关于下列代码片段的说法中,正确的是()。
<HR size= "5" color="#0000FF" width="50%"> A.size是指水平线的长度
B.size 是指水平线的宽度
C.width 是指水平线的宽度 D.width是指水平线的高度
在HTML中,下面(
7
✎
练习
春夏秋冬四季轮换案例小练习
考查知识点: 图像标记 超链接
Html基础 锚点链接
锚点链接
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:
使用“<a href=”#id名“>链接文本</a>”创建链接文 本。 使用相应的id名标注跳转目标的位置。
2019/3/3
9
A. B.
C.
D.
)不属于HTML文档的基本组成部分。 <STYLE></STYTLE> <BODY></BODY> <HTML></HTML> <HEAD></HEAD>
用HTML建立超链接(a)
⽤HTML建⽴超链接(a)HTML⽂件最重要的特征之⼀就是超链接,通过⽹页上所提供的连接功能,⽤户可以链接到⽹络上的其他⽹页。
4.1 设置基本⽂字超链接建⽴超链接所使⽤的HTML标记为<a></a>标记。
超链接最重要的有两个要素,设置为超链接的⽂本内容和超链接指向的⽬标地址。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超链接</title></head>点击<a href="4.1.2.html"这⾥</a>连接到⼀个图⽚⽹页</body></html>注:在<a>和</a>标记之间的内容就是在⽹页中被设定为超链接的内容。
hef属性是必要属性,⽤来放置超链接的⽬标地址,可以是本⽹站内部的某个HTML⽂件,也可以是外部⽹站某个⽹页的URL地址4.1.1 URL的格式每个⽂档在互联⽹上有唯⼀的地址,该地址的全称为统⼀资源定位器(Uniform Resource Laocator),简称URL。
URL由4个部分构成,即“协议”,“主机名”,“⽂件夹名”,“⽂件名”。
http:(协议)//(主机名)/study(⽂件夹名)/index.htm(⽂件名)注:RL可分为两种:相对⽂档的URL,这种URL以链接的原⽂档为起点;相对服务器的URL,这种URL以服务器的根⽬录为起点。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超链接</title></head><body>点击<a href="https:///EditPosts.aspx?opt=">链接01</a>链接到第⼀个⽹页<br>点击<a href="3.4.html">链接02</a>链接到第2个⽹页</body></html>其中第1个使⽤的是绝对URL;第2个⽤的是服务器相对URL。
HTML超级链接详细讲解
HTML超级链接详细讲解超级链接超级链接是⽹站中使⽤⽐较频繁的HTML元素,因为⽹站的各种页⾯都是由超级链接串接⽽成,超级链接完成了页⾯之间的跳转。
超级链接是浏览者和服务器的交互的主要⼿段,在后⾯的技术中会逐步深化学习。
— 注意:图⽚也可以做链接,将在下⼀章“⽹页中的图⽚”详细学习。
4.5.1 给⽂字添加链接超级链接的标签是<a></a>,给⽂字添加超级链接类似于其他修饰标签。
添加了链接后的⽂字有其特殊的样式,以和其他⽂字区分,默认链接样式为蓝⾊⽂字,有下划线。
超级链接是跳转到另⼀个页⾯的,<a></a>标签有⼀个href属性负责指定新页⾯的地址。
href指定的地址⼀般使⽤相对地址。
— 说明:⽹站开发中,⽂档相对地址使⽤更为普遍。
在D:\web\⽬录下创建⽹页⽂件,命名为a.htm,编写代码如代码4.18所⽰。
代码4.18 超级链接的设置:a.htm<html><head><title>超级链接的设置</title></head><body><font size="5"><a href="ul_ol.htm">进⼊列表的设置页⾯</a></font></body></html>图4.19 超级链接的设置读者可从图4.19中看到超级链接的默认样式,当单击页⾯中的链接,页⾯将跳转到同⼀⽬录下的ul_ol.htm页⾯,即上节的列表设置页⾯。
当单击浏览器的“后退”按钮,回到a.htm页⾯时,⽂字链接的颜⾊变成了紫⾊,⽤于告诉浏览者,此链接已经被访问过。
4.5.2 修改链接的窗⼝打开⽅式默认情况下,超级链接打开新页⾯的⽅式是⾃我覆盖。
根据浏览者的不同需要,读者可以指定超级链接的其他打开新窗⼝的⽅式。
HTML超链接课件..
2 建立文本超链接 在网页中,文本超链接是最常见的一种。它通 过网页中的文件和其他的文件进行链接。
语法:<A href="链接地址">链接文字</A>
说明:在该语法中,链接地址可以是绝对地址,也 可以是相对地址。
<html> <head> <title>文本链接</title> </head> <body> <center><h3>神话故事:八仙斗花龙</h3></center> <a href="next.html">下一篇:女娲补天</a><br><br> 传说,有一天八仙要到东海去游蓬莱岛。本来, 腾云驾雾,一眨眼就可到,可是吕纯阳偏偏别出心裁,提出要乘船过海,观 赏海景。他拿来铁拐李的拐杖,往海里一抛,喝声“变”,顿时变成一艘宽 敞、漂亮的大龙船,八位大仙坐船观景,喝酒斗歌,好不热闹。不料,因此 惹出一场麻烦来。原来,龙宫里有条花鳞恶龙,是龙王的第七个儿子,称为 “花龙太子”。这天,他闲得没事,在水晶宫外游荡,忽闻海面上有仙乐之 声,便循声寻去,猛见一条雕花龙船,内坐八位奇形怪状的大仙,其中有个 妙龄女郎,楚楚动人,花龙太子见此仙姿,魂魄俱消,早忘了师傅南极仙翁 的忠告,忘了龙王母的训导,想入非非,似魔似痴地迷上何仙姑了。<br> </body> </html> 在这段代码中,有一个文本链接“下一篇:女娲补天”,它链接到了当 前目录下的next.html 文件。
HTML语言—建立超级链接
<!--
文件范例:ex0367.htm
-->
<!-- 文件说明:建立书签链接
-->
<html>
<head>
于被上引一用层的目是录同的一另个一文个件子时目,
ch7
ch7_1.htm
录不中论时从,哪运个用文相件对引路用径,是所比使
dir3 Evcha7lu_a2t.hiotmn较用on方的ly便绝. 的对。路径都是一样的。
eate引d用w者ith As被po引se用.S者lides for相.N对E路T径3.5 Client绝P对ro路fi径le 5.2.0
头部(Choepaydr中igh),t 2在01任9-何20保19护AUsRpLo地se址P的ty语Lt句d.之前。
• 基本语法: <BASE HREF=“URL” TARGET=“WINDOW_NAME”>
根路径
• 根路径:一种特别的相对路径 • 例:/info/fi1.exe eat•ed下w列ith情A况sp可os使e.S用lEid:veaslufoarti.oNnEoTnl3y..5 Client Profile 5.2.0
HTML-超链接 Evaluation only.
eated with Aspose.Slides for .NET 3.5 Client Profile 5.2.0 Copyright 2019-2019 Aspose Pty Ltd.
HTML第5章 超 链 接
·64·HTML网页设计参考手册超链接基本知识超链接的建立内部链接书签链接外部链接所谓超链接就是当单击某个字或某个图片时,就可以打开另外一个画面。
它的作用对网页来说相当重要,如果没有它,那便只能在每打开一个页面时就要在地址栏内输入一次地址了。
第5章超链接·65·5.1 超链接基本知识5.1.1 超链接对于初次接触网页设计的读者来说,可能对于超链接的概念还不是很明白。
超链接就是从一个网页转到另一个网页的途径。
超链接是网页的重要组成部分。
如果说文字、图片是网站的躯体,那么超链接就是整个网站的神经细胞,它把整个网站的信息有机地结合到一起。
链接能使浏览者从一个页面跳转到另一个页面,实现文档互联、网站互联。
超文本链接(hypertextlink)通常简称为超链接(hyperlink),或者简称为链接(link)。
链接是HTML的一个最强大和最有价值的功能。
链接是指文档中的文字或者图像与另一个文档、文档的一部分或者一幅图像链接在一起。
5.1.2 绝对路径绝对路径就是主页上的文件或目录在硬盘上的真正路径。
使用绝对路径定位链接目标文件比较清晰,但是有两个缺点:一是需要输入更多的内容,二是如果该文件被移动了,就需要重新设置所有的相关链接。
例如在本地测试网页时链接全部可用,但是到了网上就不可用了。
这就是路径设置的问题。
例如设置路径为“C:\Program files\1.htm”,在本地确实可以找到,但是到了网站上该文件便不一定在这个路径下了,所以就会出问题。
5.1.3 相对路径首先分析一下为什么会发生图片不能正常显示的情况。
举一个例子,现在有一个页面index.htm,在这个页面中链接有一张图片photo.jpg,它们的绝对路径如下:c:\website\index.htmc:\website\img\photo.jpg如果使用绝对路径c:\website\img\photo.jpg,那么在自己的计算机上将一切正常。
网页制作与网站设计_05Dreamweaver CS3创建超级链接
任务三
任务描述 任务说明
操作步骤
3)按F12键,保存网页文档并在浏览 器中检验该文档。
任务四
任务描述 任务说明 操作步骤
小张想自己设立了一个网页,在
运行过程中可能会出现问题,通过浏
览者能反馈的信息,及时改进,提高 网页的制作水平。
任务四
任务描述 任务说明
在网页上创建E-mail链接,可以使浏
任务一
任务描述
任务说明 操作步骤
“_blank”:在弹出的新窗口中打开所链接 的目标。 “_parent”:如果是嵌套的框架,表示在 父框架 “_self”:浏览器默认的设置,在当前网页 所在的窗口中打开链接的网页。 “_top”:在完整的浏览器窗口的顶层打开 链接目标。
任务一
任务描述
任务说明 操作步骤
任务一
任务描述
任务说明 操作步骤
在“属性”面板中,单击“链接”文
本框右侧的指向文件图标,拖动鼠标时会
出现一条带箭头的细线,指示到链接的文 件后,释放鼠标,可以链接该文件⑻如图
5-4所示。
任务一
任务描述
任务说明 操作步骤
图5-4 创建指向文件图标链接
任务二
任务描述
任务说明 操作步奏
小张在浏览网页时,看见鼠标经过 某些文本时,会出现一个小手,点击后 会出现新的窗口,自己也想试一试。
图5-2 目标选项
任务一
任务描述
任务说明 操作步骤
④“标题”:设置超链接的标题。当鼠 标悬停在超级链接上时出现的说明文字。 ⑤“访问键”:设置键盘快捷键,设置 好后,如果按键盘上的快捷键将选中这个 超级链接。 ⑥“Tab键索引”:设置在网页中用 Tab键选中这个超链接的顺序。 2)完成参数设置后,单击“确定”按钮, 即可完成链接。
网页设计 第5章超级链接及使用 共九章ppt
2、 制作步骤 1 )定义本书素材 source 目录下的文件夹 5-1-5 为本 地站点目录。 打开根目录下的 map.htm文件,选择“【窗口】→【 属性】”菜单命令,打开属性面板。如图5-1-20所示。
选中文档中的图片,属性面板出现相应的各项设 置。如图5-1-21所示。
选择“属性”面板中“地图(M)”下图标中的某 一形状,按住鼠标左键在图片中相应位置拖动即可建 立一个矩形的“热区”,在默认情况下,刚创建的热 区的“链接(L)”为“#”,需要手动设置链接的目标 网址,同时也可设置“目标(R)”及“替代(T)”。如 图5-1-22所示。
2、 制作步骤 ( 1 )定义本书素材 source 目录下的文件夹 5-1-4 为本 地站点目录。 打开根目录下的 traandwri.htm文件,选择“【窗口】→ 【属性】”菜单命令,打开属性面板。如图5-1-15所示
(2)创建锚点 将鼠标光标定位于页面中标题“翻译与写作”文 字之后,选择主菜单“【插入】→【命名锚记(N) 】” ,弹出“命名锚记”对话框,输入“命名锚记返回顶 部”文字后单击“确定”按钮,如图5-1-16所示。
直接输入 mailto:echo@
方法二: 将鼠标光标定位于页面中要显示电子邮件的地方, 选择主菜单“【插入】→【电子邮件链接(L) 】”,弹 出“电子邮件链接”对话框,输入相应内容后单击“ 确定”按钮,如图5-1-14所示。
“电子邮件链接”对话框中,设置以下选项: 文本。显示在页面中的文字,可以为Email地址 或其它文字。 E-mail。邮件地址。
“ 指向文件”图标指向 目标窗口任意位置
方法四: 打开属性面板,在“链接(L)” 直接输入链接地址 ,如要链接到站点内的其他文档,输入目标文件的具 体路径与文件名;要链接到站点以外的文档,则输入 完整 URL,而且包括所使用的协议。 例如,选中“index.htm”文档中的“logo.gif”图片 ,打开属性面板,在“链接(L)”直接输入 /index.asp,即可自动生成目 标指向网站下的index.asp文档 的链接。如图5-1-10所示。
HTML5超链接和路径
第4章超链接和路径学习要点:1.超链接的属性2.相对与绝对路径3.锚点设置本章主要探讨HTML5中文本元素最重要的一个超链接,探讨它自身的属性以及路径问题。
一.超链接的属性<a>元素属于文本元素,有一些私有属性或者叫局部属性。
那么,相对应的还有通用属性或叫做全局属性。
这方面的知识,后面会详细探讨。
属性名称说明href 指定<a>元素所指资源的URLhreflang 指向的链接资源所使用的语言media 说明所链接资源用于哪种设备rel 说明文档与所链接资源的关系类型target 指定用以打开所链接资源的浏览环境type 说明所链接资源的MIME类型(比如text/html)在这几个属性当中,只有href和target一般比较常用,而href是必须要用的。
其他几个属性,在<a>元素使用较少,将在CSS章节再探讨。
1.href属性<a href="">百度</a>解释:href是必须属性,否则<a>元素就变成空元素了。
如果属性值是http://开头的URL,意味着点击跳转到指定的外部网站。
2.target属性<a href="" target="_blank">百度</a>解释:target属性告诉浏览器希望将所链接的资源显示在哪里。
属性名称说明_blank 在新窗口或标签页中打开文档_parent 在父窗框组(frameset)中打开文档_self 在当前窗口打开文档(默认)_top 在顶层窗口打开文档这四种最常用的是_blank,新建一个窗口。
而_self是默认,当前窗口打开。
_parent和_top是基于框架页面的,分别表示在父窗口打开和在整个窗口打开。
而HTML5 中,框架基本被废弃,只能使用<iframe>元素,且以后大量结合JavaScript和PHP等语言配合,框架用的就很少了。
HTML语言—建立超级链接.ppt
</head>
<body>
<h1>主流的网页设计软件</h1>
<p> MACROMEDIA公司的网页设计三剑客DREAMWEAVER、FLASH、 FIREWORKS。</p>
<a href=ex0366-1.htm">网页制作软件DREAMWEAVER MX 2004</a>
<br>
<a href=“test/ex0366-2.htm">网页动画软件FLASH MX 2004</a>
</body>
</html>
<!--
文件范例:ex0366-1.htm
-->
<!-- 文件说明:内部链接文件之一 -->
<html>
<head>
<title>Dreamweaver MX 2004</title>
</head>
<body>
<h1>主流的网页设计软件</h1>
<p> DREAMWEAVER MX 2004作为网页设计软件的代表,
<A HREF=“链接位置”>超链接名称</A>
• 超链接名称 此字符串将显示于网页中,代表此超链接,并 供用户 点选超链接用,也可用图文件来代替 字符串代表超链接。
• 链接位置 指定href 属性,用来放置超链接的目标,可 使用URL 指定。URL的格式是由通讯协议、 链接地址与文件位置所 组成,如:通讯协议: // 链接地址 / 文件位置…… / 文件名称
网页设计与制作 项目 5使用超链接
注意:在创建E-mail链接时,mailto:和 “@”是必不可少的
5.2.5 创建空链接
空链接实际上是一个未指派目标的链接,利用 空链接可以激活网页上的对象或文本。
(1)打开HTMI,选择文字或图片
页
Javascript:window.close():关闭窗口
任务2 管理超链接
5.3.1 链接检查器的使用
在DreamweaverCS4中可以使用链接检查器来 管理当前站点的超链接,帮助站点制作者检查站 点的链接是否有效,统计有效连接、无效链接、 断开连接和外部链接的个数,修改断开或无效的 链接。
2.图像地图
图像地图,也称为图像热区、图像热点,在“属 性”面板上的矩形、圆形和多边形热点工具建立 需要的热点区域
5.2.3 创建锚点连接
1.创建目标在本页上的锚点链接
(1)打开HTML,光标定位在热字前面, “插入”——“命名锚记”命令,或者在“常 用”选项卡中单击“命名锚记”按钮
(2)在“锚记名称”文本框中输入锚记的 名称abc,单击“确定
(2)在“属性”面板“链接”下拉列表中输入 “javascript:;”或输入“#”就可以了
5.2.6 创建文件下载链接
选择需要创建文件下载链接的源文本,在 “属性”面板“链接”下拉列表输入目标文件的 URL
5.2.7 创建脚本链接
网站中的超链接不但可以实现网页页面之间的跳转, 还可以直接调用Javascript代码,这种超链接就成为脚本 链接或Javascript链接。 (1)选定文字或图片,在“属性”面板“链接”下拉列表 中输入“Javascript :”,然后输入一些Javascript代码 或函数调用即可
用HTML建立超链接
在页面中单击其中的一个链接文字,页面将会跳转 到该链接的书签所在位置。
4.3 书签链接
4.3.3 不同页面的书签链接 在链接地址上输入其他页面地址,也可以链接到其
他页面。其具体语法格式如下: <a href=”链接的文件地址#书签的名称”>链接
的文字</a> 在该语法中,与同一页面的书签链接不同的是,需
要在链接的地址前增加文件所在的位置。
4.3 书签链接
例题4-5:设置一个单独的链接页面,使其链接到 前面定义的书签页面。
单击其中的某个链接,例如,选择元日,就可以直 接链接到书签所在的位置。
4.4 设置不同的链接对象
4.4.1 设置外部链接:链接HTTP页面 外部链接就是链接本站点以外的内容。外部链接的
式>链接元素</a>
在该语法中,target参数的取值有三种。
target值
目标窗口的打开方式
_parent
在上一级窗口打开
_blank
新建一个窗口打开
_self
在同一窗口打开,与默认设置相同
_top
在浏览器的整个窗口打开,将会忽略所有 的框架结构
4.2 初步认识超链接的标记
HTML超链接
HTML超链接HTML超链接 ⽹站的各个HTML⽂档通过超链接的⽅式相互连接在⼀起,形成⼀个连贯的⽹站。
⽤户可以通过点击超链接跳转到⾃⼰希望浏览的页⾯中。
因此超链接在任何⼀个⽹站中都可以看到,是串联⽹站形成整体的核⼼组成部分。
锚点的布置 HTML超链接以标签作为锚点进⾏触发,锚点需要有⼀个载体,⽽这个载体可以是⼀个⽂字、⼀个词、或者⼀句话,也可以是图像或者某个形状。
当⿏标移动到带有锚点的载体上时,⿏标会变成⼀个⼩⼿的状态,⽰意⽤户可以进⾏点击,⽤户点击这个锚点后会跳转到这个标签中href对应的地址上。
跳转属性的⽤法 在HTML链接中,使⽤ href 属性可以创建指向另⼀个⽂档的.链接,通常⽤于页⾯跳转。
这个很常见,就不再阐述了。
使⽤ name 属性可以在⽂档内部创建书签,使超链接可以在⽂档内部跳转到页⾯的某⼀部分。
例如:设置将其放置到页⾯的中间。
然后在页⾯头部设置跳转到页⾯中间锚点,当⽤户在页⾯头部点击这个锚点事,页⾯会滚动跳转到name书签所在的位置,也就是页⾯中间。
HTML 链接语法 HTML链接的代码使⽤很简单。
例如: XML/HTML Code复制内容到剪贴板锚⽂本链接 href属性⽤于设定跳转的⽬标,开始标签和结束标签之间的⽂字被作为超级链接来显⽰。
HTML 链接的target 属性 target属性可以设定通过锚⽂本点击跳转后页⾯的打开⽅式。
有 4 个保留的⽬标名称⽤作特殊的⽂档重定向操作: _blank 浏览器总在⼀个新打开、未命名的窗⼝中载⼊⽬标⽂档。
_self 这个⽬标的值对所有没有指定⽬标的标签是默认⽬标,它使得⽬标⽂档载⼊并显⽰在相同的框架或者窗⼝中作为源⽂档。
这个⽬标是多余且不必要的,除⾮和⽂档标题标签中的 target 属性⼀起使⽤。
_parent 这个⽬标使得⽂档载⼊⽗窗⼝或者包含来超链接引⽤的框架的框架集。
如果这个引⽤是在窗⼝或者在顶级框架中,那么它与⽬标 _self 等效。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
5.2创建超链接
5.2.1设置超链接路径
建立链接时,属性“href”定义了这个链接所指的目标地 址,也就是路径。理解一个文件到要链接的那个文件之间 的路径关系是创建链接的根本。每一个网站都具有独一无 二的地址,英文中被称作URL(Uniform Resource Locator),即统一资源定位器,同一个网站下的每一个 网页都有不同的地址,但是在创建一个网站的网页时,不 需要为每一个链接都输入完整的地址,我们只需要确定当 前文档同站点根目录之间的相对路径关系就可以了。
5.3.1图片链接
<!--程序 程序5-2--> 程序 <html> <head> <title>建立图片链接 建立图片链接</title> 建立图片链接 </head> <body> <center> <h2>图片链接 图片链接</h2> 图片链接 <hr> <a href="" target="_blank"><i</a> </center> </body> </html>
5.4图像映射
基本语法: 基本语法:
<img src="URL" usemap="id/name"> <map name="name" id="id"> <area shape=" " coords=" " href="URL"> </map>
5.4图像映射
<!--程序 程序5-8--> 程序 <html> <body> <p align="center"> <img src="images/chmap.jpg" width="650" height="538" border="0" usemap="#chinaMap"/> <map name="chinaMap"> <area shape="rect" coords="431,288,487,324 " href="#zhengzhou" alt="郑州 郑州"> 郑州 <area shape="circle" coords="497,196,14" href="#beijing" alt="北京 北京"> 北京 <area shape="circle" coords="560,327,16" href="#shanghai" alt="上海 上海"> 上海 <area shape="poly" coords="542,110,629,130,587,169" href= "#changchun" alt="长春 长春"> 长春 </map> </p> <br> <br>
5.2创建超链接
<!—程序 程序5-1--> 程序 <html> <head> <title>创建链接 创建链接</title> 创建链接 </head> <body> <center> <h2>创建链接 创建链接</h2> 创建链接 <hr> <p><a href="" title="打开新浪首页 新浪</a> <!--添加新浪链接 打开新浪首页">新浪 添加新浪链接--> 打开新浪首页 新浪 添加新浪链接 <br> <a href="lt;br> <a href="">北 京 大 学</a> <!--添加北京大学链接 添加北京大学链接--> 北 添加北京大学链接 </p> </center> </body> </html>
5.3.1图片链接
5.3.2书签链接
在浏览页面时,如果页面篇幅很长,要不断的拖动滚动条, 给浏览带来不便,要是浏览者既可以从头阅读到尾,又可 以很快寻找到自己感兴趣的特定内容进行部分阅读,这个 时候就可以通过书签链接来实现。当浏览者单击页面上的 某一“标签”,就能自动跳到网页相应的位置进行阅读, 给浏览者带来方便。
WEB编程基础
清华大学出版社
Company name
第5章 超级链接
主要内容
• 为网页添加超链接 • 添加书签链接、电子邮件超链接、 FTP链接 添加书签链接、电子邮件超链接、 链接 • 建立图像映射
5.1超链接简介
网页文件的最大魅力是超越各个文件的空间,通过超 链接相互连接构成一个纷繁复杂的互联网世界。超链接 (hyperlink)是一个网站的精髓,超链接在本质上属于一 个网页的一部分,它是一种允许一个网页同其他网页或站 点之间进行链接的元素。各个网页链接在一起后,才能真 正构成一个网站。超文本具有的链接能力,层层链接相关 文件,这种具有超级链能力的特性,即称为超链接。超链 接除了可链接文本外,也可链接各种媒体,如声音、图像 和动画等,通过它们可以将网站建设成一个丰富多彩的多 媒体世界。
5.3.3电子邮件链接
<!--程序 程序5-5--> 程序 <html> <head> <title>发送邮件 发送邮件</title> 发送邮件 </head> <body> <p> 这是邮件链接: 这是邮件链接: <a href="mailto:xyz@?cc=abc@&subject =你好 你好 &bcc=a@&body=祝你度过快乐的一天!"> 祝你度过快乐的一天! 祝你度过快乐的一天 联系我们</a> 联系我们 </p> </body> </html>
5.1超链接简介
5.1超链接简介
5.2创建超链接
建立超链接的标记是a(anchor,锚),以<a>开始,以 </a>结束,锚可以指向网络上的任何资源:一张HTML页 面,一幅图像,一个声音或视频文件等。 基本语法: <a href="url" title="指向链接显示的文字" target=" 窗口名称">超链接名称</a> "> </a>
5.4图像映射
<h2 align="left"><a name="zhengzhou">郑州 郑州</a></h2> 郑州 <p align=“left”>郑州,河南省省会,是中国重要的内陆开放城市和历史文化 郑州, 郑州 河南省省会, 名城。郑州历史悠久,文化灿烂,旅游资源丰富。 名城。郑州历史悠久,文化灿烂,旅游资源丰富。</p> <h2 align="left"><a name="beijing">北京 北京</a></h2> 北京 <p align=“left”>北京中华人民共和国首都。中央直辖市,简称京,是我国第 北京中华人民共和国首都。 北京中华人民共和国首都 中央直辖市,简称京, 二大超级现代化大都市。北京是我国的政治中心、交通中心、文化中心、 二大超级现代化大都市。北京是我国的政治中心、交通中心、文化中心、科 研中心、教育中心。具有较高的国际知名度。 研中心、教育中心。具有较高的国际知名度。</p> <h2 align="left"><a name="shanghai">上海 上海</a></h2> 上海 <p align=“left”>上海是中国第一大城市,世界第八大城市,中国中央四个 上海是中国第一大城市, 上海是中国第一大城市 世界第八大城市, 直辖市之一。 有超过2000万人口居住和生活在上海及其附近地区。</p> 万人口居住和生活在上海及其附近地区。 直辖市之一。 有超过 万人口居住和生活在上海及其附近地区 <h2 align="left"><a name="changchun">长春 长春</a></h2> 长春 <p align=“left”> 长春,吉林省省会,全省政治、经济、文化和交通中心, 长春,吉林省省会,全省政治、经济、文化和交通中心, 中国最大的汽车工业城市,中国建成区面积和建成区人口第九大城市, 中国最大的汽车工业城市,中国建成区面积和建成区人口第九大城市, 东北地区中部最大的中心城市。 东北地区中部最大的中心城市。</p> </body> </html>
5.3.2书签链接
基本语法: 基本语法:
在同一页面内要使用书签链接的格式: <a href="#书签名称" target="窗口名称">链接标题 </a> 在不同页面之间要使用书签链接的格式(在不同页面中链 接的前提是需要指定好链接的页面地址和链接的书签名 称): <a href="URL地址#书签名称" target="窗口名称">链 接标题</a> 以上两种书签链接形式,链接到的目标为: <a name="书签名称">链接内容</a>。