访问链接

Markdown 链接

https://www.baidu.com

百度

HTML标签:超链接

百度

<a> 标签的 target 属性规定在何处打开链接文档

  • _blank:新建标签页打开,target="_blank"
  • _self:在当前标签页打开,target="_self"

<a> 标签的 download 属性规定被下载的超链接目标

  • 只有 Firefox 和 Chrome 支持 download 属性
  • <a> 标签中必须设置 href 属性
  • 可以设置 download 属性的值来规定下载文件的名称,浏览器将自动检测文件扩展名并添加到文件
  1. 点击下载

  2. favicon.png

访问文章

绝对路径访问文章

相对根路径访问文章

根路径
博客首页
当前博文

相对当前路径访问文章

md文件被渲染的实际页面
hello-butterfly.md -> hello-butterfly/index.html

当前博文
同级博文
同级博文
同级博文
同级博文

引用网络图片

Markdown 图片

alt 属性文本

alt 属性文本

HTML标签:图像

<img> 标签的 alt 属性规定图像的替代文本
<img> 标签的 height 属性规定图像的高度
<img> 标签的 width 属性规定图像的宽度
<img> 标签的 loading 属性指定浏览器是应立即加载图像还是延迟加载图像

  • eager:立即加载,loading="eager"
  • lazy:延迟加载,loading="lazy"
Smiley face

引用本地图片

引用本地资源
将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。
当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。
这个资源文件夹将会有与这个文章文件一样的名字。
将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单而且方便得多的工作流。

绝对路径引用本地图片

相对根路径引用本地图片

alt 属性文本
alt 属性文本
alt 属性文本

相对当前路径引用本地图片

md文件被渲染的实际页面
hello-butterfly.md -> hello-butterfly/index.html

  • 本博文图片

alt 属性文本

  • 同级博文图片

alt 属性文本

访问网络音频

HTML标签:音频

使用 HTML5 <audio> 元素

<audio> 标签的 autoplay 属性,如果出现该属性,则音频在就绪后马上播放。<audio autoplay>
<audio> 标签的 controls 属性,如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。<audio controls>
<audio> 标签的 loop 属性,如果出现该属性,则每当音频结束时重新开始播放。<audio loop>

使用超链接

如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。

Play Sound

网易云音乐iframe插件

单曲的外链播放器

访问本地音频

绝对路径访问本地音频

相对根路径访问本地音频

相对当前路径访问本地音频

播放网络视频

HTML标签:视频

使用 HTML5 <video> 标签

  • <video> 元素支持三种视频格式:MP4、WebM、Ogg。
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

<video> 标签的 autoplay 属性,如果出现该属性,则视频在就绪后马上播放。<video autoplay>
<video> 标签的 controls 属性,如果出现该属性,则向用户显示控件,比如播放按钮。<video controls>
<video> 标签的 loop 属性,如果出现该属性,则当媒介文件完成播放后再次开始播放。<video loop>
<video> 标签的 muted 属性,如果出现该属性,视频的音频输出为静音。<video muted>
<video> 标签的 poster 属性规定视频正在下载时显示的图像,直到用户点击播放按钮。<video poster="URL">
<video> 标签的 height 属性设置视频播放器的高度。
<video> 标签的 width 属性设置视频播放器的宽度。

  • 注意: Internet Explorer 8 及更早IE版本不支持 <video> 标签。

哔哩哔哩视频分享iframe代码

播放本地视频

绝对路径播放本地视频

相对根路径播放本地视频

相对当前路径播放本地视频