第6章.网页中的多媒体应用

更新时间：2023-08-20 13:03:01 阅读量：高等教育文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

第6章网络化社会基础:计算机网络推荐度：
相关推荐

Company name

网页中的多媒体应用

主要内容

重点掌握<img>标记和<marquee>标记了解插入背景音乐标记<bgsound>及其属性掌握插入各种多媒体标记<embed>及其属性掌握采用超链接标记<a>插入多媒体文件的方法

图片高质量的图片一般用TIFF格式保存，但其图片体积过大，不太适合网络传输。不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。网页中常用的图片格式为GIF、JPEG和PNG。一般在网页设计中选择的图片不要超过8KB,如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。在HTML文档中，显示图片所用的标记是<img>。

插入图片标记IMG

基本语法： <img src=”url”>

插入图片标记IMG

语法说明： - img是插入图片的标记，其常用属性如表所示。其中src是其必须的属性； - src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径，也可以是绝对路径。<img>的属性 src width height hspace vspace align border alt 功能说明指定图像源，即图像的URL路径指定图像的显示宽度指定图片的显示高度定义图像左侧和右侧的空白。定义图像顶部和底部的空白。指定图片的对齐方式指定图片的边框大小如果图片无法显示，代替图像的说明文字

插入图片标记IMG

示例代码

<html> <head> <title>插入图片示例</title> </head> <body> <!—使用相对路径指定图像路径--> <img src=img/001.jpg width="240"> <comment> 使用绝对路径指定图像路径</comment> <img src= D:/程序代码/6/img/002.jpg width="240"> </body> </html>

插入图片标记IMG

程序6-1采用<img>标记插入了两幅图片，其执行效果如图所示。其src属性分别采用了相对路径和绝对路径。

指定图像的高与宽默认情况下，在HTML页面中显示的是图像的原始大小。如果要显示指定的图像大小，就需采用img标记的width和height属性。

基本语法：<img src=" url" width=" " height=" ">

指定图像的高与宽

语法说明： - width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比； - 在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。

指定图像的高与宽

示例代码：程序6-2分别采用绝对大小和相对大小的方式设置了同一幅图片

的width属性，其height属性的设置方法和此例类似。 <html> <head> <title>图片高和宽的设置</title> </head> <body> <img src=img/001.jpg width="300"> <img src=img/001.jpg width="50%"> </body> </html>

指定图像的高与宽

程序6-2的执行效果如图所示。已知原图大小为600px*404px。第一个图像设置宽为300px, 所以，其为原图的四分之一大小。第二个图设置为50%,可明显看出其宽度为显示窗口宽度大小的二分之一。

指定图像的间距

<img> 标记的 hspace 和 vspace 属性分别用

来指定图像的水平间距和垂直间距。

其值为数字，单位为px,默认值为0。

指定图像的间距

基本语法：<img src="url" hspace=" " > <img src="url" vspace=" " >

语法说明：

- hspace 指的是所设置图片与相邻元素的水平间距； - vspace指的是所设置图片与相邻元素的垂直间距。

指定图像的间距

示例代码

<table border="1"> <tr> <th>图像间距说明</th> <th>图像间距示例</th></tr> <tr> <td>未指定图像间距</td> <td> <img src=img/001.jpg width="100"> <img src=img/001.jpg width="100"></td> </tr> <tr> <td>指定图像水平间距</td> <td> <img src=img/001.jpg width="100"> <img src=img/001.jpg width="100" hspace="55"></td> </tr> <tr> <td>指定图像垂直间距</td> <td> <img src=img/001.jpg width="100"> <img src=img/001.jpg width="100" vspace="25"></td> </tr> <tr> <td>指定了水平与垂直间距</td> <td> <img src=img/001.jpg width="100"> <img src=img/001.jpg width="100" hspace="55" vspace="25"> </td></tr> </table>

指定图像的间距

程序6-3的执行效果如图所示。 – 程序6-3通过一个表格把未指定图像间距、只指定图像水平间距、只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况清晰地进行比较显示。

指定图像的对齐方式

<img>标记的align属性用来指定图像与周围元素的对齐方式。其取值如下表所示。align的取值left center right top middle bottom absbottom absmiddle 在水平方向上向上左对齐在水平方向上向上居中对齐在水平方向上向上右对齐图片顶部与同行其他元素顶部对齐图片中部与同行其他元素中部对齐图片底部与同行其他元素底部对齐图片的底部与同行最低元素的底部对齐，常用于Netscape浏览器图片的中部与同行最大元素的中部对齐，常用于Netscape浏览器

取值说明

baselinetexttop

图片的底部与文本基准线对齐，常用于Netscape浏览器图片的顶部与同行最高元素的顶部对齐，常用于Netscape浏览器

指定图像的对齐方式

基本语法：<img src="url" align=" " >

语法说明：

- 与其他元素不同的是图像的align属性既包括水平对齐方式，又包括垂直对齐方式； - align的默认值为bottom。

指定图像的对齐方式

示例代码

<table border="1"> <tr> <th>水平对齐方式</th> <th>水平对齐示例</th> </tr> <tr> <td align="center">默认</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150"> 春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">左对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="left">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">居中对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="center">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">右对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="right">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> </table>

指定图像的对齐方式

程序6-4在一个表格内设置了图像align属性的水平对齐方式，并与未设置时的默认状态进行了比较。 – 程序6-4的执行效果如图所示。比较可见，水平对齐均是水平方向向上对齐。

指定图像的对齐方式

示例代码

<table border="1"> <tr> <th>垂直对齐方式</th> <th>垂直对齐示例</th> </tr> <tr> <td align="center">默认</td> <td>春天来了，我还含苞欲放。<img src=“img/001.jpg” width=“150”>春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">顶部对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="top">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">居中对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="middle">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> <tr> <td align="center">底部对齐</td> <td>春天来了，我还含苞欲放。<img src="img/001.jpg" width="150" align="bottom">春天来了，我要绽放，开出漂亮的朵朵鲜花。</td></tr> </table>

指定图像的对齐方式

程序6-5的执行效果如图所示。程序6-5在一个表格内设置了图像align属性的垂直对齐方式，并与未设置时的默认状态进行了比较。

本文来源：https://www.bwwdw.com/article/jx3j.html

相关文章：

正在阅读：

第6章.网页中的多媒体应用08-20

消费者行为学复习资料10-02

革勒卫生院农村合作医疗门诊统筹实施方案04-20

水利水电工程专业大学生实习报告-总结报告模板05-07

柴油机设计问答08-21

【骂人的话英文】骂人的话英文大全02-10

微积分-常微分方程解题方法06-24

软件测试培训教程08-12

管理百年05-05

碧塘休闲购物广场餐饮区意向客户跟进表05-19

上一篇：包豪斯对现代设计的影响下一篇：腾讯-网络游戏产品运营(1)