CSDN-markdown语法之如何插入图片
目录
- 图片上传方式
- 插入在线图片
- 插入本地图片
- 图片链接方式
- 行内式图片链接
- 参考式图片链接
- 几个问题探讨
- 问题1:图片上传和图片链接两种方式的区别
- 问题2:Markdown中如何指定图片的高和宽?
- 问题3:Markdown中如何指定图片的对齐方式?
正文
在CSDN Markdown编辑器中插入图片有两种方式:
使用工具栏上的图片上传功能
自己动手写图片链接的方式
下面分别介绍它们的使用方法。
图片上传方式
这种方式最简单,属图形化方式。大家可以很容易的在CSDN Markdown编辑器的工具栏那里找到图片上传的图标:
或者直接使用快捷键Ctrl + G
,会弹出一个图片上传的对话框,可以看出既可以插入网上的在线图片也可以上传本地图片插入。
插入在线图片
上面已经给出图片的书写格式:
在线图片地址 + 若干个空格 + 可选的用双引号括起来的图片提示
插入本地图片
对话框中切换到“上传图片”的标签后如下:
使用方式更简单:
选择本地图片 — 上传 — 下面方框里显示图片预览 — 最后确认插入
图片链接方式
如果插入的是在线图片,即只有图片URL,那么除了上面用图形化方式操作之外,还可以使用图片链接的方式。
Markdown使用一种和「普通文本链接」很相似的语法来标记图片,同样也允许两种样式: 行内式和参考式。
行内式图片链接
行内式的图片链接语法如下:
![Alt text](/path/to/img.jpg)![Alt text](/path/to/img.jpg "Optional title")
详细叙述各个组成部分:
- 一个惊叹号
!
- 接着一个方括号,里面放上图片的替代文字,也就是当图片还未加载成功时显示的替换文本
- 接着一个普通括号,里面放上图片的网址,以及可选的用双引号(或单引号或括弧)包住的’title’文字,两者之间用若干个空格分割开来,如果加上了’title’文字,那么鼠标移到该图片上就会显示出该文字
一个实例:
下面我在网上找了个在线图片,复制它的URL按上面的语法格式写即可成功插入图片。
![CSDN图标](http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "这是CSDN的图标")
效果为:
参考式图片链接
参考式的图片链接语法则如下面这样:
![Alt text][id][id]: url/to/image "Optional title"
其中「id」是图片参考的标签,图片参考的定义方式和链接参考一样,可以放在文档的任何位置。
详细叙述各个组成部分:
- 一个惊叹号
!
- 接着一个方括号,里面放上图片的替代文字,也就是当图片还未加载成功时显示的替换文本
- 接着另一个方括号,里面是图片参考的标签id,id可以是数字、英文字符,也可以是中文
- 最后在文档的任何位置处写上标签id的内容定义,内容定义的形式为:
- 一个方括号(前面可以选择性地加上至多三个空格来缩进),里面输入所要定义的标签id
- 接着一个冒号
- 接着一个以上的空格或制表符
- 接着图片的网址
- 最后选择性地接着title内容,可以用单引号、双引号或是括弧包着,与上面一样
例子:
还是以上面那个图片URL为例,改写成参考式链接如下:
![CSDN图标][csdn][csdn]: http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "这是CSDN的图标"
效果:
几个问题探讨
下面针对Markdown插入图片的方式提出几个大家可能会问的问题,并根据自己的经验进行探讨解答。
问题1:图片上传和图片链接两种方式的区别
不管是利用图片上传的方式还是图片链接的方式插入图片,最终形成的都是Markdown内部的图片链接语法,因此两种方式在本质上是一样的。
比如我上传一张本地图片,成功插入后Markdown对应内容如下:
![这里写图片描述](https://img-blog.csdn.net/20150316184625949)
可以看出在我们上传本地图片成功后,CSDN-markdown编辑器会将服务器上该图片的地址取出来,然后用Markdown图片链接的语法插入图片。因此我们在上传图片后,还可以在对应的Markdown内容上进行修改,加上图片描述和图片的title。
问题2:Markdown中如何指定图片的高和宽?
到目前为止, Markdown还没有办法指定图片的宽高,如果需要的话,你可以使用普通的 <img>
标签,利用它的width
和height
属性来定制宽高。
还是以上面那个图片URL为例,如果我们希望把它的大小改为300*120,则可以这么做:
<img src="http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg" width = "300" height = "120" alt="CSDN图标" />
效果:
问题3:Markdown中如何指定图片的对齐方式?
大家可能也注意到了,CSDN-markdown编辑器显示的图片默认都是左对齐,那能不能将其改为居中对齐或右对齐呢?
答案是Markdown做不到,但跟「2」一样,我们可以借助html语法来实现,html中让一个元素居中的方式也有很多,下面给出两种方式供参考。
方法一(推荐):
如果只是居中对齐,则可以使用html中的<center>...</center>
标签,包围在Markdown图片链接内容的外面即可,如下:
<center>
![CSDN图标](http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "这是CSDN的图标")
</center>
效果:
当然,上面也说了,该方法只能用于居中对齐,不能进行右对齐。
方法二:
使用html中的div
标签,它有个对齐属性align
,可以指定为left
、center
和right
以实现左对齐、居中对齐和右对齐。不过经我实验,这种方式div
标签之间不能放Markdown图片链接语法,而只能是html的语法格式,因此还要配合<img>
标签使用。
下面是居中对齐的写法示例:
<div align="center">
<img src="http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg" alt="CSDN图标" /></div>
效果:
注意: 这里如果大家仔细看的话可以发现上面闭合标签</div>
缩进了一个空格,因为经我尝试,这里如果不缩进一个空格就达不到想要的效果,会造成某些Markdown语法失效。
CSDN-markdown语法之如何插入图片相关推荐
- 【每天1分钟】MarkDown语法学习之插入表格
[每天1分钟]MarkDown语法学习之插入表格 表格是Markdown语法中比较复杂的一个,其语法如下: 表头|条目一|条目二 :---:|:---:|:---: 项目|项目一|项目二 以上标记显示 ...
- Markdown:如何修改插入图片的大小或比例
在Markdown编辑器中插入图片有两种方法: 第一种插入图片方法 直接插入图片,即复制一张图片然后直接粘贴到编辑器里.不同编辑器的显式方式不同,有的是显式".png"的文件名,图 ...
- CSDN Markdown 语法
这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一 ...
- idea中的markdown文档如何插入图片
一.情景说明 有些时候我们需要在我们的项目中写类似readme.md文档,聪明的你知道怎么在该文档中插入本项目中的图片? 二.markdown中插入本地图片 插入网络图片 ![github](ht ...
- Markdown插入图片标注及使用emjoy表情
文章目录 插入图片标注 规定图片大小 使用Markdown语法 使用HTML标签 markdown文档中插入emoji表情的方法 插入图片标注 <center><img style= ...
- Hexo博客中插入图片,在网页中无法显示:采用图床外链的方法
个人博客:小序的时光机,欢迎访问! 最近在用Hexo搭建博客过程中,发现如果在博文中添加本地图片,网页上的图片无法显示.网上的搜到的方法很多都是利用hexo-asset-image插件,然而该插件还是 ...
- 解决CSDN markdown编辑器插入图片去除水印
简介 最近有小伙伴们使用新版markdown编辑器插入图片后还有博客字样的水印.今天就是要去除水印,谁来都不好使,就是要去除水印.如果该文章能够解决小伙伴的问题记得收藏关注一波 . 1. 问题描述 上 ...
- markdown插入图片的几个办法
CSDN-markdown语法之如何插入图片 目录 图片上传方式 插入在线图片 插入本地图片 图片链接方式 行内式图片链接 参考式图片链接 几个问题探讨 问题1:图片上传和图片链接两种方式的区别 问题 ...
- Markdown优雅地插入图片
Markdown优雅地插入图片 在博客中使用Picgo+Github图床(cdn加速)插入图片 详见:链接 其实很早就接触了Markdown语法了,那是可以追溯到学生时代.在学校实验室的时候需要对一些 ...
最新文章
- 区块链4.0DexChain是什么?
- 什么是集群?什么又是负载均衡?你说得清楚吗?
- easyui的tree获取父节点_力扣 1519——子数中标签相同的节点数
- Qt调用动态链接库ControlCAN.dll实例
- ActiveMQ queue 代码示例
- ftp搜索文件_Windows10下搭建FTP服务器详解(多图预警)
- 打开新经济大门 淘宝直播如何打造最有价值的直播平台?
- zplane函数怎么用m文件调用_elastique.dll,下载,简介,描述,修复,等相关问题一站搞定_DLL之家...
- 系统表空间数据文件损坏
- 最新如何解决git 输入github时每次都要输入用户名和密码问题
- 5.FlashFXP连接失败(连接已拒绝)及530 permission denied(以root用户连接已被客户端关闭)
- 线性插值_c语言实现
- linux的dve界面如何debug,VCS课时3:使用DVE进行Debug
- 试题 算法训练 24点
- 腾讯QQ的验证码,很黄很暴力
- 再谈Linux epoll惊群问题的原因和解决方案
- SDUT-1150 因式分解
- 幸福的烦恼—当本地化客户端遇上本地化服务器
- 客户服务管理:客户服务管理技巧
- java dns缓存清理_JVM DNS缓存问题
热门文章
- mv150us无线网卡驱动linux,水星MW150US2.0驱动-水星MW150US无线网卡驱动下载v2.0 官方最新版-西西软件下载...
- 为Debian解决Mercury MW150US无线网卡驱动
- 组策略设置计算机禁止睡眠
- java判断点与线与面的关系_高中数学必修二点线面的位置关系与线面平行判定及其性质(精华试题版)...
- Nginx之——负载均衡、限流、缓存、黑名单和灰度发布
- wxpython后台线程更新界面控件方法
- 图解三代测序(SMRT Sequencing)
- 课堂在线录屏:EV录屏软件配置设置
- 传真存储转发工作过程
- 应届毕业生不想应聘上班,一心想独自创业,有什么好的项目推荐?