HTML多媒体与嵌入技术

​ 上一篇HTML基础简单介绍了图像和多媒体是如何插入到HTML文件中的，本文更加详细地介绍HTML中图片、矢量图、音视频和其他元素是如何嵌入到HTML中的

图片

1
<img src="绝对路径或相对路径">

  • 使用相对路径，比如如果图片在./images文件夹下，可以写./images/1.jpg

  • 使用绝对路径可以是网络上的url，但要注意版权问题，并且会加重浏览器负担，让其通过DNS寻找图片的ip地址等

  • options

    • alt：对图片的文字描述，如果浏览器无法加载图片，就会显示该文字来替代图片
    • width、height：表示图片的宽度和高度，要注意比例，否则图片会被拉伸，另外这两个属性可以是以px为单位，也可以是以百分比为单位
    • title：鼠标悬停提示

  • HTML5中用如下语法为图片添加说明性文字，使用一个语义容器figure

    1
    2
    3
    4
    <figure>
      <img src=" ">
      <figcaption>说明文字</figcaption>
    </figure>
    • figure里可以是几张图片、一段代码、音视频、表格等

  • 背景图片通常用css定义，不建议用HTML定义

视频音频

1
2
<video src="" controls></video>
<audio src="" controls></audio>
  • 标签内的内容用于当浏览器无法显示video时，显示标签内的内容
  • controls：浏览器提供的视频控件，如暂停、开始、音量调节等
  • muted：默认关闭声音
  • poster：指向一个图片，用于预览图
  • audio不支持width/height

iframe嵌入技术

​ iframe嵌入技术可以将整个web页面嵌入到另一个网页

1
2
<iframe src=" " width="100%" height="500px" frameborder="0" allowfullscreen sandbox>
</iframe>
  • allowfullscreen：通过全屏API设置为全屏模式
  • frameborder：是否绘制边框，通常设置为1，如果不想显示边框可以在css中border:none
  • src、height、width与<img>类似
  • 始终使用sandbox属性，以便保证网站安全

矢量图形

​ 矢量图通常是svg格式，可以用<img>来嵌入玩也中，但无法用JavaScript或css对图像操作或者设置样式，因此建议用如下方法

1
2
3
4
5
6
7
8
9
<svg width="100%" height="100%">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
    <polygon points="120,0 240,225 0,225" fill="green"/>
    <text x="50" y="100" font-family="Verdana" font-size="55"
          fill="white" stroke="black" stroke-width="2">
        Hello!
    </text>
</svg>
Hello!