Markdown HTML 图像语法
插入图片
Markdown

一般来说,直接复制粘贴过来就行了,部分网页/应用可以拖拽,没人会真敲图片的链接吧……
示例图片:


HTML
<img src="图片链接" alt="图片描述">
示例图片:

<img src="https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png" alt="Creeper?">
更改尺寸
CSDN 内置 Markdown

在图片链接后,空一格,=255x255。即“ =你期望的尺寸x尺寸”,其中左右可以不相等(长宽比)。“x”为小写字母x。
示例图片:


并且,在 CSDN,如果只是想单纯缩放图片,只需要“ =尺寸x”或者“ =x尺寸”,它会自动等比缩放,而不需要你手动计算设置长宽比,非常方便。

示例图片:


请注意,在除 CSDN 外的编辑器,例如 Typora、VS Code 插件 Office Viewer(Markdown Editor) 以及 Jupyter Notebook,虽然能够通过 Markdown 语法插入图片,但似乎无法通过上述方法更改尺寸。
不过 Typora 内置了缩放工具,缩放后会变成 HTML 语法。
上面提到的三种编辑器,都只支持 HTML 语法缩放图片。
HTML
自定义高度与宽度:
<img src="图片链接" alt="图片描述" width="255" height="255">确定宽度等比缩放:
<img src="图片链接" alt="图片描述" width="255">确定高度等比缩放:
<img src="图片链接" alt="图片描述" height="255">按百分比等比缩放:
<img src="图片链接" alt="图片描述" style="zoom:25%;">
通过调整 height 与 width 属性设置图像的高度与宽度。
原图:
自定义长和宽缩放:
确定宽度等比缩放:
按百分比等比缩放:
对齐方式
Markdown
居中:
居左:
居右:

在图片链接后,直接加上#pic_xx,#前没有空格。
| 对齐方式 | 代码 |
|---|---|
| 居中 | #pic_center |
| 居左 | #pic_left |
| 居右 | #pic_right |
示例图片居中:


居右:


在 CSDN 可以与缩放代码同时使用:

示例图片:


HTML
<p><b>居左:</b></p>
<div style="text-align:left;"><img src="图片链接" alt="图片描述">
</div><p><b>居中:</b></p>
<div style="text-align:center;"><img src="图片链接" alt="图片描述">
</div><p><b>居右:</b></p>
<div style="text-align:right;"><img src="图片链接" alt="图片描述">
</div>
注意,上述代码在 CSDN 不可用。如需改变图片位置,请使用 Markdown 语法。
在 Typora、VS Code 插件 Office Viewer(Markdown Editor) 以及 Jupyter Notebook 正常显示。
下图是 Typora 渲染效果图:

在文字中排列图片
调整文字和图片的位置
CSDN & HTML
CSDN 也借用_HTML_ 语法:
<p><b>整体居左,图片两侧均可输入文字:</b></p>
<p align="left">左左左 <img src="图片链接" alt="图片描述"> 右右右</p><p><b>整体居中,图片两侧均可输入文字:</b></p>
<p align="middle">左左左 <img src="图片链接" alt="图片描述"> 右右右</p><p><b>整体居右,图片两侧均可输入文字:</b></p>
<p align="right">左左左 <img src="图片链接" alt="图片描述"> 右右右</p>
上述代码渲染后效果:
整体居左,图片两侧均可输入文字:
左左左
右右右
整体居中,图片两侧均可输入文字:
左左左
右右右
整体居右,图片两侧均可输入文字:
左左左
右右右
只在 Typora 不可用。 其实也能用,只不过图片会一直居中,但文字位置改变,渲染效果如下图:

想在 Typora 实现上述效果,请用如下代码(上文对齐方式提及):
<p><b>居左:</b></p>
<div style="text-align:left;">左左左 <img src="图片链接" alt="图片描述"> 右右右
</div><p><b>居中:</b></p>
<div style="text-align:center;">左左左 <img src="图片链接" alt="图片描述"> 右右右
</div><p><b>居右:</b></p>
<div style="text-align:right;">左左左 <img src="图片链接" alt="图片描述"> 右右右
</div>
渲染效果图:

在 CSDN 不可用。
当你不输入文字时,就是改变图片对齐方式:
<p><b>居左:</b></p>
<p align = "left"><img src="图片链接" alt="图片描述"></p>
<p><img src="图片链接" alt="图片描述" align = "left"></p><p><b>居中:</b></p>
<p align = "middle"><img src="图片链接" alt="图片描述"></p>
<p><img src="图片链接" alt="图片描述" align = "middle"></p><p><b>居右:</b></p>
<p align = "right"><img src="图片链接" alt="图片描述"></p>
<p><img src="图片链接" alt="图片描述" align = "right"></p>
渲染效果如下:
整体居左:

整体居中:

整体居右:

同样的,在 Typora 无法正常显示,除此外均可用。
调整文字相对于图片的位置
<p><b>默认 (align="bottom"):</b></p>
<p>字字字 <img src="图片链接" alt="图片描述" align=""> 字字字</p><p><b>align="middle/center":</b></p>
<p>字字字 <img src="图片链接" alt="图片描述" align="middle"> 字字字</p><p><b>align="top":</b></p>
<p>字字字 <img src="图片链接" alt="图片描述" align="top"> 字字字</p>
上述代码渲染后效果:
默认 (align="bottom"):
字字字
字字字
align="middle/center":
字字字
字字字
align="top":
字字字
字字字
在 Typora 无法正常显示,除此外均可用。
图片在文字的左或右
一段文字
CSDN & HTML
CSDN 也借用 HTML 语法:
<p><b>图片居左,所有文字在图片右侧:</b></p>
<p>左左左 <img src="图片链接" alt="图片描述" align="left"> 右右右</p><p><b>图片居右,所有文字在图片左侧:</b></p>
<p>左左左 <img src="图片链接" alt="图片描述" align="right"> 右右右</p>
图片居左,所有文字在图片右侧:
左左左
右右右 这是凑数文字,这是凑数文字,这是凑数文字,这是凑数文字,这是凑数文字,用来帮助理解,达到视觉效果。
图片居右,所有文字在图片左侧:
左左左
右右右 这是凑数文字,这是凑数文字,这是凑数文字,这是凑数文字,这是凑数文字,用来帮助理解,达到视觉效果。
是一种排版,可以理解为 Word 文档四周型环绕(但也有区别)。
本文提到的编辑器均可用。 但是,只有在 CSDN 才有如此效果,在另外三个编辑器渲染效果如下图:

不过你手动空几行也就是了。或者在末尾敲几个</br>。
少量文字
仅 HTML
<p>
<img src="图片链接" alt="图片描述" style="float:left"> 图片在文本左边。
</p><p>
<img src="图片链接" alt="图片描述" style="float:right"> 图片在文本右边。
</p>
上述代码在 CSDN 无法正常显示。渲染效果如下:
图片在文本左边。
图片在文本右边。
不过你可以这样
<p><img src="图片链接" alt="图片描述" style="float:left"> 图片在文本左边。 </p><p>图片在文本右边。<img src="图片链接" alt="图片描述" style="float:right"> </p>渲染效果如下:
图片在文本左边。
图片在文本右边。
在上文提到的三个编辑器都可以正常显示。渲染效果如下图:

将图像作为一个链接
Markdown
如果想给图片增加链接,将图像的 Markdown 括在方括号中,然后将链接添加在圆括号中。
示例,点击下图会跳转到我的主页:

[](点击图片跳转的链接)
就是链接嵌套。
HTML
<p><a href="点击图片要跳转的链接"><img src="图片链接" alt="图片描述" >
</a></p>
点击图像跳转到我的主页:
自存。
创作不易,如有帮助,点个赞再走?
相关文章:
Markdown HTML 图像语法
插入图片 Markdown 一般来说,直接复制粘贴过来就行了,部分网页/应用可以拖拽,没人会真敲图片的链接吧…… 示例图片: 总架构师,15年工作经验,精通Java编…...
国产化替换案例:CACTER邮件网关为Groupwise系统加固邮件安全防线
电子邮件作为企业信息流转的命脉,承载着商业机密与客户数据。然而,网络攻击手段日益复杂,钓鱼邮件等威胁正快速侵蚀企业安全防线。据《2024年第四季度企业邮箱安全性研究报告》显示,2024年Q4企业邮箱用户遭遇的钓鱼邮件数量激增至…...
Element UI-Select选择器结合树形控件终极版
Element UI Select选择器控件结合树形控件实现单选和多选,并且通过v-model的方式实现节点的双向绑定,封装成vue组件,文件名为electricity-meter-tree.vue,其代码如下: <template><div><el-select:valu…...
《底层逻辑》总结书摘
《底层逻辑》由张羽所著,聚焦于职场与个人发展,深入阐述了定位、结果、学习等十大底层逻辑,旨在帮助读者掌握思考和解决问题的有效方法,提升职场竞争力与个人成就。 核心观点:思维和行动决定命运,格局与价值…...
【Linux】【网络】UDP打洞-->不同子网下的客户端和服务器通信(未成功版)
【Linux】【网络】UDP打洞–>不同子网下的客户端和服务器通信(未成功版) 上次说基于UDP的打洞程序改了五版一直没有成功,要写一下问题所在,但是我后续又查询了一些资料,成功实现了,这次先写一下未成功的…...
【微信小程序】每日心情笔记
个人团队的比赛项目,仅供学习交流使用 一、项目基本介绍 1. 项目简介 一款基于微信小程序的轻量化笔记工具,旨在帮助用户通过记录每日心情和事件,更好地管理情绪和生活。用户可以根据日期和心情分类(如开心、平静、难过等&#…...
PMP项目管理—沟通管理篇—3.监督沟通
文章目录 基本信息4W1HITTO输入工具与技术输出 工作绩效信息和变更请求 基本信息 4W1H what: 确保满足项目及其相关方的信息需求的过程。why: 通过监督沟通过程,来确定规划的沟通工作和沟通活动是否如预期,提高或保持了相关方对项目可交付成果与预计结…...
在Linux中开发OpenGL——检查开发环境对OpenGL ES的支持
由于移动端GPU规模有限,厂商并没有实现完整的OpenGL特性,而是实现了它的子集——OpenGL ES。因此如果需要开发的程序要支持移动端平台,最好使用OpenGL ES开发。 1、 下载支持库、OpenGL ES Demo 1.1、下载PowerVRSDK支持库作为准备ÿ…...
低空经济-飞行数据平台 搭建可行方案
搭建一个飞行数据平台是低空经济中至关重要的一环,它能够实现对飞行器的实时监控、数据分析、路径优化以及安全管理。以下是搭建飞行数据平台的详细步骤和技术方案: 一、平台的核心功能 实时监控: 实时获取飞行器的位置、速度、高度、电池状态等数据。提供可视化界面,展示飞…...
python量化交易——金融数据管理最佳实践——使用qteasy大批量自动拉取金融数据
文章目录 使用数据获取渠道自动填充数据QTEASY数据拉取功能数据拉取接口refill_data_source()数据拉取API的功能特性多渠道拉取数据实现下载流量控制实现错误重试日志记录其他功能 qteasy是一个功能全面且易用的量化交易策略框架, Github地址在这里。使用它&#x…...
为AI聊天工具添加一个知识系统 之136 详细设计之77 通用编程语言 之7
问题 Q1492、针对前面您给出的“AI聊天工具知识系统设计文档”,请就您后面所述“智能进化:认知演进路由驱动知识库持续优化”进行更深入的实现讨论 Q1493、感觉不够完整。下面我们针对您前面给出的“知识系统三层架构详述”逐层给出详细地实现方案。 …...
【CSRF实践】DVWA靶场之CSRF实践
CSRF介绍 CSRF(Cross-site request forgery),中文名叫做“跨站请求伪造”,也被称作“one click attack/session riding”,缩写为“CSRF/XSRF”。在场景中,攻击者会伪造一个请求(通常是一个链接)࿰…...
数据库设计方面如何进行PostgreSQL 17的性能调优?
在数据库设计方面,PostgreSQL 17 的性能调优可以从以下几个方面入手: 表结构设计 选择合适的数据类型:根据数据的实际范围和业务需求,选择占用空间小、查询效率高的数据类型。对于固定长度的字符串,如性别字段&#…...
[场景题]如何实现购物车
1. 基于Session的购物车(适合小型单体应用) 核心思路:将购物车数据存储在用户会话(Session)中,适用于无需持久化的临时购物车。 实现步骤: 数据结构:使用Map<商品ID, 商品数量&g…...
Rust 并发编程:Futures、Tasks 和 Threads 的结合使用
一、线程(Threads)与异步(Async)的对比 1.1. 线程的优势与限制 线程是一种广泛使用的并发模型,几乎所有现代操作系统都支持。Rust 的标准库提供了 std::thread API,使得线程编程变得直观。然而࿰…...
常见的网络协议介绍
一、什么是网络协议 指的是通信双方的数据发送和接收顺序,数据的封装规则。 通俗解释:描述双方发送和接收的每个字节是按照什么规则。 二、TCP/IP体系的常用协议 (一)应用层 HTTP:超文本协议;指的是用来传输文本网页的协议&#…...
一文读懂加载地址、链接地址和运行地址
我们在做嵌入式系统开发时,会经常遇到加载地址、链接地址和运行地址的概念,可能会感到很困惑,搞不清它们三者的关系。希望此文能帮助大家彻底理解三者的关系。 一.概念 1.1.加载地址 加载地址,即Load Memory Address(…...
Unity帧同步与状态同步混合架构开发指南
一、技术背景与适用场景 1. 技术定位差异 帧同步(Lockstep):同步操作指令,强调确定性计算,适用于实时性要求高的场景(如MOBA、RTS),但存在反作弊难题16。 状态同步(Sta…...
后路式编程
今天遇到一个问题,反馈的时候,已经提审过了,不能重新出包了。只能依赖Lua热更解决。非常巧的是,C#那边的变量全是Public的,这算是救了一命。想想确实可笑,本来是封装的问题,没有封装的太好。结果…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
日常一水C
多态 言简意赅:就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过,当子类和父类的函数名相同时,会隐藏父类的同名函数转而调用子类的同名函数,如果要调用父类的同名函数,那么就需要对父类进行引用&#…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
二维FDTD算法仿真
二维FDTD算法仿真,并带完全匹配层,输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...
JDK 17 序列化是怎么回事
如何序列化?其实很简单,就是根据每个类型,用工厂类调用。逐个完成。 没什么漂亮的代码,只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...
在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南
在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...
13.10 LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析
LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词:多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...
