MarkDown使用笔记

一. 图像处理（利用html标签）

基本格式Eg：

img src="图片链接" alt="空图片示例" width="300" height="200" title="图片标题"

其他可选标签:

1. alt（替代文本）

当图片无法加载时，alt 中的文字会显示出来，或者用作屏幕阅读器的描述。

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

• alt：用来为图片提供替代文字描述，提升可访问性。

2. title（标题）

鼠标悬停在图片上时会显示 title 中的内容。

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

• title：为图片提供额外的信息或说明。

3. style（内联样式）【本站似不可用】

使用 style 属性可以通过 CSS 样式进一步定制图片的显示方式，例如边框、圆角、旋转等。

<img src="图片链接" alt="描述" style="border: 2px solid black; border-radius: 10px; transform: rotate(10deg);">

• border：设置图片边框样式（例如 2px solid black）。
• border-radius：设置圆角（例如 10px）。
• transform：旋转图片（例如 rotate(10deg)）。

4. align（对齐方式）【居中对齐方法不同】

align 可以设置图片与周围内容的对齐方式，如左对齐、右对齐等。

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

• align：取值 left, right, middle, top, bottom，用于图片的对齐。

  • <div align="center">添加于头尾 用于居中对齐

5. loading（延迟加载）

控制图片的加载时机，lazy 可以延迟加载图片，直到用户滚动到该图片区域。

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

• loading：取值 lazy（延迟加载）或 eager（立即加载）。

6. srcset（响应式图片）【本站未测试】

根据不同设备的屏幕分辨率加载不同大小的图片，提高性能和显示效果。

<img src="small.jpg" alt="描述" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(max-width: 600px) 480px, 800px">

• srcset：提供多种分辨率图片，供浏览器根据设备选择最佳图片。
• sizes：定义不同屏幕宽度下图片应占用的空间。

7. usemap（图像映射）【本站似不支持跳转】

为图片创建一个可点击的区域映射，允许在图片上定义不同区域点击跳转的链接。

<img src="图片链接" alt="描述" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" alt="链接区域" href="https://example.com">
</map>

• usemap：指定一个图像映射，用来定义图片上不同区域的超链接。

---

• 使用例1

（自动（默认为自动调整 区别于标签的左对齐）+500宽+延迟加载+标题）

• 使用例2

（中对齐+300宽+延迟加载+标题）

• 使用例3

（左对齐+右对齐+300宽+延迟加载+标题）