html图片和多媒体

图片和多媒体文件的使用上节回顾表格的基本组成部分表格的简单应用利用表格进行排版第19章

图片和多媒体文件的使用

本章主要内容

19.1图片19.2滚动文字19.3插入多媒体文件——<embed>19.4添加背景音乐——<bgsound>19.5小实例——综合设置图片和多媒体19.6习题

19.1图片

19.1.1网页的图片格式19.1.2插入图片——<img>19.1.3添加图片的提示文字——alt19.1.4设置图片的宽度和高度——width/height19.1.5设置图片边框——border19.1.6设置图片对齐方式——align19.1.7设置图片的间距——hspase/vspase19.1.8设置图片链接——<a>

19.1.1网页的图片格式

1．GIF格式2．JPEG格式3．PNG格式19.1.2插入图片——<img>基本语法<imgsrc=”图片地址”>19.1.2插入图片——<img>语法说明img标记的作用就是插入图片，该标记含有多个属性，其中src属性为必要属性，其他属性将在后面几节内容中逐个介绍。src属性用来指定图片文件所在的路径，这个路径可以是相对路径，也可以是绝对路径。19.1.2插入图片——<img>实例代码19.1.2插入图片——<img>网页效果19.1.3添加图片的提示文字——alt基本语法<imgsrc=”图片地址”alt=”提示文字”>19.1.3添加图片的提示文字——alt语法说明alt属性的提示文字可以是中文也可以是英文。19.1.3添加图片的提示文字——alt实例代码19.1.3添加图片的提示文字——alt网页效果19.1.4设置图片的宽度和高度——width/height基本语法<imgsrc=”图片地址”width=”value”height=”value”>19.1.4设置图片的宽度和高度——width/height语法说明

图片高度和宽度的单位可以是像素，也可以是百分比。

如果在使用的宽度和高度属性中，只设置了宽度或高度中的一个属性，那么另一个属性会按原始图片宽高等比例显示。但是如果两个属性没有按原始大小的缩放比例设置，图片很可能变形。19.1.4设置图片的宽度和高度——width/height实例代码19.1.4设置图片的宽度和高度——width/height接上页19.1.4设置图片的宽度和高度——width/height网页效果19.1.5设置图片边框——border基本语法<imgsrc=”图片地址”border=”value”>19.1.5设置图片边框——border语法说明value为边框线的宽度，用数字表示，单位为像素。19.1.5设置图片边框——border实例代码19.1.5设置图片边框——border接上页19.1.5设置图片边框——border网页效果19.1.6设置图片对齐方式——align基本语法<imgsrc=”图片地址”align=”关键字”>19.1.6设置图片对齐方式——align语法说明19.1.6设置图片对齐方式——align实例代码19.1.6设置图片对齐方式——align接上页19.1.6设置图片对齐方式——align网页效果19.1.7设置图片的间距——hspace/vspace基本语法<imgsrc=”图片地址”hspace=”水平间距”><imgsrc=”图片地址”vspace=”垂直间距”>19.1.7设置图片的间距——hspace/vspace语法说明hspace调整的是图片左右两边的空白距离，vspace调整的是图片上下两边的空白距离。

水平间距和垂直间距都是用数字表示的，并且单位都是像素。19.1.7设置图片的间距——hspace/vspace实例代码19.1.7设置图片的间距——hspace/vspace网页效果19.1.7设置图片的间距——hspace/vspace实例代码19.1.7设置图片的间距——hspace/vspace接上页19.1.7设置图片的间距——hspace/vspace网页效果19.1.7设置图片的间距——hspace/vspace效果说明从图19-8的效果中可以看到图片的上下都存在一个空白距离，这个距离是由vspace值决定的，vspace的值越大，这个空白距离越大。如果不设置hspace和vspace两个属性的值，浏览器将显示图片和文字靠近的效果。19.1.8设置图片链接——<a>基本语法<ahref=”URL”target=”目标窗口的打开方式”><imgsrc=”图片地址”></a>19.1.8设置图片链接——<a>语法说明href属性是用来设置图片的链接地址URL，target属性用来设置目标窗口的打开方式，包含有4个属性值，具体内容可参照第6章。img标记中还可以添加其他的属性，如height、hspace、border等。19.1.8设置图片链接——<a>实例代码19.1.8设置图片链接——<a>网页效果19.1.8设置图片链接——<a>效果说明通过单击图19-9中的图片链接，就可以打开图19-10来查看第二张图片。提示文字在图中没有显示出来，因为它只有在图片不能显示时才会起作用。同时，还发现在图19-9中的图片有一个边框，这是因为给图片建立链接以后，浏览器自动就要给图片加一个边框，很像给文字建立链接时自动加的下划线。19.3插入多媒体文件——<embed>

基本语法<embedsrc=”多媒体文件地址”width=文件宽度height=文件高度autostart=true|falseloop=”true|false”></embed>19.3插入多媒体文件——<embed>

语法说明src属性用来指定插入的多媒体文件地址或多媒体文件名，同时文件一定要加上后缀名。width属性用来设置多媒体文件的宽度，height属性用来设置多媒体文件的高度，都是用数字表示，单位为像素。autostart属性用来设置多媒体文件的自动播放，有两个取值true和false，true表示在打开网页时自动播放多媒体文件；true是默认值，表示打开网页时自动播放。loop属性用来设置多媒体文件的循环播放，只有两个取值true和false，、true表示多媒体文件将无限循环播放；false表示多媒体文件只播放一次，false为默认值。19.3插入多媒体文件——<embed>19.3.1插入flash动画19.3.2插入音频19.3.3插入视频19.3.1插入flash动画实例代码19.3.1插入flash动画网页效果19.3.1插入flash动画效果说明图19-25是两个小球在自由跳动的flash动画，完整效果可参看光盘文件HTML\19\19-3-1.swf。19.3.2插入音频实例代码19.3.2插入音频网页效果19.3.2插入音频效果说明图19-26是运行实例19-3-2.html代码的结果，自动会显示音乐播放器，同时音乐“中国人.mp3”也将自动播放。如果没有设置多媒体音乐为自动播放时，播放器就会显示一个播放按钮，只要单击该播放按钮即可播放多媒体音乐。19.3.3插入视频实例代码19.3.3插入视频网页效果19.4添加背景音乐——<bgsound>基本语法<bgsoundsrc=背景音乐地址loop=播放次数>19.4添加背景音乐——<bgsound>语法说明src属性用来指定背景音乐文件的地址或音乐文件名，而且音乐文件要加上后缀。loop属性用来指定音乐播放的次数，用数字表示。如果设置loop=3，则背景音乐播放3遍后自动停止；如果想设置为无限循环播放的话，可以设置loop=-1即可。19.4添加背景音乐——<bgsound>实例代码19.4添加背景音乐——<bgsound>接上页19.4添加背景音乐——<bgsound>网页效果19.4添加背景音乐——<bgsound>效果说明图19-28为插入背景音乐的网页，只要一打开网页，背景音乐“明月几时有.mp3”就会开始播放，但是播放5次后自动停止，因为设置的循环次数为5。总结图片和多媒体的熟练使用图片标签属性的使用作业——综合设置图片和多媒体效果说明图19-29的效果图中综合应用到