本文所有展示效果都是使用了博客css后的效果，并非单纯html效果

记录一下html媒体嵌入与超链接的方法

超链接

先介绍一下最基础的超链接方式

1
<a href="/2020/12/14/html2/">HTML学习记录：文字排版</a>

HTML学习记录：文字排版

当然我们还可以为超链接增加图片，这种方式叫块级链接

1
2
3
<a href="/2020/12/14/html2/">
  <img src="https://forever97-picture-bed.oss-cn-hangzhou.aliyuncs.com/img/html2-1.png">
</a>

效果如下所示，点击图片即打开链接

文档内链接

除了链接到别的网页，还可以在html文档的内部进行链接，不过首先要在链接的元素上加入id，比如我们给上文的图片链接加个id，然后尝试去链接到它

1
2
3
4
5
6
<!--加入id-->
<a href="/2020/12/14/html2/">
  <img src="https://forever97-picture-bed.oss-cn-hangzhou.aliyuncs.com/img/html2-1.png" id="superStar">
</a>
<!--链接写法-->
<a href="#superStar">Super Star</a>

跳转到 Super Star

当然可以跳转到别的页面的对应位置，在#前加上对应url即可

下载链接

我们可以给链接加上download属性，使得链接不再是跳转至页面，而是去完成下载任务

1
2
3
4
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64位）
</a>

图片嵌入

比如本文的封面图，和本文生成的html在同一个文件夹下，就可以直接用如下代码嵌入

1
<img src="1.png">

如果这张图片存储在和html页面同路径的images文件夹下

则需要使用如下代码

1
<img src="images/1.png">

备选文本

备选文本用于图没了的情况下显示，使用方法如下

1
2
<img src="0.png"
     alt="图没了">

显示效果为

图没了

更多属性

我们还可以为图片添加宽度高度和标题，标题在鼠标悬停在图片上时会显示，而规定了高度和宽度会使得加载速度更快

1
2
3
4
5
<img src="1.png"
     alt="图没了"
     width="400"
     height="300"
     title="图片的标题">

图没了

音视频嵌入

音视频都支持多源，来满足不同浏览器的需求

视频

1
2
3
4
5
6
<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="1.mp4" type="video/mp4">
  <source src="1.webm" type="video/webm">
</video>

H5为视频新增了一些可选择的属性 (摘录自MDN)

  1. width 和 height:
    你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

  2. autoplay:
    这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

  3. loop:
    这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

  4. muted:
    这个属性会导致媒体播放时，默认关闭声音。

  5. poster:
    这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

  6. preload:
    这个属性被用来缓冲较大的文件，有3个值可选：

     "none" ：不缓冲
 "auto" ：页面加载后缓存媒体文件
 "metadata" ：仅缓冲文件的元数据

音频

1
2
3
4
<audio controls>
  <source src="1.mp3" type="audio/mp3">
  <source src="1.ogg" type="audio/ogg">
</audio>

通用嵌入工作

以pdf为例，可以使用embed或object

1
2
3
4
5
6
7
<embed width="100%" height="900"
       src="barcodeTree.pdf"> </embed>

<object data="mypdf.pdf" 
        type="application/pdf"
        width="800" height="1200" typemustmatch>
</object>

示例

Iframe嵌入

Iframe允许将整个web页嵌入到另一个网页

举个🌰，偷走bilibili的镇站之宝

1
2
3
4
5
<iframe src="https://player.bilibili.com/player.html?aid=19390801&cid=31621681&page=1" 
scrolling="no" border="0" 
frameborder="no" 
framespacing="0" allowfullscreen="true"> 
</iframe>

效果如下

记录完毕