- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 680字
- 2024-12-21 22:00:49
6.1 超链接的建立
实例148 创建文本超链接
本实例可以提高网站安全性
实例位置：光盘\mingrisoft\06\148
实例说明
超链接是网页页面中最重要的元素之一。一个网站是由多个页面组成的，页面之间依据链接确定相互的导航关系。链接能使浏览者从一个页面跳转到另一个页面，实现文档互联、网站互联。本实例将介绍文本超链接的创建。运行本实例，如图 6.1 所示。当单击文本链接“下一篇：荆州古城”后，页面将跳转到“荆州古城”的介绍页面，如图 6.2 所示。当单击页面中的“上一篇：西安古城”链接后，页面又跳转回到“西安古城”的介绍页面。
图6.1 文本链接
图6.2 打开的链接页面
技术要点
本实例主要介绍文本超链接。在网页中，文本超链接是最常见的一种。它通过网页中的文字和其他的文件进行链接。语法如下：
<ahref=”链接地址”>链接文字</a>
在该语法中，链接地址可以是绝对地址，也可以是相对地址。
实现过程
（1）创建index.html文件，在文件中完成对“西安古城”的介绍，并创建文本超链接“下一篇：荆州古城”，链接地址指向index2.html文件，代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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><h3>中国古城介绍：西安古城</h3></center>
<ahref="index2.html">下一篇：荆州古城</a><br/><br/>
西安，古称“长安”、“京兆”。是举世闻名的世界四大古都之一，是中国历史上建都时间最长、建都朝代最多、影响力最大的都城，是中华民族的摇篮、中华文明的发祥地、中华文化的代表，有着“天然历史博物馆”的美誉。<br/>
西安，在《史记》中被誉为“金城千里，天府之国”，是中华民族的发祥之地，由周文王营建，建成于公元前12世纪，先后有21个王朝和政权建都于此，是13朝古都，中国历史上的四个最鼎盛的朝代周、秦、汉、唐均建都西安。西安高陵杨官寨遗址发现，将中国城市历史追溯到了6000年前的新石器时代晚期，同时确定了西安是世界历史上第一座城市。
</body>
</html>
（2）创建index2.html文件，在文件中完成对“荆州古城”的介绍，并创建文本超链接“上一篇：西安古城”，链接地址指向index.html文件，代码如下：
<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//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><h3>中国古城介绍：荆州古城</h3></center>
<ahref="index.html">上一篇：西安古城</a><br/><br/>
荆州古城，又称江陵城，是我国历史文化名城、全国重点文物保护单位之一，是楚文化的发祥地之一，是著名的三国古战场，历史上“刘备借荆州”、“关羽大意失荆州”等脍炙人口的
三国故事都发生在这里。荆州古城地处连东西贯南北的交通要塞，历来均为兵家必争之地，荆州城屡毁屡建，现在的荆州古城最后一次修建是在清朝顺治三年（1646年），依原址而建，保存至今，是“我国南方不可多得的完壁”。<br/>
荆州古城总面积4.6平方公里，分为三层，最外层为水城、中间是砖城，里面是土城，水城（护城河）全长10500米，宽30米，水深4米，西通太湖，东连长湖，与古运河相连；城墙四周原有东门（迎宾门）、小东门（公安门、水门）、北门（拱极门）、小北门（远安门）、西门（安澜门）、南门（南纪门）6座城门，除小东门外，其他五座城门都由两道门组成，有瓮城，新中国成立后，又新开3座城门，分别是新东门、新南门、新北门，均无瓮城，原来6座城门上都有城门楼，分别是宾阳楼、望江楼、九阳楼、曲江楼、朝宗楼、景龙楼等，其中以曲江楼和景龙楼最为出名。<br/> 荆州古城不仅三国遗迹遍布，而且文化底蕴丰厚，历史、神话传说众多，尤其是《三国演义》故事的广泛流传，使得荆州古城名扬四海，享誉海内外，是三国旅游线上的著名景点。
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
在新闻页面创建文本超链接。
在博客页面创建文本超链接。
实例149 使用target属性来设置超链接的目标窗口
这是一个验证网址格式的实例
实例位置：光盘\mingrisoft\06\149
实例说明
在创建网页的过程中，有时候并不希望超链接的目标窗口将原来的窗口覆盖，比如在打开新的窗口时，主页面的窗口仍保留在原处。这时可以通过target属性设置目标窗口的打开方式。本实例就来介绍如何使用target属性来设置超链接的目标窗口。运行本实例，如图 6.3 所示。单击窗口中的“内容简介”链接，可以在一个新的窗口打开“内容简介”页面，如图6.4所示。
图6.3 设置目标窗口的打开方式
图6.4 在新窗口中打开文件
技术要点
本实例主要用到了超链接标记<a>的target属性，语法如下：
<ahref="链接地址"target=目标窗口的打开方式>链接元素</a>
在该语法中，target参数的取值有4种，如表6.1所示。
表6.1 target参数的取值及说明
在表6.1中提到的框架是一种页面结构。
实现过程
（1）创建index.html文件，在文件中包含一个文本超链接“内容简介”，并设置该超链接的target属性值为_blank，代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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><h2>鲁迅作品介绍</h2></center>
<hr size="4"color="#FF0000"/>
<font size="+4">《呐喊》</font><br/><br/>
作者：鲁迅著<br/>
钱理群王得后选编<br/>
出版社：浙江文艺出版社<br/>
出版日期;2007年10月<br/>
ISBN：978－7－5339－0441－8<br/>
字数：316千字<br/>
定价：19.50元<br/>
<ahref="index2.html" target="_blank">内容简介</a>
</body>
</html>
（2）创建index2.html文件，在文件中完成作品的内容简介，代码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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><h2>内容简介</h2></center>
<font size="+4">《呐喊》</font><br/><br/>
本集出版收小说十五篇，作于1918年至1922 年间，1923年8月由北京新潮出版社，列为该社“文艺丛书”之一。1926年10月第三次印刷时起，改由北京北新书局出版，列入作者所编的“乌合之众”。1930年1月第十三次印刷时，作者抽去其中的《不周山》一篇（后改名为《补天》，收入《故事新编》）此后印行的版本均从1930年版。
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
在打开新闻详细页面的超链接中使用target属性。
在框架页面中设置target属性值为_parent。