看到后面再点这里!
需要背景
当我们写的一篇文章很长时,为了读者能有更好的阅读体验,我们希望我们的文章能有一个索引目录,只要一点击目录对应的标题,读者就可以跳到这个标题所对应的内容。如果是跳到一个新网址,那么很容易:只要点击csdn的markdown编辑下的“超链接”,按要求完成即可。但如果我们想用超链接完成页内跳转呢?这就得用html啦!
代码
我们把目录内容称为“锚点”,点击目录后跳转到的地方称为“锚点目标”。理解了这个以后,我们就可以愉快地跳转啦:
为了简化操作,我不会介绍所有锚点和锚点目标的操作方式,只会使用csdn里可行的、我用得习惯一种。
锚点:
<a href="#a">跳转到个人简介</a>
锚点目标:
<h1 id="a">这是个人简介</h1>
实战演练
锚点:
<a href="#abc">看到后面再点这里!</a>
锚点目标:
<h1 id="abc">注意事项</h1>
效果:
在开头点击“看到后面再点这里!”就会跳到下方的“注意事项”。
注意事项
1.锚点的目标内容中不能含有大写字母、空格和半角点
2.html5不支持用a标签的name来命名锚点目标,好像csdn就是html5的…(个人猜测)
3.在csdn下,目标内容不支持中文,我也不知道为什么,希望有知道的大佬在评论区告诉我!