【Html与CSS基础】HTML中的锚点
用锚点,回到顶部、回到底部、到文章中任意段落提示:可以自己动手尝试文章目录前言一、锚点是什么?二、使用步骤1.操作2.锚点示例总结前言提示:锚点通俗来说就是起到文章目录的作用,精准跳转到文章指定位置一、锚点是什么?在我们学习HTML的过程中,要理解写页面的作用,最初写页面的本质是为了文章服务的,一篇文章如果太长,我们想回到顶部、或者回到某一个段落就会费劲儿,所以锚点就是为了精准定位段落,起到目录的
·
前言
提示:锚点通俗来说就是起到文章目录的作用,精准跳转到文章指定位置
用锚点实现回到顶部、回到底部、到文章中任意段落
一、锚点是什么?
在我们学习HTML的过程中,要理解写页面的作用,最初写页面的本质是为了文章服务的,一篇文章如果太长,我们想回到顶部、或者回到某一个段落就会费劲儿,所以锚点就是为了精准定位段落,起到目录的效果。
二、使用步骤
1.操作
1. 写一篇文章
2. 跳转底部,就需要给底部最后一个元素添加唯一标识id,,再href里用#id跳转
3. 跳转到自然段,同上,给某个自然段添加唯一标识id,再href里用#id跳转
4. 跳转顶部,只使用#就可以了
2.锚点示例
代码如下(示例):
<h1>测试锚点</h1>
<a href="#bottom">去底部</a>
<a href="#p3">去第12个自然段</a>
<p>1.红豆生南国,春来发几枝。愿君多采撷,此物最相思。</p>
<p>2.红豆生南国,春来发几枝。愿君多采撷,此物最相思。</p>
<p id="p3">3.红豆生南国,春来发几枝。愿君多采撷,此物最相思。</p>
<p>4.红豆生南国,春来发几枝。愿君多采撷,此物最相思。</p>
<p>5.红豆生南国,春来发几枝。愿君多采撷,此物最相思。</p>
<p>6.红豆生南国,春来发几枝。愿君多采撷,此物最相思。</p>
<a id="bottom" href="#">去顶部</a>
总结
本文仅简单介绍了html中锚点的使用。
更多推荐
已为社区贡献1条内容
所有评论(0)