图片和嵌入

添加图片、视频和其他 HTML 元素

图片

使用 Markdown

使用标准 Markdown 语法显示图片。Markdown 图片很简单,适合基本图片显示。

![W3C image](https://img.w3c.cool/blog/picsum-368-600x300.avif)
Markdown图片语法会自动转换为HTML <img> 标签,这是标准的HTML元素。

使用嵌入

使用嵌入以获得更多图片自定义选项。嵌入提供对图片属性(如大小和样式)的更大控制。

:img{src="https://img.w3c.cool/blog/picsum-368-600x300.avif" alt="W3C image" height="150"}

嵌入和 HTML 元素

嵌入允许添加各种 HTML 元素,如视频和 iframe。此功能扩展了文档功能,包括交互式和多媒体内容。

本地视频

使用 HTML5 <video> 标签嵌入本地视频。将视频文件放在 public 文件夹中。

<video controls style="width: 100%; aspect-ratio: 16/9;">
  <source src="https://img.w3c.cool/videos/video.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>
  • 将视频文件放在 /workspace/public/videos/ 文件夹下使用本地路径 /videos/文件名.mp4
  • 或使用外部视频链接,如 https://img.w3c.cool/videos/video.mp4
  • 支持 MP4、WebM、Ogg 等格式