H5 <a>超链接,同一页面内部跳转和不同页面间的跳转

59 篇文章 0 订阅

同一页面或者文件间的跳转:

<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a href="#" name="ding">顶部</a><br/>
<a href="https://www.baidu.com/" title="点击" target="blank">百度一下</a><br/>
<a href="06test.html">test</a><br/>
<a href="#p9">去第九章</a><br/>
<a href="#p8">去第八章</a><br/>
<a href="#p7">去第七章</a><br/>
<a href="#p6">去第六章</a><br/>
<a href="#p5">去第五章</a><br/>
<a href="#p4">去第四章</a><br/>
<a href="#p3">去第三章</a><br/>
<a href="#p2">去第二章</a><br/>
<a href="#p1">去第一章</a><br/>
<a href="#di">去底部</a><br/>


<a href="#" name="p1">第一章</a>
<p>这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的光里,总该另有一番样子吧。月亮渐渐地升高了,墙外马路上孩子们的欢笑,已经听不见了;妻在屋里拍着闰儿,迷迷糊糊地哼着眠歌。我悄悄地披了大衫,带上门出去。</p>
<a href="#" name="p2">第二章</a>
<p>沿着荷塘,是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四面,长着许多树,蓊蓊郁郁的。路的一旁,是些杨柳,和一些不知道名字的树。没有月光的晚上,这路上阴森森的,有些怕人。今晚却很好,虽然月光也还是淡淡的。</p>
<a href="#" name="p3">第三章</a>
<p>路上只我一个人,背着手踱着。这一片天地好像是我的;我也像超出了平常的自己,到了另一个世界里。我爱热闹,也爱冷静;爱群居,也爱独处。像今晚上,一个人在这苍茫的月下,什么都可以想,什么都可以不想,便觉是个自由的人。白天里一定要做的事,一定要说的话,现 在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。</p>
<a href="#" name="p4">第四章</a>
<p>曲曲折折的荷塘上面,弥望的是田田的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。</p>
<a href="#" name="p5">第五章</a>
<p>微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动,像闪电般,霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着,这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水,遮住了,不能见一些颜色;而叶子却更见风致了。</p>
<a href="#" name="p6">第六章</a>
<p>光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月,天上却有一层淡淡的云,所以不能朗照;但我以为这恰是到了好处——酣眠固不可少,小睡也别有风味的。</p>
<a href="#" name="p7">第七章</a>
<p>月光是隔了树照过来的,高处丛生的灌木,落下参差的斑驳的黑影,峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影,却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律,如梵婀玲上奏着的名曲。</p>
<a href="#" name="p8">第八章</a>
<p>荷塘的四面,远远近近,高高低低都是树,而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁,漏着几段空隙,像是特为月光留下的。树色一例是阴阴的,乍看像一团烟雾;但杨柳的丰姿,便在烟雾里也辨得出。树梢上隐隐约约的是一带远山,只有些大意罢了。</p>
<a href="#" name="p9">第九章</a>
<p>树缝里也漏着一两点路灯光,没精打采的,是渴睡人的眼。这时候最热闹的,要数树上的蝉声与水里的蛙声;但热闹是它们的,我什么也没有。</p>
<a href="#" name="di">底部</a><br/>
<a href="#ding">返回顶部</a><br/>

</body>
</html>

不同文件件的条件,需要新建一个文件:06test.html

<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>

<p>哈哈</p>
<a href="超链接.html#p8">去第八章</a><br/>
<a href="超链接.html#p1">去第一章</a><br/>
<a href="超链接.html#di">去第底部</a><br/>
<a href="超链接.html#ding">去顶部</a><br/>
</body>
</html>

运行结果:

点击去第八章  就可以转跳到上个文件:超链接.html  的第八章的内容

点击不同的章数和顶部底部,就可以跳转到文章所在的章数和位置。

这样简单的内部和外部转跳就完成了哦。 

  • 15
    点赞
  • 76
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值