HTML超链接课件..
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML
超 链 接
1.超链接基本知识。 2.超链接的建立方法。
3.内部链接、书签链接、外部链接。
超链接基本知识
1. 超链接 超文本链接（hypertextlink）通常简称为 超链接（hyperlink），或者简称为链接（link ）。链接是HTML 的一个最强大和最有价值 的功能。链接是指文档中的文字或者图像与另 一个文档、文档的一部分或者一幅图像链接在 一起。
在编程中使用“..\”来表示上一级目录， “..\..\”表示上上级的目录，以此类推。再看 几个例子，注意所有例子中都是index.htm 文 件中链接有一张图片photo.jpg。看下面这个 例子： c:\website\web\index.htm c:\website\img\photo.jpg
超链接标记的基本语法 超级链接的语法根据其链接对象的不同而有所变 化，但都是基于<A>标记的。 语法：<A href="文件名">链接元素</A>或<A href="URL">链接元素</A>
说明：在该语法中，链接元素可以是文字， 也可以是图片或其他页面元素。其中href 是 hypertextreference 的缩写。通过超级链接的 方式可以使各个网页之间链接起来，使网站中众 多的页面构成一个有机整体，使访问者能够在各 个页面之间跳转。超级链接可以是一段文本、一 幅图像或其他网页元素，当在浏览器中用鼠标单 击这些对象时，浏览器可以根据指示载入一个新 的页面或者转到页面的其他位置。
对于相对路径来说，设置起来一般有如下 3 种写法： 1.同一目录下的文件：只需要输入链接文件的名称即 可，如01.html。 2.上一级目录中的文件，在目录名和文件名之前加入 “../”，如../04/02.html；如果是上两级，则需要加 入两个“../”，如../../file/01.html。 3.下一级目录：输入目录名和文件名，之间以“/”隔 开，如：Html/05/01.html。除了绝对路径和相对路 径之外，还有一种称为根目录。根目录常常在大规模 站点需要放置在几个服务器上，或者一个服务器上同 时放置多个站点时使用。其书写形式很简单，只需要 以“/”开始，表示根目录，之后是文件所在的目录名 和文件名。
在此例中，index.htm 中链接的photo.jpg 应 该怎样表示呢？错误写法：img\photo.jpg，这 种写法是不正确的。在此例中，对于index.htm 文件来说，img\photo.jpg所代表的绝对路径是 c:\website\web\img\photo.jpg，显然不符合要 求。 正确写法：使用..\img\photo.jpg 的相对路径 来定位文件。
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 文件。
2 绝对路径 绝对路径就是主页上的文件或目录在硬盘 上的真正路径。使用绝对路径定位链接目标文 件比较清晰，但是有两个缺点：一是需要输入 更多的内容，二是如果该文件被移动了，就需 要重新设置所有的相关链接。例如设置路径为 “C:\Program files\1.htm”
3 相对路径
首先分析一下为什么会发生图片不能正常显 示的情况.举一个例子，现在有一个页面 index.htm，在这个页面中链接有一张图片 photo.jpg，它们的绝对路径如下： c:\website\index.htm c:\website\img\photo.jpg
14
<html> <head> <title>文本链接</title> </head> <body> <center><h3>神话故事：女娲补天</h3></center> <a href="first.html">上一篇：八仙斗花龙</a><br><br> 有一天，大龙和精卫、小太极一起到远古 时代去玩，居然看到了传说中能顶住上天、撑开天与地的「不周山」， 也遇到了美丽的女娲娘娘，甚至看到女娲补天的过程……那真是一场惊 天地而泣鬼神的经历，讲来都令人鼻酸！<br> 天上的大神女娲，用泥土做成泥娃娃，再 赋予它们生命。从此女娲创造了人，人们世世代代繁衍生息，过着幸福 的生活。然而，好景不长。有一年，火神祝融和水神共工打起仗来。共 工把撑天的柱子不周山撞倒了，天塌下半边来，砸了很多窟窿，把地也 砸裂了，地上的洪水及天河的水不停地漏下来，造成大地上水患、火海 ，真是悲惨啊！<br> </body> </html>
ห้องสมุดไป่ตู้
如果使用绝对路径c:\website\img\photo.jpg ，那么在自己的计算机上将一切正常。因为确实 可以在指定的位置（即 c:\website\img\photo.jpg）上找到photo.jpg 文件。但是当将页面上传到网站时就很可能会出 错了，因为网站可能在服务器的c 盘，也可能在 d 盘，也可能在aa 目录下，更可能在bb 目录下 ，也就是说很有可能不存在 c:\website\img\photo.jpg 这样一个路径。此 时就用到相对路径。所谓相对路径，顾名思义就 是自己相对于目标位置。在上例的index.htm 中 链接的photo.jpg 可以使用img\photo.jpg 来定 位文件，那么不论将这些文件放到哪里，只要它 们的相对关系没有变，就不会出错。
超 链 接
1.超链接基本知识。 2.超链接的建立方法。
3.内部链接、书签链接、外部链接。
超链接基本知识
1. 超链接 超文本链接（hypertextlink）通常简称为 超链接（hyperlink），或者简称为链接（link ）。链接是HTML 的一个最强大和最有价值 的功能。链接是指文档中的文字或者图像与另 一个文档、文档的一部分或者一幅图像链接在 一起。
在编程中使用“..\”来表示上一级目录， “..\..\”表示上上级的目录，以此类推。再看 几个例子，注意所有例子中都是index.htm 文 件中链接有一张图片photo.jpg。看下面这个 例子： c:\website\web\index.htm c:\website\img\photo.jpg
超链接标记的基本语法 超级链接的语法根据其链接对象的不同而有所变 化，但都是基于<A>标记的。 语法：<A href="文件名">链接元素</A>或<A href="URL">链接元素</A>
说明：在该语法中，链接元素可以是文字， 也可以是图片或其他页面元素。其中href 是 hypertextreference 的缩写。通过超级链接的 方式可以使各个网页之间链接起来，使网站中众 多的页面构成一个有机整体，使访问者能够在各 个页面之间跳转。超级链接可以是一段文本、一 幅图像或其他网页元素，当在浏览器中用鼠标单 击这些对象时，浏览器可以根据指示载入一个新 的页面或者转到页面的其他位置。
对于相对路径来说，设置起来一般有如下 3 种写法： 1.同一目录下的文件：只需要输入链接文件的名称即 可，如01.html。 2.上一级目录中的文件，在目录名和文件名之前加入 “../”，如../04/02.html；如果是上两级，则需要加 入两个“../”，如../../file/01.html。 3.下一级目录：输入目录名和文件名，之间以“/”隔 开，如：Html/05/01.html。除了绝对路径和相对路 径之外，还有一种称为根目录。根目录常常在大规模 站点需要放置在几个服务器上，或者一个服务器上同 时放置多个站点时使用。其书写形式很简单，只需要 以“/”开始，表示根目录，之后是文件所在的目录名 和文件名。
在此例中，index.htm 中链接的photo.jpg 应 该怎样表示呢？错误写法：img\photo.jpg，这 种写法是不正确的。在此例中，对于index.htm 文件来说，img\photo.jpg所代表的绝对路径是 c:\website\web\img\photo.jpg，显然不符合要 求。 正确写法：使用..\img\photo.jpg 的相对路径 来定位文件。
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 文件。
2 绝对路径 绝对路径就是主页上的文件或目录在硬盘 上的真正路径。使用绝对路径定位链接目标文 件比较清晰，但是有两个缺点：一是需要输入 更多的内容，二是如果该文件被移动了，就需 要重新设置所有的相关链接。例如设置路径为 “C:\Program files\1.htm”
3 相对路径
首先分析一下为什么会发生图片不能正常显 示的情况.举一个例子，现在有一个页面 index.htm，在这个页面中链接有一张图片 photo.jpg，它们的绝对路径如下： c:\website\index.htm c:\website\img\photo.jpg
14
<html> <head> <title>文本链接</title> </head> <body> <center><h3>神话故事：女娲补天</h3></center> <a href="first.html">上一篇：八仙斗花龙</a><br><br> 有一天，大龙和精卫、小太极一起到远古 时代去玩，居然看到了传说中能顶住上天、撑开天与地的「不周山」， 也遇到了美丽的女娲娘娘，甚至看到女娲补天的过程……那真是一场惊 天地而泣鬼神的经历，讲来都令人鼻酸！<br> 天上的大神女娲，用泥土做成泥娃娃，再 赋予它们生命。从此女娲创造了人，人们世世代代繁衍生息，过着幸福 的生活。然而，好景不长。有一年，火神祝融和水神共工打起仗来。共 工把撑天的柱子不周山撞倒了，天塌下半边来，砸了很多窟窿，把地也 砸裂了，地上的洪水及天河的水不停地漏下来，造成大地上水患、火海 ，真是悲惨啊！<br> </body> </html>
ห้องสมุดไป่ตู้
如果使用绝对路径c:\website\img\photo.jpg ，那么在自己的计算机上将一切正常。因为确实 可以在指定的位置（即 c:\website\img\photo.jpg）上找到photo.jpg 文件。但是当将页面上传到网站时就很可能会出 错了，因为网站可能在服务器的c 盘，也可能在 d 盘，也可能在aa 目录下，更可能在bb 目录下 ，也就是说很有可能不存在 c:\website\img\photo.jpg 这样一个路径。此 时就用到相对路径。所谓相对路径，顾名思义就 是自己相对于目标位置。在上例的index.htm 中 链接的photo.jpg 可以使用img\photo.jpg 来定 位文件，那么不论将这些文件放到哪里，只要它 们的相对关系没有变，就不会出错。