HTML5学习（四）：图片、内联框架、音频和视频

1、图片

图片标签img用于向当前页面中引入一个外部图片
img标签是一个自结束标签，这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性

• src：属性指定的是内部或外部图片的路径（路径规则和超链接是一样的）
• alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片
• width：图片的宽度（单位是像素）
• height ：图片的高度（单位是像素）
  • 宽度和高度中如果只修改了一个，则另一个会等比例缩放

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

2、内联框架

内联框架iframe，用于向当前页面中引入一个其他页面

属性

• src：属性指定要引入的网页的路径
• frameborder：指定内联框架的边框。0为无边框，1为有边框（默认值）
• width：定义 iframe 的宽度
• height ：规定 iframe 的高度
• scrolling：规定是否在 iframe 中显示滚动条。值有yes、no、auto

3、音频

audio标签用来向页面中引入一个外部的音频文件
音视频文件引入时，默认情况下不允许用户自己控制播放停止

属性：

• controls是否允许用户控制播放
• autoplay音频文件是否自动播放
  • 如果设置了autoplay，则音乐在打开页面时会自动播放
  • 但是目前来讲大部分浏览器都不会自动对音乐进行播放
• loop音乐是否循环播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

source
除了通过src属性来指定外部文件的路径以外，还可以通过元素来指定文件的路径

<audio controls autoplay loop>
	<source src="./source/audio.mp3">
</audio>

embed
IE8下不支持audio元素，但是可以使用embed元素在文档中的指定位置嵌入外部内容。
这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。

<embed src="./source/audio.mp3">

4、视频

使用video标签来向网页中引入一个视频，使用方式和audio基本上是一样的

另外，可以通过iframe和embed的方式引入视频
        以某B为例，提供了视频链接的嵌入代码：

<iframe src="//player.bilibili.com/player.html?aid=34239224&bvid=BV1pt411o7Hc&cid=59977665&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>