写在前面

在网页中插入视频和音频。

知识点

  • 图片插入
  • 自适应图片
  • 视频内容与音频内容
  • 为 Web 增加向量图
  • 其他嵌入技术-iframe

图像标签（img）

<img> 是空标签，它只包含属性，没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title 设置鼠标悬停时显示的内容（一般不用设置）。此外还可以通过设置 width 和 height 的值来设置图片的宽和高。
<img src="http://labfile.oss.aliyuncs.com/courses/1236/coder.jpg" alt="程序员" title="你好啊" width="700px" height="600px"/>

自适应图片

<style type="text/css">
           img {
               -moz-background-size: contain|cover;
               -webkit-background-size: contain|cover;
               background-size: contain|cover;
               width: 100%;
               height: auto;
           }
       </style>

视频内容

<video src="https://labfile.oss.aliyuncs.com/codehour/codehour.mp4" controls="controls">
 C++ 使用 openGL 实现吃豆人游戏
</video>
属性              值               描述
autoplay        autoplay        视频就绪后马上播放
controls        controls        向用户显示控件
height          pixels          设置视频播放高度
loop            loop            播放完成后再次播放
preload         preload         视频在页面加载时进行加载，并预备播放，使用autoplay则忽略属性
src             url             要播放的url
width           pixels          设置视频播放宽度

iframe

<iframe  src="规定在 iframe 中显示的文档的 URL" width="" height=""  frameborder="1/0"  name="iframe名称"  scrolling="yes/no/auto">
</iframe>

属性              值                                        描述
align           left、right、top、middle、bottom          不赞成使用，规定根据周围的元素对齐此框架
frameborder     1、0                                      是否显示框架周围边框
height          pixels、%                                 规定iframe的高度
longdesc        URL                                       规定一个页面，包含了有关iframe的较长描述
marginheight    pixels                                    定义iframe的顶部和底部的边距
marginwidth     pixels                                    定义iframe的左侧和右侧的边距
name            frame_name                                规定iframe的名称
sandbox         ""、allow-forms、allow-same-origin        启用一系列对<iframe>中内容的额外限制
                allow-scripts、allow-top-navigation
scrolling       yes、no、auto                             规定是否在iframe中显示滚动条
seamless        seamless                                  规定<iframe>看上去像是包含文档的一部分
src             URL                                       规定在iframe中显示的文档URL
srcdoc          HTML_code                                 规定在<iframe>中现实的页面的HTML内容
width           pixels、%                                 定义iframe的宽度
赏

zxyaily