锚点定义图片时为什么会显示整个页面的内容呢

锚点定义图片时为什么会显示整个页面的内容呢

# 想用pic锚点展示图片

<a name="pic" href="image/lena.png">打开一个图片</a>

<p><a href="#pic">num-pic</a></p>


first.html

<html>

<head>

<title> first.html</title>

</head>

<body>

<font size='3' face="黑体" color="red">

<a href="test5-welcome.html">这是第一个页面</a>

<a href="http://www.imooc.com">慕课网</a>

<!--超链接打开一个图片-->

<a href="image/lena.png">打开一个图片</a>

<a name="pic" href="image/lena.png"></a>

<!--用图片打开一个超链接-->

<a href="http://www.imooc.com" target="_parent">

<img src="image/lena.png">

</a>

</font>

</body>


</html>



welcome.html

<p><a href="first.html#pic">num-pic</a></p>

https://img1.sycdn.imooc.com//climg/62d77b240933182625601440.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕美 2022-07-20 13:21:31

同学,你好!同学可以在first.html文件中多加一些内容,页面在出现滚动条时可以看到更明显的效果

例:first.html:

<html>

<head>
    <title> first.html</title>
</head>

<body>
    <font size='3' face="黑体" color="red">
        <a href="test5-welcome.html">这是第一个页面</a>
        <a href="http://www.imooc.com">慕课网</a>
        <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
        <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
        <a href="image/lena.png">打开一个图片</a>
        <a name="pic" href="image/lena.png">打开一个图片pic</a>
        <!--用图片打开一个超链接-->
        <a href="http://www.imooc.com" target="_parent">
			<img src="image/bg1.jpg">
		</a>
    </font>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里,你可以找到最好的互联网技术牛人,也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p><a href="#pic">num-pic</a></p>
</body>

</html>

welcome.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p><a href="first.html#pic">num-pic</a></p>
</body>
</html>

祝学习愉快!

  • 我的意思是我定义的锚点在另一个页面,当我在这个页面调用的时候,会把定义锚点的那个页面都显示出来

    2022-07-20 13:42:25
  • 同学,你好!点击之后是会跳转到锚点所在的页面中,会显示页面中的内容。

    https://img1.sycdn.imooc.com//climg/62d799f009c05d8c05590132.jpg

    https://img1.sycdn.imooc.com//climg/62d79a04090739f310260571.jpg

    同学是定义了三个页面?可以将涉及到的代码截图(截上代码所在的文件)一下,是访问哪个页面出现的情况。
    祝学习愉快!

    2022-07-20 14:01:51
  • 我是用了两个页面

    第一个页面是这样的

    https://img1.sycdn.imooc.com//climg/62d7b191098de96a25601440.jpg

    效果是

    https://img1.sycdn.imooc.com//climg/62d7b1a609738a8925601440.jpg

    第二个页面是

    https://img1.sycdn.imooc.com//climg/62d7b1c9096b592925601440.jpg

    当我在第一个页面点击num-pic锚点时,会把第一个页面的所有内容都显示出来

    https://img1.sycdn.imooc.com//climg/62d7b213094ab03125601440.jpg

    2022-07-20 15:43:17
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师