前端之路（七）—— 多媒体

popping_Sun

已于 2022-02-15 16:06:02 修改

阅读量370

点赞数

分类专栏：前端之路文章标签：前端 html5 css html webview

于 2022-02-14 15:23:15 首次发布

本文链接：https://blog.csdn.net/popping_sun/article/details/122924301

版权

前端之路专栏收录该内容

12 篇文章 1 订阅

订阅专栏

目前为止我们了解、学习的标签都是文字类，比如超链接，段落等，日常网页中肯定不能只有这些元素，还需要图片、音频、视频等多媒体去丰富网页内容。那么接下来我们来学习下在网页中如何呈现多媒体。

图片

在html中，我们用<img>元素来呈现图片，在前面《初识HTML》的文章中，我也用过img进行举例，有印象的同学可能知道<img>是一个单标签，具体都有哪些属性与用途呢？

src属性。如果只在编辑器上写上<img />，它是没有任何显示的，就是一个空元素，想要显示图片就需要设置src属性，src属性值就是图片包含的路径，如同a标签的href属性。可以是相对路径，也可以是href网址。具体开发时一般会把图片统一放在一个imags文件夹下。

<img src='cute.jpg'>
<!-- cute.jpg是与HTML文件相同路径下的文件 -->

alt属性。alt属性值是对图片的描述，当图片路径不对或不存在是显示出来的话语。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="cute.jpg" alt="图片不存在" />
  </body>
</html>

这时候就会显示图片不存在的提示语

title属性。用来设置提示、说明语句，当我们鼠标放上去的时候，设置的语句会显示出来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="cute.jpg" alt="图片不存在" title="这是可爱的图片"/>
  </body>
</html>

宽、高属性。顾名思义就是设置图片大小的属性，这两个是很多标签都有的属性。具体的我们会在css章节学习，这里我们简单了解一下即可。

<img width="300" height="400" src="cute.jpg" alt="图片不存在" title="这是可爱的图片" />

音频和视频

这里我们简单了解下发展历史，刚开始要想实现一些动态的动画采用的Flash类似的技术，但是Flash有着一系列的问题，后来通过发展HTML有了插入音频和视频的专属标签。

<video>视频元素

src属性。跟img类似。src属性值就是视频的地址。
controls属性。用于控制视频的回放功能。包含着开始、暂停等功能
后备内容。标签内的内容，当浏览器不支持该标签是会显示这段内容

<video src="myVideo.webm" >
<p>该浏览器不支持video标签</p>
</video>

autoplay属性。是音频或视频内容立即播放，简而言之就是自动播放。
loop属性。循环播放。
muted属性。默认关闭声音
poster属性。属性值是一个图片的url，在播放前展示一个图片。（音频没有）
preload属性。用来缓冲大文件。有三个属性值。none ：不缓冲；auto：页面加载后缓存媒体文件；metadata：只缓冲元数据。
宽高属性：也是用width与height属性来设置。（音频没有）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video
      controls
      width="500"
      height="500"
      autoplay
      loop
      muted
      poster="my.png"
      src="myVideo.mp4"
    >
      <p>
        你的浏览器不支持 HTML5 视频。
      </p>
    </video>
  </body>
</html>

<audio>音频元素

音频元素的用法跟视频基本一样，除了一些视觉部件元素跟宽高，其他的属性与用法都一样，上面video属性也标注哪些是音频没有的属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <audio
      controls
      src="myVideo.mp3"
    >
      <p>
        你的浏览器不支持 HTML5音频。
      </p>
    </audio>
  </body>
</html>

popping_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之路（七）—— 多媒体

目前为止我们了解、学习的标签都是文字类，比如超链接，段落等，日常网页中肯定不能只有这些元素，还需要图片、音频、视频等多媒体去丰富网页内容。那么接下来我们来学习下在网页中如何呈现多媒体。图片在html中，我们用<img>元素来呈现图片，在前面《初识HTML》的文章中，我也用过img进行举例，有印象的同学可能知道<img>是一个单标签，具体都有哪些属性与用途呢？src属性。如果只在编辑器上写上<img />，它是没有任何显示的，就是一个空元素，想要显示图片就需要设
复制链接

扫一扫

专栏目录