老师帮忙检查一下作业谢谢您

来源:2-15 编程练习

寿限无的丸子

2022-02-13 00:11:58

<html>
<head>
<meta charset="UTF-8">
<title>超级链接</title>
</head>
<body>
<div>
    
<a name="top">这里是顶部</a><br />

<a href="#水果">水果</a><br />

<a href="#蔬菜">蔬菜</a><br />

<a href="#运动">运动</a><br />
</div>


<!--设置水果标题-->
<div>
    
<h2 id="水果">水果</h2>
<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>葡萄</li>
    <li>梨</li>
    <li>西瓜</li>
    <li>樱桃</li>
    <li>菠萝</li>
    <li>橙子</li>
    <li>柚子</li>
    <li>芒果</li>
</ul>
<!--设置返回顶部链接-->
<a href="#top">返回顶部</a>

<!--设置蔬菜标题-->
<h2 id="蔬菜">蔬菜</h2>
<ul>
    <li>西红柿</li>
    <li>黄瓜</li>
    <li>土豆</li>
    <li>芹菜</li>
    <li>蒜台</li>
    <li>西葫芦</li>
    <li>香菇</li>
    <li>菠菜</li>
    <li>豆角</li>
    <li>油菜</li>
</ul>
	
<!--设置返回顶部链接-->
<a href="#top">返回顶部</a>

<!--设置运动标题-->
<h2 id="运动">运动</h2>
<ul>
    <li>足球</li>
    <li>篮球</li>
    <li>橄榄球</li>
    <li>高尔夫</li>
    <li>跑步</li>
    <li>跳绳</li>
    <li>马术</li>
    <li>冰球</li>
    <li>短道速滑</li>
    <li>花样滑冰</li>
    <li>射击</li>
    <li>冰壶</li>
</ul>
<a href="#top">返回顶部</a>
</div>

<!--设置返回顶部链接-->

</body>
</html>

还有个问题是

<a name="top">这里是顶部</a>

这行代码的意义是什么呢?我去掉这个标签也可以返回顶部,这个name属性又是什么呢?

写回答

1回答

好帮手慕慕子

2022-02-13

同学你好,代码实现是正确的,针对同学的问题解答如下:

1、这行代码的意义是设置锚点跳转的位置

2、因为浏览器默认有一个top属性,所以即使不设置,也可以跳转到顶部,可以将其作为特殊情况特殊记忆。

可以将锚点换成其他的,就没有这个效果了。示例:

https://img.mukewang.com/climg/62086b9e09029e2a07010739.jpg

没有设置#test锚点对应要跳转的位置,此时点击这里的“返回顶部”不会有任何效果。

只有添加了#test锚点对应要跳转的位置,才可以实现正常跳转,示例:

https://img.mukewang.com/climg/62086bde09bb37b705440238.jpg

3、name属性就是设置锚点跳转的对应位置,要与a标签中的href属性值#后面的内容保持一致。

祝学习愉快~

0

0 学习 · 17877 问题

查看课程