html如何实现页內目录和跳转
专栏:web开发笔记 Jan. 1, 2025, 4:57 p.m. 40 阅读
简单html即可实现页內目录和跳转

一些博客文章,特别是较长的文章,或者教程、技术支持类文档,在网页最前面加上一个小目录会方便很多。文章中每个章节处也可以再跳转回目录。下面介绍一下实现方法。

在页面顶部做一个目录,如下。主要涉及两个语法,一是定义锚定,二是做跳转链接。
1、锚点

<a name="#toc">目录</a>

2、链接

<a href="#title1">一、第一章标题</a>

完整代码如下:

<a name="#toc">目录</a>
<a href="#title1">一、第一章标题</a>
<a href="#title11">1.1、第一章第一节标题</a>
<a href="#title12">1.2、第一章第一节标题</a>
<a href="#title2">二、第二章标题</a>
<a href="#title21">2.1、第一章第一节标题</a>
<a href="#title22">2.2、第一章第一节标题</a>

文章内容的章节标题及返回目录的写法:

<h1 id="title1">一、第一章标题</h1>
<h2 id="title11">1.1、第一章第一节标题</h2>
此处为文章正文内容
<a href="#toc">返回目录</a>

<h1 id="title2">二、第二章标题</h1>
<h2 id="title21">2.1、第二章第一节标题</h2>
此处为文章正文内容
<a href="#toc">返回目录</a>

总结:可以发现这非常有规律,我们用markdown来写文章的基础上,可以用js或者php来自动生成。

感谢阅读,更多文章点击这里:【专栏:web开发笔记】
最新20篇 开设专栏