【HTML】使用框架导航跳转到指定的节

最新推荐文章于 2022-12-14 22:35:14 发布

原创最新推荐文章于 2022-12-14 22:35:14 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在HTML中使用框架布局，并通过带有锚点的链接实现页面内的精确跳转，展示了从main文件到content及link文件的具体实现过程。

1、main文件，两个页面

<html>

<frameset cols="20%,80%">
    <frame src="HTML框架-使用框架导航跳转指定的节-content.html"></frame><br />
    <frame src="HTML框架-使用框架导航跳转指定的节-link.html" name="showframe"></frame>
</frameset>

</html>

2、content文件，包含两个跳转链接

<html>
<body>
    <a href="HTML框架-使用框架导航跳转指定的节-link.html" target="showframe">没有锚的链接</a><br />
    <a href="HTML框架-使用框架导航跳转指定的节-link.html#C10" target="showframe">带有锚的链接</a>
</body>
</html>

3、link文件，包含页面内容

<html>
<body>
<h2>第一章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第二章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第三章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第四章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第五章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第六章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第七章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第八章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第九章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2><a name="C10">第十章</a></h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第十一章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第十二章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第十三章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第十四章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第十五章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>

<h2>第十六章</h2>
<p>这是一个段落！！！！！！！！！！！！！！！！！！！！！！</p>
</body>
</html>