4.2 初步认识超链接的标记
路径的相关知识是超链接里最基本的元素,如果没有路径,是不能创建超链接的。路径有了,下面就开始创建超链接。
4.2.1 超链接的基本标记
根据不同的对象,超链接的参数也有所不同,但都少不了<a>标记。其具体语法格式如下:
<a href="文件名">链接元素</a>
或
<a href="URL">链接元素</a>
通过href(hypertext reference)来链接各个元素。在该语法中,链接元素可以是文字,也可以是图片或其他页面元素。通过超级链接的方法可以使各个网页连接起来,使网站中众多的页面构成一个有机整体,使访问者能够在各个页面之间跳转。超链接可以是一段文本、一幅图像或其他网页元素,当在浏览器中用鼠标单击这些对象时,浏览器可以根据指示载入一个新的页面或者转到页面的其他位置。下面具体讲解各种超链接的创建方法。
4.2.2 创建文本超链接
4-1 创建超链接
创建文本超级链接可以通过网页中的文字与其他页面上的文件进行链接。其具体语法格式如下:
<a href="链接地址">链接文字</a>
注意:在该语法中,链接地址可以是绝对地址,也可以是相对地址。
例题4-1:下面有两则故事,用超链接把这两个故事连接起来。具体文件4-1-1.html的实例代码如下。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本链接</title> </head> <body> <center><h1>程门立雪</h1></center> <a href="4-1-2.html">卧冰求鲤</a><br /><br />  ;杨时,字中立,是剑南将乐人。小的时候非常聪颖,善于写 文章。年纪稍大一点后,专心研究经史书籍。宋熙宁九年进士及第,当时,河南人程颢和弟 弟程颐在熙宁、元丰年间讲授孔子和孟子的学术精要(即理学),河南洛阳这些地方的学者都 去拜他们为师,杨时被调去做官他都没有去,在颍昌以拜师礼节拜程颢为师,师生相处得很 好。杨时回家的时候,程颢目送他说:“我的学说将向南方传播了。”又过了四年,程颢去世 了,杨时听说以后,在卧室设了程颢的灵位哭祭,又用书信讣告同学。程颢死了以后,杨时又 到洛阳拜见程颐,这时杨时大概四十岁了。一天杨时拜见程颐,程颐正在打瞌睡,杨时与同学游 酢(音zuò)恭敬地站在一旁没有离开,等到程颐睡醒来时,门外的雪已经一尺多深了。杨时 的德行和威望一日比一日高,四方人士不远千里与之相交游,其号为龟山先生。 </body> </html>
在这段代码中,有一个文本链接“卧冰求鲤”,它链接到了当前目录下的4-1-2.html文件。文件4-1-2.html的实例代码如下。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>文本链接</title> </head> <body> <center><h1>卧冰求鲤</h1></center> <a href="4-1-1.html">程门立雪</a><br/><br/>  ;王祥,晋朝琅琊(今山东临沂)人,性至孝。其母早亡,继 母朱氏,生子王览。朱氏偏爱亲生儿子,常令王祥干重活、吃糙饭。但王祥对父母孝敬,从 不懈怠。父母生病,王祥衣不解带,日夜照顾,汤药必先尝后进。继母要吃鲜鱼,天寒冰冻, 无处购买。王祥冒着凛冽寒风,在河上脱衣卧冰,冰被暖化了,冰下竟跃出两条鲤鱼,他高 兴地拿回家孝敬继母。这件事,深深地感动了继母。继母死后,王祥悲痛,依礼安葬。王祥 对其弟王览,十分爱护,王览对兄长特别尊敬,兄友弟恭,远近闻名,时人把他们的居处称 作“孝悌里”。临沂“孝悌里”至今犹存。 </body> </html>
运行4-1-1.html,可以看到文件中包含一个文本链接“卧冰求鲤”,其效果如图4-1所示。
图4-1 文本链接的页面效果
单击页面中的文本“卧冰求鲤”,可以将页面转到4-1-2.html文件,如图4-2所示。
图4-2 打开的链接的页面
4.2.3 超链接的目标页面
4.2.2节中文本超链接的页面覆盖了原来的页面,如果不想覆盖原来的页面,怎么办?这时可以通过该参数设置打开一个新页面。在HTML语言中,可以通过target参数设置链接打开目标页面属性。其具体语法格式如下:
<a href="链接地址" target=目标窗口的打开方式>链接元素</a>
在该语法中,target参数的取值有三种,见表4-1。
表4-1 目标窗口的设置
注意:在表中提到的框架是一种页面结构,在后面的第9章中还会详细讲解。
4.2.4 内部链接
内部链接是指链接的对象是同一个网站中的资源。在各种超链接中,根据链接对象的不同,设置的方式也有所区别。下面通过一个实例说明在一个网站中内部链接的实现方法。
在本实例中共包含三个文件,分别是4-2-1.html、4-2-2.html和4-2-3.html。其中4-2-1.html作为一个起始页面,而另外两个文件放置在与4-2-1.html文件同级的文件夹中。本实例通过三个文件的互相链接说明在网站内部进行链接的方法。
例题4-2:文件4-3-1.html的具体代码如下:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>设置超链接的目标页面</title> </head> <body> <center><h1>HTML CSS网页制作</h1></center> <h4>HTML和CSS是网页制作的标准语言,也是本书学习的重点,要想学好这两门技术, 首先需要对它们有一个整体的认识。 <a href="4-2-2.html" target="_blank">详细介绍HTML</a> <a href="4-2-3.html" target="_blank">详细介绍CSS</a> </body> </html>
设置这段代码的文件名为4-2-1.html,在这段代码中,包含两个超链接:“详细介绍HTML”和“详细介绍CSS”,单击“详细介绍HTML”文字可以打开4-2-2.html文件,单击“详细介绍CSS”文字可以打开4-2-3.html文件。这两个文件都位于文件夹中,在连接的时候需要在链接地址中加入目录和文件名称。
4-2-2.html文件的具体代码如下:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>设置超链接的目标窗口</title> </head> <body> <center><h1>HTML简介</h1></center> <h4> HTML主要是通过HTML标记对网页中的文本、图片、 声音等内容进行描述。HTML提供了许多标记,如段落标记、标题标记、超链接标记、图片 标记等,网页中需要定义什么内容,就可用相应的HTML标记描述。</h4> <a href="4-2-1.html" target="_blank">返回主页</a> </body> </html>
初始页面4-2-1.html与4-2-2.html、4-2-3.html位于同一目录下,是同级文件,在链接的时候只需要将链接地址设置为该文件名即可。
在4-2-1.html页面下单击“详细介绍CSS”文字,可以打开4-2-3.html页面。4-2-3.html文件源代码如下:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>设置超链接的目标窗口</title> </head> <body> <center><h1>HTML简介</h1></center> <h4> HTML主要是通过HTML标记对网页中的文本、图片、 声音等内容进行描述。HTML提供了许多标记,如段落标记、标题标记、超链接标记、图片 标记等,网页中需要定义什么内容,就可用相应的HTML标记描述。</h4> <a href="4-2-1.html" target="_blank">返回主页</a> </body> </html>
运行文件4-2-1.html,会看到页面中包含两个链接文字,如图4-3所示。
图4-3 初始窗口的链接效果
单击“详细介绍HTML”,可以打开下一级内容,如图4-4所示。
图4-4 下一级链接页面
在该窗口中,单击文本“返回主页”可以返回到初始页面4-2-1.html中,如图4-3所示。