JSP编程教程
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

1.2.3 XHTML多媒体标记

1.图像标记

利用图像标记可以向网页中插入图像，或者在网页中播放视频文件，格式如下：

<img属性="值"…/>

图像标记的属性如下。

● src：图像文件的URL地址，图像可以是jpeg、gif或png文件。

● alt：图像的简单说明，在浏览器不能显示图像或加载时间过长时显示。

● height：所显示图像的高度（像素或百分比）。

● width：所显示图像的宽度。

● hspace：与左右相邻对象的间隔。

● vspace：与上下相邻对象的间隔。

● align：图像达不到显示区域大小时的对齐方式。当页面中有图像与文本混排时，可以使用此属性，取值为top（顶部对齐）、middle（中央对齐）、bottom（底部对齐）、left（图像居左）、right（图像居右）。

● border：图像边框像素数。

● controls：指定该选项后，若有多媒体文件则显示一套视频控件。

● dynsrc：指定要播放的多媒体文件。在<img>标记中，dynsrc属性要优先于src属性，如果指定的多媒体文件存在，则播放该文件，否则显示src指定的图像。

● start：指定何时开始播放多媒体文件。

● loop：指定多媒体文件播放次数。

● loopdealy：指定多媒体文件播放之间的延迟（以ms为单位）。

例如：

<img src="image/nj2014-1.jpg" alt="南京2014" height="400" width="500" align="right"/ >

说明：src="image/nj2014-1.jpg"是图像的相对路径，如果页面文件处于Practice文件夹，则说明该图像文件在Practice文件夹的image子文件夹下。

【例1.4】用图像标记制作一个“2014南京青奥会”主题的网页。

（1）准备

新建Practice文件夹，在其下建立子目录image；到南京青奥会官网去搜集两张图片，分别命名为nj2014-1.jpg和nj2014-2.jpg；上网下载一个计时的动态avi文件，命名为nj2014-clock.avi。两张图片和avi文件都存放在Practice\image路径下，如图1.7所示。

图1.7 准备“2014南京青奥会”主题网页的资源

（2）编辑XHTML文档

输入下列内容，以1_4nj2014.html作为文件名保存：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <title>喜迎南京青奥会</title>
</head>
<body>
    <img src="image/nj2014-1.jpg" alt="2014南京青奥会专题" hspace="50" vspace="10">
    <img src="image/nj2014-2.jpg" width="400" height="266" alt="让青年拥抱奥运" border="1"align="left">
    <img dynsrc="image/nj2014-clock.avi" controls loop="infinite" start="fileopen">
</body>
</html>

（3）运行

由于360安全浏览器会自动屏蔽掉ActiveX脚本，这样会使本例用到的多媒体文件nj2014-clock.avi无法正常播放，故建议大家使用普通的IE浏览器运行本网页，效果如图1.8所示。

图1.8 “2014南京青奥会”主题网页

2.字幕标记

在XHTML语言中，可以在页面中插入字幕，水平或垂直滚动显示文本信息。字幕标记的格式如下：

<marquee属性="值"…>滚动的文本信息</marquee>

说明：

<marquee>标记的主要属性如下。

● align：指定字幕与周围主要属性的对齐方式，取值为top、middle、bottom。

● behavior：指定文本动画的类型，取值为scroll（滚动）、slide（滑行）、alternate（交替）。

● bgcolor：指定字幕的背景颜色。

● direction：指定文本的移动方向，取值为down、left、right、up。

● height：指定字幕的高度。

● hspace：指定字幕的外部边缘与浏览器窗口之间的左右边距。

● vspace：指定字幕的外部边缘与浏览器窗口之间的上下边距。

● loop：指定字幕的滚动次数，其值是整数，默认为infinite，即重复显示。

● scrollamount：指定字幕文本每次移动的距离。

● scrolldelay：指定前段字幕文本延迟多少毫秒后重新开始移动文本。

例如，在【例1.4】的文档1_4nj2014.html中添加如下几行代码。

<!DOCTYPE html
    …>
<html>
<head>
    …
</head>
<body>
    …
    <marquee bgcolor="silver" direction="left" scrollamount="4" scrolldelay="100" width="700"height="30">
    <font face="黑体" size="5" color="red">
    <b>2014年南京青奥会 让奥运走进青年，让青年拥抱奥运！</b>
</body>
</html>

再次运行，显示效果如图1.9所示。

图1.9 给网页添加滚动字幕

对比图1.8可以发现，网页下方多了一行滚动字幕“：2014年南京青奥会 让奥运走进青年，让青年拥抱奥运！”。

3.背景音乐标记

背景音乐标记只能放在文档头部分，也就是<head>与</head>标记之间，格式如下：

<bgsound属性="值"…/>

背景音乐标记的主要属性如下。

● balance：指定将声音分成左声道和右声道，取值为−10000～10000，默认值为0。

● loop：指定声音播放的次数。设置为0，表示播放一次；设置为大于0的整数，则播放指定的次数；设置为−1，表示反复播放。

● src：指定播放的声音文件的URL。

● volume指定音量高低，取值为−10000～0，默认值为0。

有兴趣的读者可以自己尝试给图1.9所示的网页加入声音特效。

上一章目录下一章