✍️作者简介:小北编程(专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向)
🐳博客主页: 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您些帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】
文章目录
图片基本用法
图片是比文字更容易表达多方位信息的媒介。Markdown 自然也为图片的添加提供了便捷的方法。
Markdown 图片语法格式如下:
![替代文字](图片地址)
![替代文字](图片地址 "可选标题")
[![替代文字](图片地址)](链接图片跳转地址)
- 以感叹号
!
开始- 紧接着方括号,包含图片的替代文字
- 接下来是普通括号,内含图片的URL地址,你还可以使用引号包裹并加上可选的 ‘title’ 属性文字。
调整尺寸大小
直接在连接地址后添加例如=宽x高的数字即可调整图片大小。
如果需要调整图片大小,只需在图片地址后添加尺寸参数,例如:
![替代文字](图片地址 =600x600)
说明:等号 " = " 前面需要有一个空格 =宽x高
- 带尺寸的图片:=600x600
- 宽度确定高度等比例的图片:=600x
- 高度确定宽度等比例的图片:=x600
调整对齐方式
若需要调整对齐方式,需要在图片链接地址后面添加指令#pic_center,该命令的位置在指定尺寸的指令前面。
![图片描述](图片链接#pic_center)
调整图片位置 | 说明 | 实例 |
---|---|---|
#pic_center | 居中对齐 | ![图片描述](图片链接#pic_center) |
#pic_left | 靠左对齐 | ![图片描述](图片链接#pic_left) |
#pic_right | 靠右对齐 | ![图片描述](图片链接#pic_right) |
说明:# 前面不需要空格,= 前面需要有一个空格
总结Markdown效果示例
这里总结了一个例子:
对齐方式:#pic_center
图片大小:=300x200
图片链接:(https://blog.csdn.net/u014696856)
这里就不一一举例了,总结一个实例剩下的大家去实践。
[![这是图片](https://i-blog.csdnimg.cn/blog_migrate/84e0a84e43c73ad12c879a12da55e622.webp?x-image-process=image/format,png#pic_center =300x200)](https://blog.csdn.net/u014696856)
内嵌HTML语法
HTML基础语法
基础语法:
<img src="图片链接">
<img src="图片链接" alt="图片alt" title="图片title">
src
属性指定图像的URL地址alt
属性为图像定义可替换的文本title
属性描述元素的额外信息
可以通过 width 和 height 属性设置图像的尺寸,通过 style 属性定义行内样式,包括缩放效果。
HTML调整尺寸大小
基础语法:
<img src="图片链接" width="100%">
<img src="图片链接" alt="图片alt" title="图片title">
调整图片尺寸 | 说明 | 实例 |
---|---|---|
width="100%" | 横向占比 | <img src="图片链接" width="100%"> |
width="600" | 宽度 | <img src="图片链接" width="600"> |
height="600" | 高度 | <img src="图片链接" height="600"> |
调整位置和尺寸举个例子:
<img src=“图片链接” align = “right” width=“600” height=“600”/>
HTML调整对齐方式
基础语法:
<img src="图片链接" align = "left">
调整图片位置 | 说明 | 实例 |
---|---|---|
align | 居中对齐: align = “middle” 靠左对齐: align = “left” 靠右对齐: align = “right” | align属于img标签属性,使用起来也简单例如:<img src="图片链接" align = "right"/> |
注意
图片描述可以不写,调整图片的位置追加在图片链接的后面
最好将 <img> 标签包裹在 <p align=“center”> . . . </p>标签内使用,可以实现更多、更好的效果。
HTML 使用p标签实现复杂排版
基础语法
也可通过将<img>标签包裹在<p align=“center”> . . . </p>标签内修改图片的对齐方式。
基础语法:
<p>
<img src="图片链接"/>
</p>
<p align="center">
<img src="图片链接" width="400"/>
</p>
<p align="center">
<img src="图片链接1" width="400"/>
<img src="图片链接2" width="400"/>
<img src="图片链接3" width="400"/>
<img src="图片链接4" width="400"/>
</p>
图文混排效果实现
要实现左图右文或左文右图的效果,需要在 标签后添加 align 属性:
- align=“left” 实现左图右文效果
- align=“right” 实现左文右图效果
实现左图右文或左文右图的效果
需要左右混排的文字放在<p > . . . </p>标签内,且需在<img>标签行的下面。放在<p > . . . </p>标签外的排版为正常的上下排版样式。
左图右文:align = “left”
左文右图:align = “right”
基础语法:
<p>
<img src="图片链接" width="400" align="left"/>
文字在右边,图片在左边。
</p>
<p>
<img src="图片链接" width="400" align="right"/>
文字在左边,图片在右边。
</p>
总结HTML效果示例
写了两个复杂的实例,经过这两个实例HTML图片基本都能实现,图文混排的不能能实现太复杂的效果,很多浏览器也不支持 <style>实现复杂的效果。
**四个图片成正方形显示:**
<p align = "center">
<img src="https://i-blog.csdnimg.cn/blog_migrate/f7a3291bdef5aa1dfddb578e11caf4c4.png" width="400" />
<img src="https://i-blog.csdnimg.cn/blog_migrate/f7a3291bdef5aa1dfddb578e11caf4c4.png" width="400" />
<img src="https://i-blog.csdnimg.cn/blog_migrate/f7a3291bdef5aa1dfddb578e11caf4c4.png" width="400" />
<img src="https://i-blog.csdnimg.cn/blog_migrate/f7a3291bdef5aa1dfddb578e11caf4c4.png" width="400" />
</p>
**图文显示示例:**
<p align = “center”>
<img src="https://i-blog.csdnimg.cn/blog_migrate/6806f0ada0720f389dcda0f3e1681709.png" width="200" align="left"/>
<br> <br>
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。<br>
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。<br>
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。<br>
Markdown 编写的文档后缀为 .md, .markdown。
</p>
四个图片成正方形显示:
图文显示示例:
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。
总结
- Markdown 文档只能引用外部图片,无法在像 word 一样将图片嵌入到文档中,给自己找一个习惯的图床是个好方法。
- Markdown 文档里很难实现图文混排,比如文字环绕图片、图片覆盖文字这类 Word 中的效果,如果需要这样的排版,建议直接选用 Word 。
- Markdown 文档虽然不能嵌入图片,但通过引用外部图片和HTML语法,我们可以实现丰富的图文排版效果。需要注意的是,在实现图文混排时,建议将 <img> 标签包裹在 <p align=“center”> … </p> 内,以获得更好的效果。同时,选择一个习惯的图床来存储图片会更加方便。
👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的指引!
✏️ 评论,是我进步的宝藏!
💖 衷心感谢你的阅读以及支持!