zoukankan      html  css  js  c++  java
  • HTML中多媒体标签技术说明

    在纯文本的HTML页面中加入图片,给原来单调乏味的页面添加生气。HTML语言中利用<IMG>标记插入图片。 1.图片标记<IMG>及其属性

      在网站上,网页设计者都使用了大量精心设计的图片文件。图片有多种格式,如JPEG、GIF、BMP、TIF、PIC等。目前在网页设计中常用的是JPEG和GIF格式的图片。

       在HTML文件中,使用<IMG>标记插入图片,这个标记没有终止标记。当浏览器读到<IMG>标记时,就会显示它所代表的图片。图片标记<IMG>的属性如表2.5所示。

      表2.5  图片标记<IMG>的属性

      

      属性

      描 述

      SRC

      图像的URL地址

      WIDTH

      图像宽度

      HEIGHT

      图像高度

      HSPACE

      水平间距

      VSPACE

      垂直间距

      BORDER

      图像边框,默认值为0

      ALT

      图像的描述文字。如果浏览器不支持图像,描述文字将代替图像显示

      LOWSRC

      显示低分辨率图像

      ALIGN

      图像和相邻文字的排列

      DYNSRC

      视频文件的URL地址

      LOOP

      视频文件循环播放次数

      LOOPDELAY

      视频文件循环播放延迟

      START

      视频文件播放方式

      USEMAP

      图像映射地图

       下面对图片标记<IMG>属性进行详细介绍。

      图像的URL地址属性SRC

       SRC属性指出图像的URL地址,可以是绝对地址或者相对地址。

      语法:

      <IMGSRC=“file_name”>

      file_name:插入图像路径。

      图像的宽度和高度属性WIDTH、HEIGHT

      语法:

      <IMGSRC=“file_name”WIDTH=“value”HEIGHT=“value”>

      WIDTH:设定图像的宽度,单位为像素。

      HEIGHT:设定图像的高度,单位为像素。

      图像的水平间距和垂直间距属性HSPACE、VSPACE

      可以调整图像和文字之间的左右距离和上下距离。

      语法:

      <IMGSRC=“file_name”HSPACE=“value”VSPACE=“value”>

      HSPACE:设定图像在水平方向和文字的距离,单位为像素。

      VSPACE:设定图像在垂直方向和文字的距离,单位为像素。

      图像边框属性BORDER

       默认的图像是没有边框的,通过属性BORDER可以为图像设定边框。

      语法:

      <IMGSRC=“file_name”BORDER=“value”>

      value:边框线的宽度,单位为像素。

      图像的描述文字属性ALT

      设定属性ALT,在浏览器中当鼠标放在图像上时,会出现所设置的描述文字;当浏览器不支持显示图像文件时,所设置的描述文字将代替图像显示。

      语法:

      <IMGSRC=“file_name”ALT=“描述文字”>

      显示低分辨率图像属性LOWSRC

       考虑到有些用户浏览网站速度慢的情况,可以在网页中插入低分辨率的图像。低分辨率的图像画质较差,但占用空间较小、传送文件较快,可以应用在网络拥塞的线路上。

      语法:

      <IMGLOWSRC=“file_name”>

      file_name:插入图像路径。

    2.图像超级链接

      在网页中,可以指定一个图像做为超级链接。与使用文本做为超级链接并没有太大不同,当单击图像时,会跳转到链接的页面。下面介绍使用图像做为超级链接的语法以及注意事项。

      使用图像做超级链接

       使用超级链接标记<A>和图片标记<IMG>指定图像做为超级链接。

      语法:

      <AHREF=“URL”><IMGSRC=“file_name”></A>

      示例:

      将图像文件01-01.gif链接到“http://www.soAsp.net”,代码如下:

      <AHREF=“http://www.soAsp.net”TARGET=“_blank”><IMGSRC=“01-01.gif”WIDTH=“260” HEIGHT=“130”></A>

      使用图像做超级链接的注意事项

       为了让页面视觉效果更佳,可以指定图像做为超级链接来设计页面头部的导航栏;也可以做为导航按钮,单击导航按钮使用户方便地在页面中向前或者向后查看跳转页面。但是也不能大篇幅地使用图像超级链接,使用图像超级链接的注意事项如下:

      (1)在页面中不要大量使用图像超级链接。当浏览网站速度很慢时,会使图像的载入和下载速度受到影响。

      (2)使用与超级链接有联系的图像做为超级链接。

    3.嵌入多媒体

       在HTML文件中可以直接嵌入多媒体文件。多媒体是指利用计算机技术,把多种媒体综合在一起,使之建立起逻辑上的联系,并能对其进行各种处理的一种方法。多媒体主要包括文字、声音、图像和动画等各种形式。在HTML文件中使用标记<EMBED>嵌入多媒体文件。

      语法:

      <EMBEDSRC=“file_url”WIDTH=valueHEIGTH=valueHIDDEN=hidden_valueAUTOSTART=auto_valueLOOP=loop_value></EMBED>

      标记<EMBED>的属性如表2.6所示。

      表2.6 标记<EMBED>的属性

      

      属性

      描 述

      SRC

      多媒体文件路径

      WIDTH

      播放多媒体文件区域的宽度

      HEIGTH

      播放多媒体文件区域的高度

      HIDDEN

      控制播放面板的显示和隐藏,取值为True代表隐藏面板,取值为No代表显示面板

      AUTOSTART

      控制多媒体内容是否自动播放,取值为True代表自动播放,取值为False代表不自动播放

      LOOP

      控制多媒体内容是否循环播放,取值为True代表无限次循环播放,取值为No代表仅播放一次

       下面介绍如何使用<EMBED>标记嵌入不同的多媒体文件。

      使用<EMBED>标记嵌入MPG电影文件

      MPEG(Moving Pictures Experts Group,动态图像专家组)数字视频格式是运动图像压缩算法的国际标准,采用了有损压缩方法减少运动图像中的冗余信息。它在数字电视、动态图像、实时多媒体监控、移动多媒体通信、互联网上的视频服务与可视游戏、DVD上的交互多媒体等方面都有应用。

      使用<EMBED>标记嵌入MP3音乐文件

      MP3(MPEG Layer3)是一种数字音频格式,是以MPEG Layer3压缩编码为标准压缩音频。MP3压缩率可以达到1:12,也就是说1分钟的CD音质的音乐经过MPEG Layer3压缩编码可以压缩到1兆左右而基本保持不失真。在网页中可以嵌入MP3声音文件,以满足浏览者的需要。

      使用<EMBED>标记嵌入AVI视频文件

      AVI(Audio Video Interlaced)是一种不需要专门硬件参与就可以实现大量视频压缩的数字视频压缩格式,是文件音频数据和视频数据的混合,即音频数据和视频数据交错存放在同一个文件中。在Microsoft公司的Video For Windows支持下,可以用软件来播放AVI视频信号,因此它是视频编辑中经常用到的文件格式。大多数的CD-ROM多媒体光盘也都选用AVI作为视频文件的存储格式。

      使用<EMBED>标记嵌入Flash动画

      Flash动画是一种矢量动画格式,是用Macromedia公司的Flash软 件编辑而成,具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点,是当今比较流行的Web页面动画格式。在任何一个版本的浏览器上只要安装好插件,就可以观看Flash动画了

  • 相关阅读:
    MongoDB的基本操作
    Python 进阶 之 协程
    sublime text3 3143 注册码
    git add 文档
    Corosync 配置描述
    Centos 7 设置 DNS
    2017百度春招<度度熊买帽子的问题>
    leetcode 160. Intersection of Two Linked Lists
    leetcode 155. Min Stack
    leetcode 141 142. Linked List Cycle
  • 原文地址:https://www.cnblogs.com/yangning/p/4294253.html
Copyright © 2011-2022 走看看