本文所有展示效果都是使用了博客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为例,可以使用embedobject

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>

效果如下

记录完毕