读书频道 > web开发 > 其他综合 > 网页与Web程序设计(第2版)
2.4 图像标记和多媒体标记
2014-07-08 15:04:21     我来说两句 
收藏    我要投稿   
本书全面介绍了网页设计与制作技术,以及JavaScript脚本编程和Web数据库应用技术。它以目前比较流行的网页设计软件Dreamweaver CS5作为技术支持,由浅入深、系统地介绍了网页的构思、规划、制作和网站建设的全过  立即去当当网订购

1. 图像标记

1)<img>标记

如果只有文字而没有图像的话,网页将失去许多活力。在网页制作中图像是非常重要的一个方面,HTML语言专门提供了<img>标记来处理图像的输出。

<img>标记并不是真正地把图像加入HTML文档中,而是给标记对的src属性赋值,该值是图形文件的文件名,当然包括路径,这个路径可以是相对路径,也可以是网址。实际上就是通过路径将图形文件嵌入文档中。所谓相对路径是指所要链接或嵌入当前HTML文档的文件与当前文件的相对位置所形成的路径。假如HTML文件与图形文件logo.gif在同一个目录下,则可以将代码写成<img src="logo.gif">;假如图形文件放在当前的HTML文档所在目录的一个子目录(子目录名假设是images)下,则代码应为<img src="images/logo.gif">;假如图形文件放在当前HTML文档所在目录的上层目录(目录名假设是home)下,则必须用“../”,代码应为<img src="../home/logo.gif">,若home是king下面的一个子目录,则代码应为<img src="../king/home/logo.gif">。

src属性在<img>标记中是必须赋值的,是标记中不可缺少的一部分。除此之外,<img>标记还有alt、align、border、width和height属性。align表示图像的对齐方式。border表示图像的边框,可以取大于或者等于0的整数,默认单位是像素。width和height属性表示图像的宽和高,默认单位也是像素。alt属性是当鼠标移动到图像上时显示的文本。

【例2-6】图像标记举例。
<html>
 <head>
  <title>图像标记的综合示例</title>
 </head>
 <body>
  <p align="center"><img src="../logo468_60.gif" alt="网页制作" WIDTH="468" HEIGHT="60"></p>
  </body>
</html>

说明:若事先在文件logo468_60.gif中存放一幅图像,则可以通过例2-6的HTML文档在浏览器窗口中显示它。其中,alt="网页制作"属性表示可以用文字"网页制作"代替该图像先显示出来。

2)<canvas>标记

<canvas>标记是HTML 5中定义的新标记,它用来定义图形,比如图标和其他图像,但是<canvas>标记只是图形容器,必须使用脚本来绘制图形。

大多数Canvas绘图API都没有定义在<canvas>元素本身上,而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。Canvas API也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用beginPath()和arc()方法。一旦定义了路径,其他方法如fill(),都是对此路径操作。绘图环境的各种属性,比如fillStyle,说明了这些操作如何使用。

2. 多媒体标记

1)设置音乐播放的链接。在Windows中,可播放的音乐文件格式常用的有au、mid及wav三种。若要提供音乐文件让浏览者播放,则可建立指向音乐文件的超链接。当浏览者单击该超链接时,将会调用Windows Media Player进行音乐的播放。例如:
<a href="sweet.wav">甜美音乐</a>

2)设置影像播放的链接。常见的影像文件格式有mov、mpg和avi,可建立超链接到影像文件。当浏览者单击超链接时,将会调用Windows Media Player进行影像文件播放。例如:
<a href="traffic.avi">本市交通</a>

3)直接将音乐或影像嵌入网页。可以用<embed>标记,即:
<embed src="音乐或影像文件名称" width=宽度height=高度autostart=true loop=播放次数>

若“播放次数”设为true,则无限次播放,直到单击关闭或停止。若设为no(默认值),则只播放一次。

4)播放网页背景音乐。可运用<bgsound>标记,即:
<bgsound src="音乐文件名" loop=次数>

若“次数”设为Infinite,音乐将循环播放,直到网页关闭为止。

5)Web上的视频。HTML 5规定了一种通过<video>标记来包含视频的标准方法。当前video元素支持Ogg 和MPEG4两种格式的视频。例如:
<video src="movie.ogg" controls="controls"></video>

<video>标记的属性和用途见表2-1。

表2-1   <video>标记的属性和用途
属  性 值 描  述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
height pixels 设置视频播放器的高度
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性
src url 要播放的视频的URL
width pixels 设置视频播放器的宽度

6)Web上的音频。大多数音频是通过插件(如Flash)来播放的,然而,并非所有浏览器都拥有同样的插件。HTML 5规定了一种通过<audio>标记来包含音频的标准方法。当前<audio>标记支持三种音频格式,即Ogg Vorbis、MP3、wav格式。如需在HTML 5中播放音频:
<audio src="song.ogg" controls="controls"></audio>
<audio>标记的属性和用途见表2-2。

表2-2   <audio>标记的属性和用途
属  性 值 描  述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
loop loop 如果出现该属性,则每当音频结束时重新开始播放
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
src url 要播放的音频的URL

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.3 文本标记和链接标记
下一篇:2.5 表格标记和表单标记
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站