6.2 内部链接与外部链接_HTML5程序开发范例宝典-QQ阅读男生都市网

书名：HTML5程序开发范例宝典
作者名：韩旭高飞孙桂杰编著
本章字数：10字
更新时间：2024-12-21 22:00:50

6.2 内部链接与外部链接

实例150 说明在一个网站中内部链接的实现方式

本实例可以提高网站安全性

实例位置：光盘\mingrisoft\06\150

实例说明

所谓内部链接，指的是在同一个网站内部，不同的HTML页面之间的链接关系。在建立网站内部链接的时候，要考虑到使链接具有清晰的导航结构，使用户方便地找到所需要的文件。本实例将介绍在网站中内部链接的实现方式。运行本实例，如图 6.5 所示。单击第一个“详细介绍”，可以打开图6.6所示的西安古城详细介绍的窗口。在该窗口中包含了两个链接，单击“返回”链接可以返回到图 6.5 所示的页面；单击“下一个文化古城介绍”链接可以直接打开另外一个古城介绍的窗口，如图6.7所示。

图6.5 初始窗口的链接效果

图6.6 西安古城介绍窗口

图6.7 大理古城的介绍窗口

技术要点

在本实例中共包含3个文件，分别为index.html、city1.html和city2.html。其中，index.html作为一个起始页面，另外两个文件放置在与index.html文件同级的city文件夹中。本实例通过3个文件的互相链接说明在网站内部进行链接的方法。

实现过程

（1）创建index.html文件，在该文件中包含了两个链接，一个是“西安古城”的详细介绍的链接，另一个是“大理古城”的详细介绍的链接。这两个链接文件都位于文件夹city中，在链接时需要在链接地址中加入目录和文件名称。代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>内部链接的实现</title>

</head>

<body>

<center><h2>中国古城介绍</h2></center>

世界历史名城，华夏精神故乡，中国第一古都—西安。<br/><br/>

<ahref="city/city1.html">详细介绍</a><br/>

大理历史深远，素有“文献名邦”美名。大理古城位于风光绮丽的苍山之麓，始建于明洪武十五年，是中国二十四个历史文化名城之一。<br/><br/>

</body>

</html>

（2）创建city文件夹，在该文件夹下创建city1.html文件。由于初始页面index.html位于该文件的上一级目录中，因此在定义“返回”链接时需要在文件名前添加“../”。而“大理古城”的详细介绍页与该文件位于同一目录中，是同级文件，因此在定义“下一个文化古城介绍”链接时只需要将链接地址设置为文件名city2.html即可。代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>内部链接的实现</title>

</head>

<body>

    西安，古称“长安”、“京兆”。是举世闻名的世界四大古都之一，是中国历史上建都时间最多、建都朝代最多、影响力最大的都城，是中华民族的摇篮、中华文明的发祥地、中华文化的代表，有着“天然历史博物馆”的美誉。<br/>

    西安，在《史记》中被誉为“金城千里，天府之国”，是中华民族的发祥之地，由周文王营建，建成于公元前12世纪，先后有21个王朝和政权建都于此，是13朝古都，中国历史上的四个最鼎盛的朝代周、秦、汉、唐均建都西安。西安高陵杨官寨遗址发现，将中国城市历史推进到了6000年前的新石器时代晚期，同时确定了西安是世界历史上第一座城市。<br/><br/>

<ahref="../index.html">返回</a>      

<ahref="city2.html">下一个文化古城介绍</a>

</body>

</html>

（3）在city文件夹下创建city2.html文件。代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>内部链接的实现</title>

</head>

<body>

    大理历史深远，素有“文献名邦”美名。大理古城位于风光绮丽的苍山之麓，始建于明洪武十五年，是中国二十四个历史文化名城之一。<br/>

    至今已有600多年的历史。它面临洱海，背靠苍山，至今仍保持着纵横交错、棋盘格局式的街道和雄伟壮观的南北城楼，城楼上“文献名邦”四个大字格外引人注目。最初东西南北各有城门，上有城楼，后毁。城内民居石墙青瓦、门窗雕龙画凤，显得古雅质朴。城西北的崇圣寺三塔和城西南的弘圣一塔，巷山脚下的无世祖平云南碑和一年一度的三月街，更使古城显得别有一番情趣。　大理还是白族的主要聚居地。多彩的民俗风情，“三方一照壁”、“四合五天井”的建筑特色，都为人们探寻南诏古国打开了一叶窥秘之窗。<br/><br/>

<ahref="../index.html">返回</a>      

<ahref="city1.html">下一个文化古城介绍</a>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在新闻详细内容页面中使用内部链接。

在博客中使用内部链接。

实例151 通过HTTP 协议进行外部链接

本实例可以提高网站安全性

实例位置：光盘\mingrisoft\06\151

实例说明

所谓外部链接，指的是跳转到当前网站外部，与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。本实例将介绍如何通过HTTP 协议进行外部链接。运行本实例，如图6.8所示。单击图中的“点击进入明日图书网”的链接后，将打开明日图书网的首页面，如图6.9所示。

图6.8 设置外部链接的页面

图6.9 明日图书网首页

技术要点

本实例主要通过HTTP协议进行外部链接。其语法如下：

<ahref=”http://....”>链接文字</a>

在该语法中，http://表明这是关于HTTP协议的外部链接，而在其后输入网站的网址即可。

实现过程

创建 index.html文件，在文件中首先完成对明日图书网的简介，然后定义一个外部链接，链接地址为明日图书网的网址http://www.mingribook.com，其实现代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>链接到外部网站</title>

</head>

<body>

<h3>明日图书网简介</h3>

  明日图书网中包含各编程语言系列图书，我们为不同的编程人员准备了不同的图书，图书包括自学手册、完全手册、全程实录、范例宝典、案例精选、从入门到精通、技术大全、经验技巧宝典系列等，而且我们为读者提供免费的技术支持.......<br/>

<ahref="http://www.mingribook.com">点击进入明日图书网</a>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在网站友情链接中定义外部链接。

在技术文章中定义外部链接。