IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> Markdown 实现页内跳转 -> 正文阅读

[开发工具]Markdown 实现页内跳转

Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写,Markdown被大量使用,如Github、Wikipedia、简书等。

在CSDN写博客时也可以选择 Markdown编辑器,但 Markdown 的基础语法中并没有页内跳转的相关知识点,而写博客时偶尔需要利用页内跳转使读者可以快速跳转到文章的某处,例如“回到顶部”、“目录”等。因为Markdown可以与HTML混编,所以可以使用 HTML 的语法来实现页内跳转。总共就两个步骤:①在要跳达的地方创建锚点;②在文章中引用锚点。

一、创建锚点

锚点:是在文章中的某个位置做标记。如果将一篇文章比作一条有多户人家的巷子创建锚点就好比是给其中一户人家安装门牌号

在HTML中,可以用id来定义位置,所以创建锚点就是创建一个id,语法如下:

<a id="article_top"></a>

这里是创建了一个id="article_top"的标签。

二、引用锚点

创建完锚点后,就相当于在文章的某个位置做了个标记,有了这个标记就可以使用 markdown 的语法(创建链接)引用这个位置,从而实现页内跳转。引用锚点本质上就是创建一个指向锚点的链接。语法如下:

[链接名称](#锚点id)

链接名称:是自己想定义的任何名称或描述,一般根据文章上下文确定。
锚点id:就是已经定义的锚点id。

注意
锚点id前面还有一个#号。
锚点可以定义在文章的任意一行,引用锚点的链接也可以定义在文章任意位置。

三、实例讲解

下面给出了一份 Markdown 格式的文章,可以直接复制到Markdown编辑器去看看显示效果。
同时在3.2 显示效果也给出了 3.1 的文章对应的显示效果。

3.1 Markdown 格式文章

<a id="article_top"></a>文章顶部

标题:Markdown 怎么实现页内跳转的

内容:

一、创建锚点

二、引用锚点 

<a id="example"></a>三、实例讲解

总结:

一、xxx

二、xxx

三、xxx
	
[回到顶部](#article_top)

如果不太懂,可以直接看[实例讲解](#example),把 Markdown 格式文章结合显示效果研究一下。

3.2 显示效果

文章顶部

标题:Markdown 怎么实现页内跳转的

内容:

一、创建锚点

二、引用锚点

三、实例讲解

总结:

一、xxx

二、xxx

三、xxx

回到顶部

如果不太懂,可以直接看实例讲解,把 Markdown 格式文章结合显示效果研究一下。

3.3 讲解

3.1 Markdown 格式文章中定义了2个锚点:锚点1(id="article_top")定义在文章顶部的前面;锚点2(id="example")定义在实例讲解的前面。同时文章也设置了两个引用锚点的链接:第一个链接是倒数第二行的[回到顶部](#article_top),引用了文章顶部的锚点;第二个链接是倒数最后一行的[实例讲解](#example),引用了实例讲解的锚点。在阅读文章时点击这2个链接时,会跳转到对应的锚点位置。

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-04-18 18:03:22  更:2022-04-18 18:05:52 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/30 2:57:16-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码