第6章_超级链接

·67· 第 6 章 超级链接 互联网因有超级链接才如此丰富，使网络不限于特定的地理位置，全球的站点只要鼠 标一点，就可以到达全球任意一个站点。超级链接简称超链接，人们常说成链接，在以后 的学习中以链接形式给出。超链接可以在文字中指定链接，同时也可以在图片中设置超链 接，而链接的地址可以是网页（静态页面 html 或动态页面 jsp、php、aspx 等），还可以是 图片（jpg、gif 等）或其他文件，网上的下载功能就用到了超链接，连接到将要下载的文件 上。本章主要介绍了以下内容： ‰ 文字链接 ‰ 图片链接 ‰ 锚点的使用 ‰ 邮箱地址链接 ‰ 相对路径与绝对路径 6.1 文字链接 在前面学过的文字中，都是以文本形式出现的，可能很多读者想知道为什么看新闻的 时候，单击新闻上的标题就跳到另一网页中。这里因为文字上加上了超链接，所以链接到 了其他页面中。现在开始学习文字链接。 6.1.1 最简单的文字超链 文字链接就是为文本做上超级链接，以达到跳转网页效果。文字链接语法如下： 文字链接 其中引号里面输入要链接到的网页地址，文字链接被标签对包围着，代表是超 链接。里面的 href 属性说明文字链接的地址。属性里面可以是 url 地址、图片地址或影视文 件等。 代码 6.1 演示了文字链接的用法。 代码 6.1 源代码\第 6 章\文字链接.htm ·68· 163 网站 从代码 6.1中可以看出，在 163网站的文本中做超链接，链接地址是 http://www.163.com， 链接后的文本颜色默认是蓝色，同时在链接的文本下面有一条下划线，当鼠标指针移动到 文本上面时，形状就变成手型，如图 6.1 所示。 图 6.1 文字链接 说明：超链接的文字默认是蓝色，鼠标指针放上去变成手型。 6.1.2 超链网页的打开方式 知道了是链接代码且 href 是表示路径地址后，再来看一个重要属性。target 属 性，也是放在起始标签里面，表示所链接的网页在浏览器中的打开方式，后面接一个参数， 其值可以是其中的一种：_blank、_parent、_self、_top，这些参数代表的含义如下所示。 ‰ _blank：在新浏览器窗口中打开网页。比较常用。 ‰ _parent：将要链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链 接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就像_self 参数一样。 ‰ _self：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。 ‰ _top：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。 代码 6.2 是分别用上面四个知识点做四个链接。 代码 6.2 源代码\第 6 章\ target 用法.htm 163 网站--新浏览器打开
·69· 163 网站--父窗口中打开
163 网站--同一框架或窗口中打开 在代码 6.2 中，在三行文本中，都设置了文本链接，指向 www.163.com 网站，但设置 的 target 值不同，其中第一行中，设置为_blank，表示在浏览器中打开新的窗口；第二个文 本链接调协_parent，表示在父窗口中打开；第三行，即最后一行文本链接中，设置 target 值为_seft，表示在同一窗口中打开网页，通过这三种方式的表示，效果如图 6.2 所示，当单 击这些链接时，打开窗口方式就不同了。 图 6.2 target 用法 说明：target多试几次就很明白了，仔细观察从哪个开启新网页。 6.1.3 链接的注释 除了前面介绍的链接属性，还有一种链接属性：注释。当鼠标指针放在文本链接上时， 稍后会出现一行文字注释。关键字为 title，语法形式如下： 163 网站 等于后面引号放的是链接的注释，当鼠标指针在文字上面它就会出现在鼠标指针后面。 代码 6.3 演示的是 title 的用法。 代码 6.3 源代码\第 6 章\ title 的用法.htm 163 网站 ·70· 在代码 6.3 中，对文本“163 网站”设置用链接外，还设置了 title 值 ，即表示对本链 接的注解，当鼠标指针移动到文字上面时，注解内容即在鼠标指针后面显示，这效果和使 用图像时的 alt 参数不同的是，这是文本链接，而且用 title 表示注解，而图像在中用 alt 表示。上述代码的效果如图 6.3 所示。 图 6.3 title 用法 注意：除了文本表达出信息外。还可以在 title 里添加类似信息表示注解，使主题更丰 富，更容易理解。 6.2 图片链接 文本链接是相对文本内容，同理，图像链接是相对图片而言的。对图片设置链接在前 面提过，也有相关实例，在本小节中，将系统的讲解图片链接内容。通过链接，单击图片 后，链接也可以指向全球任意位置的站点，目标可以是网页，也可以是文件。如是文件， 不能被浏览器解析成网页和图片等时，可能会作下载用；在网页中，为了表示下载链接的 效果，通常用图片来展现下载的图像效果，然后链接文件。当单击时，文件就被下载，将 会出现下载选项。 图片链接顾名思义就是对图片做超级链接。通过上一节的学习，知道了文字链接是在 标签对里插入文字，同理，图片链接就是在链接标签对里面放入图片地址。 单击图片同样有超链接的效果。语法形式如下： 在第 4 章学了图片的插入，上面代码是在插入的图片中做了超链接，图片默认有边框。 代码 6.4 说明了图片链接。 代码 6.4 源代码\第 6 章\图片链接.htm ·71· 对图片（或图像）链接，即在网页中插入图片的同时，在标记前输入链接开始标 记，通过 href 设置链接地址，在图片标记结束符（>）后面，输入链接结束标记（）， 表示用法与文本链接一样，只是图片链接对象是图片。运行上面的代码，在浏览器解析效 果如图 6.4 所示。 图 6.4 图片链接 技巧：也可以在图片链接中用 title属性，在图片标签中用 alt，表示对该图片注解，不 管有没有链接都会出现。 6.3 锚点链接 锚点常常在很长的文章中用到，以便链接到页面中的具体位置。锚点由 name 属性来创 建一个命名的锚，使用命名锚后，单击带有命名锚的地址直接跳转到一个页面中的锚点位 置。这样打开网页直接指到某一段落，从而不用从上到下慢慢找。 命名锚的语法如下： 文章中的文字 定义好命名锚后，链接中要指定这个命名锚，在其名前加上”#”。 使用 name 属性，要 设置一对：一是设定 name 的名称；二是设定一个 href 指向这个 name。代码 6.5 演示了锚 的用法。 代码 6.5 源代码\第 6 章\锚点链接.htm ·72· 单击到锚点链接

锚点链接 定义好命名锚后被文字链接指向，当链接接入本网页中，在 URL（即网页地址）后面 的#字符串链接到本页中的字符串中，当然，字符串要存在才可以指定到字符串的位置。代 码的浏览效果如图 6.5 所示。 图 6.5 锚点链接 注意：锚点应用在文章内容比较多时，用锚点链接来指定位置，即指定到中间一段落， 在网页中时常用到。 6.4 邮箱地址链接 邮箱地址在网页上也常用到，网站工作人员为了与用户交流互动，会在网页做好邮箱 地址链接，只要单击链接会自动弹出 Outlook Express 的邮箱发送形式。这种方式在国内很 少用，往往会复制邮箱地址直接进邮箱里面发送。不管怎样，学好邮箱链接对网页放置邮 箱地址是很有用的。 邮箱链接表示给被链接的邮箱发邮件时，即单击该邮箱地址时，将出现与该地址发邮 件的对话框，其语法如下： 作者的邮箱 在链接标记内 href 属性中加入 mailto 然后冒号，后面接上邮箱地址就行。一个邮箱链 接就做好了。与其他链接的区别就是多了 mailto:，别忘记后面有冒号。代码 6.6 演示邮箱链 接。 ·73· 代码 6.6 源代码\第 6 章\邮箱地址链接.htm 作者的邮箱 代码 6.6 中，对文本“作者的邮箱”设置链接，与文本链接和图片链接不同的是，邮件 箱链接在标记对中链接地址用 href 后要加上 mailto，然后冐号，再接被链接的地址， 效果如图 6.6 所示。 图 6.6 邮箱链接 技巧：在邮箱链接的文字表达上可以多样化，如可以直接显示邮箱地址，或者可以用 联系我们等文本取代。 6.5 相对路径与绝对路径 路径在网页中常出现的除了用到超链接外，还会出现在用到背景音乐地址、CSS 文件 等。在引用文件时（如加入超链接，或者插入图片等），使用了错误的文件路径，就会导 致引用失效（无法浏览链接文件，或无法显示插入的图片等）。为了避免这些错误，正确 地引用文件，下面需要学习一下 HTML 路径。 HTML 有两种路径的写法：相对路径和绝对路径，下面分别对两者进行介绍，能通过 知识的讲解，使读者对相对路径和绝对路径有更深刻的了解。 6.5.1 相对路径 相对路径是指这个文件在所在的位置与其他文件或文件夹的关系。也可以说是相对位 置。如 HMTL 同一个目录的文件引用 html 超链接的代码应该这样写： ·74· c:\Inetpub 如果源文件和引用文件在同一个目录里，直接写引用文件名即可。现在建一个源文件 info.html，在 info.html 里要引用 index.html 文件作为超链接。表示源文件所在目录的上一级 目录，假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html，假设 index.html 路径 是：c:\Inetpub\wwwroot\sites\blabla\index.html，在 info.html 加入 index.html 超链接的代码应 该这样写： index.html 如何表示上级目录，用../表示源文件所在目录的上一级目录，用../../表示源文件所在目 录的上上级目录，以此类推。假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html， 假设 index.html 路径是：c:\Inetpub\wwwroot\sites\index.html，在 info.html 加入 index.html 超 链接的代码应该这样写： index.html 假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html，假设 index.html 路径是： c:\Inetpub\wwwroot\index.html，在 info.html 加入 index.html 超链接的代码应该这样写： index.html 假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html，假设 index.html 路径是： c:\Inetpub\wwwroot\sites\wowstory\index.html，html 路径是：c:\Inetpub\wwwroot\sites，在 info.html 加入 index.html 超链接的代码应该这样写： index.html 如何表示下级目录，引用下级目录的文件，直接写下级目录文件的路径即可。假设 info.html 路径是： c:\Inetpub\wwwroot\sites\blabla\info.html，假设 index.html 路径是： c:\Inetpub\wwwroot\sites\blabla\html\index.html，在 info.html 加入 index.html 超链接的代码应 该这样写： index.html 假设 info.html 路径是：c:\Inetpub\wwwroot\sites\blabla\info.html，假设 index.html 路径是： c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html，在 info.html 加入 index.html 超链接 的代码应该这样写： index.html 注意：注意区别路径中的上一级，同一级和下一级，以及它们的用法，这些方法在各 种编程语言中都会用到。 6.5.2 绝对路径 HTML 绝对路径（absolute path）指带域名的文件的完整路径。表示源文件所在目录的 上上级目录，以此类推。正确地引用文件，需要学习 HTML 路径。 假设用户注册了域名 www.blabla.cn，并申请了虚拟主机，虚拟主机提供商会给一个目 录，比如 www，这个 www 就是网站的根目录。 假设在 www 根目录下放了一个文件 index.html，这个文件的绝对路径就是： http://www.blabla.cn/index.html。 假设在 www 根目录下建了一个目录叫 html_tutorials，然后在该目录下放了一个文件 ·75· index.html，这个文件的绝对路径就是 http://www.blabla.cn/html_tutorials/index.html。 通过上面的讲解，对相对路径和绝对路径有清楚的认识，下一小节的实例将会演示两 者的用法。 注意：绝对路径就是地址的一个全部路径过程，如一个网站地址，也如本地电脑一个 文本路径。 6.6 链接实例手把手 现在用链接的实例来做一个文字、图片、邮箱等链接，通过实例来加深对链接的印象。 因为在网页中链接作用很大，但有的细节也不可忽视，现在实现在一张网页中做出各种链 效果，请看下面步骤。 6.6.1 在网页中做文字链接 在网页中做文字链接，并设置成新网页中弹出和链接注释。首先输入文字，然后对部 分文字链接。 代码 6.7 源代码\第 6 章\链接实例手把手.html

HTML+CSS 完全自学手册--网易

HTML+CSS 完全自学手册--新浪

代码中说明在文字里面做链接，设置新浏览器中打开网页并且对链接做注释，效果如 图 6.7 所示。 ·76· 图 6.7 文字链接 6.6.2 给图片做超链接 用一张图片插入到代码中做链接指向网易首页，并用 alt 说明图片的内容，如代码 6.8 所示。 代码 6.8 源代码\第 6 章\链接实例手把手.html

HTML+CSS 完全自学手册--网易

HTML+CSS 完全自学手册--新浪

下面的图片是一座桥，点图片可链接到网易首页。

将代码在上节代码的基础上，加一行文字和一张图片的链接，在图片链接中用 alt 说明 图片会链接到 www.163.com。浏览效果如图 6.8 所示。 ·77· 图 6.8 图片链接 注意：与文字链接一样，图片链接也有_blank、_self等对 target操作功能。如想去掉图 片的边框，在中表示边框为 0。 6.6.3 设置锚点链接 在网页最下面设置一个锚点链接。有时在一张网页中会出现很长的段落，用锚点链接 可以直接链接到网页中某一处，如代码 6.9 所示。 代码 6.9 源代码\第 6 章\设置锚点链接.html 单击到锚点处

HTML+CSS 完全自学手册--网易

HTML+CSS 完全自学手册--新浪

下面的图片是一座桥，点图片可链接到网易首页。

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

·78·

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

在这里设置一个锚点。在网页第一页做锚点链接。

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

HTML+CSS 完全自学手册

在上面代码中，锚点在简单段落的中间（为了突出锚点在中间，作者故意加了很多段 落），锚点链接在第一行，请看下面效果的变化。其中图 6.9 所示，表示锚点链接时，图 6.10 所示，表示锚点链接后的效果。 图 6.9 单 击锚点链接前 图 6.10 单击锚点链接后 技巧：在同一网页可以有很多个锚点和锚接链接，链接也可以设置在本网页以外，在 url地址后加“#”后再加锚点名称。 6.6.4 邮箱链接 邮箱链接很容易，在标签中多一个 mailto，在网页中任意位置，在代码中加在锚点 链接后面（其他代码省略）。 单击这给作者发邮件 ·79· 上面代码中，在文本“单击这给作者发邮件”做出链接，本链接与其他不同的是，该 文本的链接地址为邮件地址，用到的关键字为“mailto”，其后所接为邮件地址，当然也可 以用 title 表示标记，效果如图 6.11 所示。 图 6.11 邮箱链接 注意：现在好多邮件链接用#代替@，主要为了防止在网络中专门收集邮件的软件找到 该邮箱地址，以免用户收到垃圾邮件或广告邮件。 6.7 小结 本章主要介绍了链接的用法，从常用的文字链接，然后到图片链接。图片链接默认是 有边框的，在中用 border 属性等于 0 去除边框。锚点链接的常用之处在很长的文章中 指入已命名的锚点，用邮箱链接还可发送邮件给设置的邮箱地址。最后介绍了相对地址与 绝对地址，这些在文件目录中常用到（如 URL 地址、网页和文件做链接时指向的地址）。 同时链接还可以在新的浏览器窗口，或父窗口中打开。 << /ASCII85EncodePages false /AllowTransparency false /AutoPositionEPSFiles true /AutoRotatePages /All /Binding /Left /CalGrayProfile (Dot Gain 20%) /CalRGBProfile (sRGB IEC61966-2.1) /CalCMYKProfile (U.S. Web Coated \050SWOP\051 v2) /sRGBProfile (sRGB IEC61966-2.1) /CannotEmbedFontPolicy /Warning /CompatibilityLevel 1.4 /CompressObjects /Tags /CompressPages true /ConvertImagesToIndexed true /PassThroughJPEGImages true /CreateJDFFile false /CreateJobTicket false /DefaultRenderingIntent /Default /DetectBlends true /DetectCurves 0.0000 /ColorConversionStrategy /LeaveColorUnchanged /DoThumbnails false /EmbedAllFonts true /EmbedOpenType false /ParseICCProfilesInComments true /EmbedJobOptions true /DSCReportingLevel 0 /EmitDSCWarnings false /EndPage -1 /ImageMemory 1048576 /LockDistillerParams false /MaxSubsetPct 100 /Optimize true /OPM 1 /ParseDSCComments true /ParseDSCCommentsForDocInfo true /PreserveCopyPage true /PreserveDICMYKValues true /PreserveEPSInfo true /PreserveFlatness true /PreserveHalftoneInfo false /PreserveOPIComments false /PreserveOverprintSettings true /StartPage 1 /SubsetFonts true /TransferFunctionInfo /Apply /UCRandBGInfo /Preserve /UsePrologue false /ColorSettingsFile () /AlwaysEmbed [ true ] /NeverEmbed [ true ] /AntiAliasColorImages false /CropColorImages true /ColorImageMinResolution 300 /ColorImageMinResolutionPolicy /OK /DownsampleColorImages true /ColorImageDownsampleType /Bicubic /ColorImageResolution 300 /ColorImageDepth -1 /ColorImageMinDownsampleDepth 1 /ColorImageDownsampleThreshold 1.50000 /EncodeColorImages true /ColorImageFilter /DCTEncode /AutoFilterColorImages true /ColorImageAutoFilterStrategy /JPEG /ColorACSImageDict << /QFactor 0.15 /HSamples [1 1 1 1] /VSamples [1 1 1 1] >> /ColorImageDict << /QFactor 0.15 /HSamples [1 1 1 1] /VSamples [1 1 1 1] >> /JPEG2000ColorACSImageDict << /TileWidth 256 /TileHeight 256 /Quality 30 >> /JPEG2000ColorImageDict << /TileWidth 256 /TileHeight 256 /Quality 30 >> /AntiAliasGrayImages false /CropGrayImages true /GrayImageMinResolution 300 /GrayImageMinResolutionPolicy /OK /DownsampleGrayImages true /GrayImageDownsampleType /Bicubic /GrayImageResolution 300 /GrayImageDepth -1 /GrayImageMinDownsampleDepth 2 /GrayImageDownsampleThreshold 1.50000 /EncodeGrayImages true /GrayImageFilter /DCTEncode /AutoFilterGrayImages true /GrayImageAutoFilterStrategy /JPEG /GrayACSImageDict << /QFactor 0.15 /HSamples [1 1 1 1] /VSamples [1 1 1 1] >> /GrayImageDict << /QFactor 0.15 /HSamples [1 1 1 1] /VSamples [1 1 1 1] >> /JPEG2000GrayACSImageDict << /TileWidth 256 /TileHeight 256 /Quality 30 >> /JPEG2000GrayImageDict << /TileWidth 256 /TileHeight 256 /Quality 30 >> /AntiAliasMonoImages false /CropMonoImages true /MonoImageMinResolution 1200 /MonoImageMinResolutionPolicy /OK /DownsampleMonoImages true /MonoImageDownsampleType /Bicubic /MonoImageResolution 1200 /MonoImageDepth -1 /MonoImageDownsampleThreshold 1.50000 /EncodeMonoImages true /MonoImageFilter /CCITTFaxEncode /MonoImageDict << /K -1 >> /AllowPSXObjects false /CheckCompliance [ /None ] /PDFX1aCheck false /PDFX3Check false /PDFXCompliantPDFOnly false /PDFXNoTrimBoxError true /PDFXTrimBoxToMediaBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXSetBleedBoxToMediaBox true /PDFXBleedBoxToTrimBoxOffset [ 0.00000 0.00000 0.00000 0.00000 ] /PDFXOutputIntentProfile () /PDFXOutputConditionIdentifier () /PDFXOutputCondition () /PDFXRegistryName () /PDFXTrapped /False /Description << /CHS /CHT /DAN /DEU /ESP /FRA /ITA /JPN