目录
一、创建锚点
二、引用锚点
三、实例讲解


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个链接时,会跳转到对应的锚点位置。

相关系列文章:
Markdown编辑器(一) - 实现页内跳转
Markdown编辑器(二) - 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
Markdown编辑器(三) - 图片缩放、指定尺寸、居中、左对齐、右对齐
Markdown编辑器(四) - 漂亮表格(表格背景色、跨行、跨列、多行)

Markdown (CSDN) MD编辑器(一)- 实现页内跳转相关推荐

  1. Markdown (CSDN) MD编辑器(三)- 图片缩放、指定尺寸、居中、左对齐、右对齐

    目录 一.csdn的MD编辑器插入图片的方式:  1.1 图片对齐方式  1.2 指定图片尺寸 二.内嵌HTML语法实现插入图片 三.实例讲解 Markdown是一种轻量级标记语言,排版语法简洁,让人 ...

  2. Markdown (CSDN) MD编辑器(四)- 漂亮表格(表格背景色、跨行、跨列、多行)

    目录 一.markdown表格 二.HTML表格  2.1 标签属性  2.2 跨列单元格(合并单元格)  2.3 跨行单元格(合并单元格)  2.4 单元格内换行  2.5 单元格背景色  2.6 ...

  3. Markdown (CSDN) MD编辑器(二)- 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)

    目录 1.Markdown现有的文本样式. 2.HTML的font标签-改字体.字体颜色.字体大小. 3.HTML的mark标签-标记文本 4.HTML的strong标签-加粗文本 5.HTML的em ...

  4. Markdown (CSDN) MD编辑器(四)- 漂亮表格(表格背景色、跨行、跨列)

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

  5. CSDN添加页内跳转和页外指定段落跳转

    标题一 通过下面的语法并不能实现页面跳转: [点此跳转](#标题二) 示例如下: 点此跳转 可以通过添加div的方式添加标记,经实验,发现div跳转的方式并不是Markdown的标准语法,应该是CSD ...

  6. Markdown文本目录生成、页内跳转

    (1)文本目录是生成? 在文档开头第一行单独输入[TOC],Markdown编辑器就会根据文档中的h1~h6标题自动生成目录.效果如下(输入[TOC]后编辑页面会显示为@[TOC]): 文章目录 标题 ...

  7. Markdown文本目录生成、页内跳转(附详细示例)

    文章目录 1 生成目录.页内跳转 1.1.生成目录 1.2.页内标题跳转 1.3.自定义锚实现页内自由跳转 1 生成目录.页内跳转 1.1.生成目录   在文档开头第一行单独输入[TOC],Markd ...

  8. Markdown 实现页内跳转

    Markdown 实现页内跳转 在使用 Markdown 做一些论文笔记或者说写文档时, 通常会出现这样一种情况.我们在文档的某个地方定义了一个 tableorfiguretable \ or \ f ...

  9. GitHub Flavored Markdown 中实现【页内跳转】

    GitHub Flavored Markdown 中实现[页内跳转] GitHub 并不直接支持 html 形式的跳转,但可以通过以下两种方法曲折实现: 1. 任意 # 标注的标题都会被添加上同名的跳 ...

最新文章

  1. Java多线程相关知识
  2. python培训比较好的机构-西安比较好的python培训机构推荐
  3. python视频教学视频哪个好-Python入门视频哪个好?
  4. 计算机网络第4版潘爱民_学术活动 钱江会计实务精英讲坛预告(第84期)| 何继昌 : 战略视角下之财务分析应用实践 兼选股案例分享...
  5. 卡方分布的期望和方差_T检验、F检验、卡方检验详细分析及应用场景总结
  6. 初识NIO之Java小Demo
  7. 操作系统(3) 多处理器编程:从入门到放弃
  8. excelexportentity中设置null不显示的方法_如何在 Creator3D 中切换模型贴图,超级简单!...
  9. 推荐5款纯净好用的良心浏览器,实现浏览自由
  10. Notepad++ 6.9 官方中文版
  11. PPT 配色-颜色代码
  12. CSS精灵优化Retina显示屏下的网站图像
  13. DAP-seq助力胡杨耐盐机制的研究Populus euphratica WRKY1 binds the promoter of H+-ATPase gene to enhance gene expr
  14. 【ChatGPT】从零开始构建基于ChatGPT的嵌入式(Embedding) 本地(Local) 智能客服问答机器人模型
  15. ARM USB蓝牙,Bluez 移植。
  16. 【前端html】html添加背景音乐
  17. www.050604.pw ub.php,BOL_050604_M_010
  18. 【学习记录】状语和状语从句
  19. 概率论与数理统计_陈希儒版_第一章:事件的概率
  20. 大聪明教你学Java | Spring Boot 整合 Redis 实现访问量统计

热门文章

  1. BBED修改数据文件的SCN
  2. 怎样用计算机给ipd传电影,怎样不使用iTunes将电影导入iPad?
  3. C++新特性:override
  4. 目标检测经典论文——Faster R-CNN论文翻译:Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Net
  5. 【FPGA教程案例12】基于vivado核的复数乘法器设计与实现
  6. 用vis数组保证只入队一次P5594 【XR-4】模拟赛
  7. 完全使用gnu/linux工作
  8. 讲师征集令 | Apache DolphinScheduler Meetup分享嘉宾,期待你的议题和声音!
  9. Android多用户相关命令,android 5.0 创建多用户 双开多开应用(1)(示例代码)
  10. 大数据千亿级离线数仓项目第一天 环境部署和etl