HTML学习笔记（二）——多媒体标签

图像标签

引入路径

在img元素中src属性是不能缺省的，其用法如下所示：

		<img src="img/test.jpg" />

图像替代文本

使用alt 属性，可以为图像添加一段描述性文本，当图像不能够正常显示或鼠标指向图片并暂停在图片上时会显示的替代文本，其用法如下所示：

		<img src="img/test?.jpg" alt="图片不存在"/>

图像的宽高

其基本语法如下：

		<img src="url" width="像素|百分比" height="像素|百分比" />

当没有width及height时，图片按原始尺寸显示，当仅有width值时，图片的高度按照给定的宽进行等比例缩放，当width与height均有值时，图片按照规定的宽高进行显示，其用法如下所示：

		<img src="img/test?.jpg" alt="图片不存在"/>
		<img src="img/test.jpg" alt="图片原始尺寸"/>
		<img src="img/test.jpg" alt="规定宽带，高度自动等比例变化" width="450" />
		<img src="img/test.jpg" alt="规定宽带和高度" width="300" height="300" /> 

显示效果如下：

视频标签

基本语法

video元素的用法如下所示：

		<video src="url" controls="controls" autoplay="autoplay" width="百分比|像素" height="百分比|像素" preload="auto|meida|none" loop="loop">
		浏览器不支持video，会显示此部分内容
		</video>

各属性的意义

下图摘自w3school

实例

输出一个自动播放，带有控制面板，宽度为600px的视频播放器，其用法如下所示：

		<video src="img/花视频.mp4" autoplay="autoplay" controls="controls" width="600" >
		</video>

显示效果如下：

音频标签

基本语法

audio元素能够播放声音文件或音频流。audio元素的属性与video元素具有的属性大致相同，不过audio元素比video元素常用的属性少了四个，分别是：muted、width、height、poster。用法如下所示：

		<audio src="url" controls="controls" autoplay="autoplay" preload="auto|meida|none" loop="loop">
		浏览器不支持audio，会显示此部分内容
		</audio>

各属性的意义

下图摘自w3school

实例

输出一个自动播放，带有控制面板，宽度为400px的音频播放器，其用法如下所示：

		<audio src="img/如约而至_许嵩.mp3" autoplay="autoplay" controls="controls" width="400" >
		</audio>

显示效果如下：

多来源多媒体标签

基本语法

source元素用于定义一个以上的媒体元素，这个标签是拥有两份源文件的音频播放器，浏览器应该选择它所支持的文件（如果有的话），其用法如下所示：

		<video width="300" height="200" controls="controls">
		<source src="paddle-steamer.mp4" type="video/mp4">
		<source src="paddle-steamer.webm" type="video/webm">
		浏览器不支持video元素
		</video>

各属性的意义

下图摘自w3school

多媒体文件标签

基本语法

在某些情况下，必须包含一些不被audio和video元素支持的内容，此时应该使用embed元素进行处理。对于要求使用外部辅助应用程序或插件的多媒体内容——如Adobe Flash，embed元素正好派上用场。其基本语法如下：

		<embed src="url" width="像素" height="像素" type="类型"></embed>

各属性的意义

下图摘自w3school

分组&标题标签

基本语法

figure和 figcaption是两个经常在一起使用的语义化元素。 figure元素不仅仅只限于图片的使用，也适用于其它元素，例如:代码块、视频、音频剪辑、广告。figcaption元素代表了figure元素的一个标题或者说是其相关解释说明。其用法如下：

		<figure>
		<figcaption>标题</figcaption>
		 …
		</figure>

实例

		<figure>
			<figcaption>我是大哥大</figcaption>
			<figure>
				<img src="img/san.jpg" alt="三桥贵志" width="300">
				<figcaption>三桥贵志</figcaption>
			 </figure>
			<figure>
				<img src="img/li.jpg" alt="赤坂理子" width="300">
				<figcaption>赤坂理子</figcaption>
			</figure>
		</figure>

显示效果如下：

结语

记录仓促，不全之处后续补充，望指正