HTML5从入门到精通 (第2版)
上QQ阅读APP看书,第一时间看更新

5.3 内部链接

所谓内部链接,指的是在同一个网站内部,不同的HTML页面之间的链接关系。在建立网站内部链接的时候,要考虑到使链接具有清晰的导航结构,使用户方便地找到所需要内容的HTML文件。

【例5.3】下面通过一个实例说明在一个网站中内部链接的实现方式。在本实例中共包含3个文件,分别为5-3.html、5-3-1.html和5-3-2.html。其中,5-3.html作为一个起始页面,另外两个文件放置在与5-3.html文件同级的film文件夹中。本实例通过3个文件的互相链接说明在网站内部进行链接的方法。(实例位置:光盘\TM\sl\5\3)

文件5-3.html的代码如下。

        <html>
        <head>
        <title>内部链接的实现</title>
        </head>
        <body>
            <center><h2>中国古城介绍</h2></center>
            <hr size="2" color="#FF0000" />
            <font size="+4">西安古城</font><br /><br />
            世界历史名城,华夏精神故乡,中国第一古都——西安。<br /><br />
            <a href="5-3-1.html">详细介绍</a><br />
            <hr size="2" color="#FF0000" />
            <font size="+4">大理古城</font><br /><br /><br />
            大理历史深远,素有“文献名邦”美名。大理古城位于风光绮丽的苍山之麓,始建于明洪武十五年,是中国
        二十四个历史文化名城之一。<br /><br />
            <a href="5-3-2.html">详细介绍</a>
        </body>
        </html>

在该文件中包含了两个链接,一个是“西安古城”详细介绍的链接,另一个是“大理古城”详细介绍的链接。这两个文件都位于文件夹film中,在连接时需要在链接地址中加入目录和文件名称。

“西安古城”的介绍文件5-3-1.html的代码如下。

        <html>
        <head>
        <title>内部链接的实现</title>
        </head>
        <body>
        <center><h3>西安古城</h3></center>
        &nbsp; &nbsp; &nbsp; &nbsp;西安,古称“长安”、“京兆”。是举世闻名的世界四大古都之一,是中国历史上建
        都时间最多、建都朝代最多、影响力最大的都城,是中华民族的摇篮、中华文明的发祥地、中华文化的代表,有
        着“天然历史博物馆”的美誉。<br />
        &nbsp; &nbsp; &nbsp; &nbsp;西安,在《史记》中被誉为“金城千里,天府之国”,是中华民族的发祥之地,由周
        文王营建,建成于公元前12世纪,先后有21个王朝和政权建都于此,是13朝古都,中国历史上的四个最鼎盛
        的朝代周、秦、汉、唐均建都西安。西安高陵杨官寨遗址发现,将中国城市历史推进到了6000年前的新石器时代
        晚期,同时确定了西安是世界历史上第一座城市。<br /><br />
        <a href="../5-3.html">返回</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <a href="5-3-2.html">下一个文化古城介绍</a>
        </body>
        </html>

初始页面5-3.html则位于该文件的上一级目录中,在链接时需要在文件名前添加“../”。而“大理古城”的介绍页与5-3-1.html位于同一目录中,是同级文件,在链接时只需要将链接地址设置为该文件名5-3-1.html即可。文件5-3-2.html的代码如下。

        <html>
        <head>
        <title>内部链接的实现</title>
        </head>
        <body>
        <center><h3>大理古城</h3></center>
        &nbsp; &nbsp; &nbsp; &nbsp;大理历史深远,素有“文献名邦”美名。大理古城位于风光绮丽的苍山之麓,始建于
        明洪武十五年,是中国二十四个历史文化名城之一。<br/>
        &nbsp; &nbsp; &nbsp; &nbsp;至今已有600多年的历史。它面临洱海,背靠苍山,至今仍保持着纵横交错、棋盘格
        局式的街道和雄伟壮观的南北城楼,城楼上“文献名邦”四个大字格外引人注目。最初东西南北各有城门,上有
        城楼,后毁。城内民居石墙青瓦、门窗雕龙画凤,显得古雅质朴。城西北的崇圣寺三塔和城西南的弘圣一塔,巷山
        脚下的无世祖平云南碑和一年一度的三月街,更使古城显得别有一番情趣。大理还是白族的主要聚居地。多彩的民
        俗风情,“三方一照壁”、“四合五天井”的建筑特色,都为人们探寻南诏古国打开了一叶窥秘之窗。<br /><br />
        <a href="../5-3.html">返回</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <a href="5-3-1.html">下一个文化古城介绍</a>
        </body>
        </html>

运行初始文件5-3.html,会看到页面中包含两个链接文字,如图5.5所示。

图5.5 初始窗口的链接效果

单击其中一个“详细介绍”的超链接可以打开下一级内容。在这里单击上面的“详细介绍”超链接,可以打开如图5.6所示的西安古城详细介绍的窗口。

图5.6 西安古城介绍窗口

在该窗口中包含了两个链接,单击文本“返回”可以返回到初始页面5-3.html中;单击文本“下一个文化古城介绍”可以直接打开另外一个古城介绍的窗口,如图5.7所示。

图5.7 大理古城的介绍窗口