HTML5+CSS3王者归来
上QQ阅读APP看书,第一时间看更新

4-4 同一个HTML文件中的超链接

有时可能所建立的网页内容分常丰富,一个HTML文件就需涵盖好多内容,此时可以考虑在这个HTML文件内建立几个书签,这样只要单击这些书签超链接,即可跳到书签地址。这时的<a>元素格式如下:

    <a href="#mybookmark"> … </a>

上述mybookmark是我们自行定义的书签名称,接着在同一个HTML文件内目标书签位置使用id属性设定mybookmark,这样才可定义完成超链接。id属性是一种全局属性,可以在许多元素内使用,为了凸显书签,通常可以将它使用在<hn>标题标记内。下列是将超链接设定为“Big Data”,书签名称是“Big Data Series”的程序片段。

    <a href="#Big Data">Big Data</a>
    …
    …
    <h3 id="Big Data">Big Data
Series</h3>

经上述设定后,当单击Big Data超链接,就可以跳到Big Data Series书签所在位置。

过去在HTML4.01版,<a>标记内可以使用name属性来设定书签名称,HTML5已经不支持了,改用id属性。

程序实例ch4_6.html:同一个文件中超链接的应用。

执行结果 程序执行时可以看到两个超链接,分别是Big Data和Data Analyst。

单击Big Data超链接可以跳到Big Data Series书签,让此书签数据跳到窗口最上方,如下图所示。

单击Return Top超链接可以跳到Top书签,窗口显示页面最顶端。

如果这时单击Data Analyst超链接,窗口内容将移至Data Analyst Series书签,如果这个书签内容或其后面的内容够多,则这个书签将在窗口画面最上端显示。否则只是将窗口卷动到最下方,如下图所示。

当然,若是单击Return Top超链接可以跳到Top书签,窗口显示页面最顶端。这个程序设计的几个重点如下:

(1)第9行设定Top书签区块,供Big Data Series书签区块和Data Analyst Series书签区块在单击Return Top时可以返回。

(2)第13行设定Big Data超链接,目的是可以跳至Big Data Series书签区块。

(3)第14行设定Data Analyst超链接,目的是可以跳至Data Analyst Series书签区块。

(4)第17行到23行是设定Big Data Series书签区块。

(5)第25行到31行是设定Data Analyst Series书签区块。