当前位置: 首页 > news >正文

Markdown HTML 图像语法

插入图片

Markdown

![图片描述](图片链接)

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

示例图片:
Creeper?

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png)

HTML

<img src="图片链接" alt="图片描述">

示例图片:
Creeper?

<img src="https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png" alt="Creeper?">

更改尺寸

CSDN 内置 Markdown

![图片描述](图片链接 =尺寸x尺寸)

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

示例图片:
Creeper?

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png =200x200)

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

![图片描述](图片链接 =尺寸x)

示例图片:
Creeper?

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png =200x)

请注意,在除 CSDN 外的编辑器,例如 TyporaVS 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%;">

通过调整 heightwidth 属性设置图像的高度与宽度。

原图:Creeper?

自定义长和宽缩放:Creeper?

确定宽度等比缩放:Creeper?

按百分比等比缩放:Creeper?

对齐方式

Markdown

居中:
![图片描述](图片链接#pic_center)居左:
![图片描述](图片链接#pic_left)居右:
![图片描述](图片链接#pic_right)

在图片链接后,直接加上#pic_xx#前没有空格。

对齐方式代码
居中#pic_center
居左#pic_left
居右#pic_right

示例图片居中:
Creeper?

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png#pic_center)

居右:
Creeper?

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png#pic_right)

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

![图片描述](图片链接#pic_center =尺寸x尺寸)

示例图片:
Creeper?

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png#pic_center =200x)

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 语法。

TyporaVS Code 插件 Office Viewer(Markdown Editor) 以及 Jupyter Notebook 正常显示。

下图是 Typora 渲染效果图:
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>

上述代码渲染后效果:

整体居左,图片两侧均可输入文字:

左左左 Creeper? 右右右

整体居中,图片两侧均可输入文字:

左左左 Creeper? 右右右

整体居右,图片两侧均可输入文字:

左左左 Creeper? 右右右

只在 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>

渲染效果如下:

整体居左:

Creeper?

整体居中:

Creeper?

整体居右:

Creeper?

同样的,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"):

字字字 Creeper? 字字字

align="middle/center":

字字字 Creeper? 字字字

align="top":

字字字 Creeper? 字字字

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>

图片居左,所有文字在图片右侧:

左左左 Creeper? 右右右 这是凑数文字,这是凑数文字,这是凑数文字,这是凑数文字,这是凑数文字,用来帮助理解,达到视觉效果。

图片居右,所有文字在图片左侧:

左左左 Creeper? 右右右 这是凑数文字,这是凑数文字,这是凑数文字,这是凑数文字,这是凑数文字,用来帮助理解,达到视觉效果。

是一种排版,可以理解为 Word 文档四周型环绕(但也有区别)。

本文提到的编辑器均可用。 但是,只有在 CSDN 才有如此效果,在另外三个编辑器渲染效果如下图:
在这里插入图片描述
不过你手动空几行也就是了。或者在末尾敲几个</br>

少量文字

仅 HTML
<p>
<img src="图片链接" alt="图片描述" style="float:left"> 图片在文本左边。
</p><p>
<img src="图片链接" alt="图片描述" style="float:right"> 图片在文本右边。
</p>

上述代码CSDN 无法正常显示。渲染效果如下:

Creeper? 图片在文本左边。

Creeper? 图片在文本右边。

不过你可以这样

<p><img src="图片链接" alt="图片描述" style="float:left"> 图片在文本左边。
</p><p>图片在文本右边。<img src="图片链接" alt="图片描述" style="float:right">
</p>

渲染效果如下:

Creeper? 图片在文本左边。

图片在文本右边。Creeper?

在上文提到的三个编辑器都可以正常显示。渲染效果如下图:
在这里插入图片描述

将图像作为一个链接

Markdown

如果想给图片增加链接,将图像的 Markdown 括在方括号中,然后将链接添加在圆括号中。

示例,点击下图会跳转到我的主页:


主页

[![图片描述](图片链接)](点击图片跳转的链接)

就是链接嵌套。

HTML

<p><a href="点击图片要跳转的链接"><img src="图片链接" alt="图片描述" >
</a></p>

点击图像跳转到我的主页:

Creeper?


自存。

创作不易,如有帮助,点个赞再走?

相关文章:

Markdown HTML 图像语法

插入图片 Markdown ![图片描述](图片链接)一般来说&#xff0c;直接复制粘贴过来就行了&#xff0c;部分网页/应用可以拖拽&#xff0c;没人会真敲图片的链接吧…… 示例图片&#xff1a; ![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b8…...

DeepSeek 角色设定与风格控制

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…...

国产化替换案例:CACTER邮件网关为Groupwise系统加固邮件安全防线

电子邮件作为企业信息流转的命脉&#xff0c;承载着商业机密与客户数据。然而&#xff0c;网络攻击手段日益复杂&#xff0c;钓鱼邮件等威胁正快速侵蚀企业安全防线。据《2024年第四季度企业邮箱安全性研究报告》显示&#xff0c;2024年Q4企业邮箱用户遭遇的钓鱼邮件数量激增至…...

Element UI-Select选择器结合树形控件终极版

Element UI Select选择器控件结合树形控件实现单选和多选&#xff0c;并且通过v-model的方式实现节点的双向绑定&#xff0c;封装成vue组件&#xff0c;文件名为electricity-meter-tree.vue&#xff0c;其代码如下&#xff1a; <template><div><el-select:valu…...

《底层逻辑》总结书摘

《底层逻辑》由张羽所著&#xff0c;聚焦于职场与个人发展&#xff0c;深入阐述了定位、结果、学习等十大底层逻辑&#xff0c;旨在帮助读者掌握思考和解决问题的有效方法&#xff0c;提升职场竞争力与个人成就。 核心观点&#xff1a;思维和行动决定命运&#xff0c;格局与价值…...

【Linux】【网络】UDP打洞-->不同子网下的客户端和服务器通信(未成功版)

【Linux】【网络】UDP打洞–>不同子网下的客户端和服务器通信&#xff08;未成功版&#xff09; 上次说基于UDP的打洞程序改了五版一直没有成功&#xff0c;要写一下问题所在&#xff0c;但是我后续又查询了一些资料&#xff0c;成功实现了&#xff0c;这次先写一下未成功的…...

【微信小程序】每日心情笔记

个人团队的比赛项目&#xff0c;仅供学习交流使用 一、项目基本介绍 1. 项目简介 一款基于微信小程序的轻量化笔记工具&#xff0c;旨在帮助用户通过记录每日心情和事件&#xff0c;更好地管理情绪和生活。用户可以根据日期和心情分类&#xff08;如开心、平静、难过等&#…...

PMP项目管理—沟通管理篇—3.监督沟通

文章目录 基本信息4W1HITTO输入工具与技术输出 工作绩效信息和变更请求 基本信息 4W1H what: 确保满足项目及其相关方的信息需求的过程。why: 通过监督沟通过程&#xff0c;来确定规划的沟通工作和沟通活动是否如预期&#xff0c;提高或保持了相关方对项目可交付成果与预计结…...

在Linux中开发OpenGL——检查开发环境对OpenGL ES的支持

由于移动端GPU规模有限&#xff0c;厂商并没有实现完整的OpenGL特性&#xff0c;而是实现了它的子集——OpenGL ES。因此如果需要开发的程序要支持移动端平台&#xff0c;最好使用OpenGL ES开发。 1、 下载支持库、OpenGL ES Demo 1.1、下载PowerVRSDK支持库作为准备&#xff…...

低空经济-飞行数据平台 搭建可行方案

搭建一个飞行数据平台是低空经济中至关重要的一环,它能够实现对飞行器的实时监控、数据分析、路径优化以及安全管理。以下是搭建飞行数据平台的详细步骤和技术方案: 一、平台的核心功能 实时监控: 实时获取飞行器的位置、速度、高度、电池状态等数据。提供可视化界面,展示飞…...

python量化交易——金融数据管理最佳实践——使用qteasy大批量自动拉取金融数据

文章目录 使用数据获取渠道自动填充数据QTEASY数据拉取功能数据拉取接口refill_data_source()数据拉取API的功能特性多渠道拉取数据实现下载流量控制实现错误重试日志记录其他功能 qteasy是一个功能全面且易用的量化交易策略框架&#xff0c; Github地址在这里。使用它&#x…...

为AI聊天工具添加一个知识系统 之136 详细设计之77 通用编程语言 之7

问题 Q1492、针对前面您给出的“AI聊天工具知识系统设计文档”&#xff0c;请就您后面所述“智能进化&#xff1a;认知演进路由驱动知识库持续优化”进行更深入的实现讨论 Q1493、感觉不够完整。下面我们针对您前面给出的“知识系统三层架构详述”逐层给出详细地实现方案。 …...

【CSRF实践】DVWA靶场之CSRF实践

CSRF介绍 CSRF(Cross-site request forgery)&#xff0c;中文名叫做“跨站请求伪造”&#xff0c;也被称作“one click attack/session riding”&#xff0c;缩写为“CSRF/XSRF”。在场景中&#xff0c;攻击者会伪造一个请求&#xff08;通常是一个链接&#xff09;&#xff0…...

数据库设计方面如何进行PostgreSQL 17的性能调优?

在数据库设计方面&#xff0c;PostgreSQL 17 的性能调优可以从以下几个方面入手&#xff1a; 表结构设计 选择合适的数据类型&#xff1a;根据数据的实际范围和业务需求&#xff0c;选择占用空间小、查询效率高的数据类型。对于固定长度的字符串&#xff0c;如性别字段&#…...

[场景题]如何实现购物车

1. 基于Session的购物车&#xff08;适合小型单体应用&#xff09; 核心思路&#xff1a;将购物车数据存储在用户会话&#xff08;Session&#xff09;中&#xff0c;适用于无需持久化的临时购物车。 实现步骤&#xff1a; 数据结构&#xff1a;使用Map<商品ID, 商品数量&g…...

Rust 并发编程:Futures、Tasks 和 Threads 的结合使用

一、线程&#xff08;Threads&#xff09;与异步&#xff08;Async&#xff09;的对比 1.1. 线程的优势与限制 线程是一种广泛使用的并发模型&#xff0c;几乎所有现代操作系统都支持。Rust 的标准库提供了 std::thread API&#xff0c;使得线程编程变得直观。然而&#xff0…...

常见的网络协议介绍

一、什么是网络协议 指的是通信双方的数据发送和接收顺序&#xff0c;数据的封装规则。 通俗解释&#xff1a;描述双方发送和接收的每个字节是按照什么规则。 二、TCP/IP体系的常用协议 (一)应用层 HTTP&#xff1a;超文本协议&#xff1b;指的是用来传输文本网页的协议&#…...

一文读懂加载地址、链接地址和运行地址

我们在做嵌入式系统开发时&#xff0c;会经常遇到加载地址、链接地址和运行地址的概念&#xff0c;可能会感到很困惑&#xff0c;搞不清它们三者的关系。希望此文能帮助大家彻底理解三者的关系。 一.概念 1.1.加载地址 加载地址&#xff0c;即Load Memory Address&#xff08…...

Unity帧同步与状态同步混合架构开发指南

一、技术背景与适用场景 1. 技术定位差异 帧同步&#xff08;Lockstep&#xff09;&#xff1a;同步操作指令&#xff0c;强调确定性计算&#xff0c;适用于实时性要求高的场景&#xff08;如MOBA、RTS&#xff09;&#xff0c;但存在反作弊难题16。 状态同步&#xff08;Sta…...

后路式编程

今天遇到一个问题&#xff0c;反馈的时候&#xff0c;已经提审过了&#xff0c;不能重新出包了。只能依赖Lua热更解决。非常巧的是&#xff0c;C#那边的变量全是Public的&#xff0c;这算是救了一命。想想确实可笑&#xff0c;本来是封装的问题&#xff0c;没有封装的太好。结果…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...