XHTML、CSS与javascript入门经典_第三章图像、音频和视频

本文链接：https://blog.csdn.net/lemonyFei/article/details/8288716

本文详细介绍如何在网页中添加图像、富媒体文件如Flash、视频和音频等。包括使用<img>元素添加图像及其属性说明，图像映射的实现方式，选择合适的图像格式等内容。此外还介绍了使用<object>、<embed>和SWFObject添加Flash的方法，以及如何在网页中嵌入视频和音频。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为网站添加图像、动画、音频和视频

3.1使用<img>元素添加图像

<img>元素至少附加两个特性，src和alt

3.1.1src特性

告诉浏览器图像的地址

3.1.2alt特性

图像的文本描述

3.1.3height和width特性

设定图像的宽度和高度，一般以像素为单位，也可以是浏览器窗口的百分比

3.1.4align特性（弃用）

图像的对其方式，可以取值top、middle、bottom、left、right

3.1.5border特性（弃用）

用于指定图像或者其他元素的边框，一般情况下图片是没有边框的。但是当图片作为链接使用时，IE浏览器会为图像加上边框，因此在图像中通常指定border=“0”。该特性已被css的border属性替换

3.1.6hspace特性和vspace特性（弃用）

用于指定图像周围的空白，可以使用css中的border或者margin属性实现相同的效果

3.1.7ismap和usemap特性

用于图像映射

3.1.8longdesc（还未得到浏览器支持）

用于指定包含图像详细描述的文档

3.1.9name特性（弃用）

为图像指定一个名称，id的前身

3.2使用图像作为链接

3.3图像映射

3.3.1客户端图像映射

方法一：在<img>元素中使用<map>元素和<area>元素

使用<img>将图像插图网页中，然后为<img>添加一个usermap特性，用以指示需要使用在相应<map>元素中保存的信息将图像转化为图像映射，usermap特性通常以#开头。eg:

...

</map>

1).shape特性取值：rectangle或rect（默认）【矩形】、polygon或poly【多边形】、circle或circ【圆形】

2).coords特性：坐标取值，圆形只要设置好圆心和半径。系统会自动闭合图形

3).href和nohref特性

href类型于<a>中的href，nohref取值“nohref”

4).alt特性

类似于<img>中的alt

5).target特性

同<a>中的terget

6).tabindex特性

按下Tab键是，网页上各个项的切换个顺序

方法二：在<object>元素中使用<map>元素（直到IE8才支持），eg:

...

</map>

3.3.2服务端图像映射

<img>元素附带ismap特性，当设置ismap="ismap"时，点击图像，会将鼠标所在区域的坐标发给服务器

3.4选择正确的图像格式

浏览器通常支持3种常用的位图图形格式：GIF、JPEG、PNG

3.4.1GIF图像

适用于图像颜色单调的图片

3.4.2GIF动画

使用于图像包含大面积的单调颜色

3.4.3JPEG图像

用于存储和压缩具有很多颜色的图像，通常将压缩比例设置成60%~70%

3.4.4PNG图像

有PNG-8和PNG-24两种版本，IE浏览器直到IE7才支持PNG透明

3.4.5保存较小的文件尺寸

3.5为网页添加FLASH、视频和音频

在HTML5中<audio>向网页中添加音频文件，<video>向网页中添加视频文件

1.文件名以及存放文件的位置

2.文件格式

3.播放该文件所需插件的种类

3.5.1为网站添加FLASH影片（仿照YouTuBe）

1.为网页添加FLASH视频播放器，eg：

</object>

2.使用<object>元素和<embed>元素为网页添加FLASH

</object>

classid：指定用哪种播放器播放这个文件

codebase：指定播放文件所需要的插件或者程序的下载地址

src：Flash文件地址

play、loop同<object>中的<param>的name特性

quality：指定当前Flash的分辨率

pluginspace：指定播放文件所需要的插件或者程序的下载地址，同<object>中的codebase特性

3.使用SWFObject为网页添加FLash

使用SWFObject脚本，判定浏览器是否安装了播放器，以及播放器的版本是否满足播放需求 ,eg：

swfobject.embedSWF("Flash地址", "将要替换的div_id", "宽度"，"高度", "适合的最低版本");

</script>

<div id="div_id">播放器低于最低版本时，显示的内容</div>

3.5.2为网站添加视频

3.5.3使用Flash Video添加视频

第一步：将其他格式的视频文件，转化成flv格式

第二部：下载一个flv播放器

3.5.4视频大小

3.5.5为网站添加音频

1.使用默认的媒体播放器添加音频,，使用<object>,但是浏览器兼容性差异明显。不推荐

</object>

2.使用Flash为网页添加mp3

3.5.6在加载网页时自动播放音频和视频

3.5.7深入学习<object>和<param>元素

<object>元素：

1.archive特性：通常与基于Java的应用程序共同使用

2.border特性（弃用）：由CSS的border替代

3.classid特性：用于指定所需应用程序的类型（或播放器的类型），浏览器使用该应用程序处理文件

4.codebase特性：指定插件下载地址

5.codetype特性：播放文件所需要的应用程序或代码的MIME类型

6.declare特性：declare="declare"，是个布尔值，指定浏览器是否实例化对象

7.data特性：指定文件地址

8.height和width特性

9.hspace和vspace特性

10.name特性（弃用）

11.standby特性：对正在加载对象的描述

12.tabindex特性：

13.usemap特性：

3.5.8<param>元素

用于像对象传递参数

1.name和value特性

可以使用name和value传递参数，和设置资源内容

2.valuetype特性

指定参数类型，文件（data）、URL（ref）、对象（object）

3.type特性

指定对象中使用内容的MIME类型，eg：

type="audio/mpeg"

3.6本章小结

介绍如何给网页添加图像及富媒体文件

XHTML、CSS与javascript入门经典_第三章 图像、音频和视频

XHTML、CSS与javascript入门经典_第三章图像、音频和视频