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

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

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:

        <img src="xx" alt="" usermap="#xxname"/>

            <map name="xxname">

                <area shape="" coords="" href="" target="" alt==""/>

                ...

        </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:

        <object data="XX图片" type="image/gif" alt="" usermap="#XXname">

        <map name="XXname">

            <a shape="" coords="" href="" >xx</a>    

            ...

        </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>向网页中添加视频文件

    <object>元素可以告诉浏览器：

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

        2.文件格式

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

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

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

        <object width="" height="">

            <param name="movie" value="FLASH_URL"></param>

            <embed src="FLASG_URL" type="application/x-shockwave-flash" width="" height=""></embed>

        </object>

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

        <object classid="" width="" height="" codebase="">

            <param name="movie" value="本地FLash地址"/><!-- 指定元素要播放的Flash影片-->

            <param name="play" value="true"/><!-- 是否自动播放该影片-->

            <param name="loop" value="false"/><!-- 是否循环播放该影片-->

            <embed src="本地Flash地址" width="" height="" play="true" loop="false" quality="best" type="" pluginspace="" />

        </object> 

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

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

        <embed>元素，特性分析：

            src：Flash文件地址

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

            quality：指定当前Flash的分辨率

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

    3.使用SWFObject为网页添加FLash

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

            <script type="text/javascript" scr="swfobject.js"></script>

            <script type="text/javascript">

                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 width="" height="" type="audio/mpeg" data="mp3文件地址">

            <param name="src" value="mp3文件地址"/>

            <param name="autoplay" value="false"/>

            <param name="autostart" value="1"/>

            <emben name="mp3文件地址" width="" height=""></embed>

        </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本章小结

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