在纯文本的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动画了

HTML中多媒体标签技术说明的更多相关文章

  1. 小强的HTML5移动开发之路(12)——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  2. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  3. jsp2.0+中的标签文件,JSP Fragment技术

    刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...

  4. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

  5. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  6. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  7. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  8. Jquery获取iframe子/父窗口中的标签

    获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...

  9. 在php中,如何将一个页面中的标签,替换为用户想输出的内容

    前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...

随机推荐

  1. (转载)虚拟机出现无法连接虚拟设备sata0:0,因为主机上没有相应设备

    虚拟主机需要镜像文件, 如果是拷贝的虚拟机,还需要桥接联网的话,更改mac地址,

  2. mysql的windows客户端链接远程全套案例

    我是linux 的服务器,navicat12的客户端, 开始链接的时候需要开服务器上得对外爆漏端口 3306,方法: 添加指定需要开放的端口: firewall-cmd --add-port=/tcp ...

  3. 彻底搞定C指针-函数名与函数指针

     函数名与函数指针 一 通常的函数调用 一个通常的函数调用的例子://自行包含头文件 void MyFun(int x); //此处的申明也可写成:void MyFun( int ); int mai ...

  4. centos7运行yum报如下提示:Run "yum repolist all" to see the repos you have

    centos7运行yum报如下提示: There are no enabled repos. Run "yum repolist all" to see the repos you ...

  5. USACO 6.4 章节

    The Primes 题目大意 5*5矩阵,给定左上角 要所有行,列,从左向右看对角线为质数,没有前导零,且这些质数数位和相等(题目给和) 按字典序输出所有方案... 题解 看上去就是个 无脑暴搜 题 ...

  6. JavaScript Stack

    function Stack() { var items = []; this.push = function(item) { items.push(item) } this.pop = functi ...

  7. leetcode.排序.451根据字符出现频率排序-Java

    1. 具体题目 给定一个字符串,请将字符串里的字符按照出现的频率降序排列. 示例 1: 输入: "tree" 输出: "eert" 解释: 'e'出现两次,'r ...

  8. 使用雪花算法为分布式下全局ID、订单号等简单解决方案考虑到时钟回拨

    1.snowflake简介         互联网快速发展的今天,分布式应用系统已经见怪不怪,在分布式系统中,我们需要各种各样的ID,既然是ID那么必然是要保证全局唯一,除此之外,不同当业务还需要不同 ...

  9. SpringBoot-SpringCloud-版本对应关系

    刚开始研究SpringCloud和SpringBoot的时候,困惑点比较多,SpringBoot是从1.X.X到目前的2.X.X版本,但是SpringCloud基于SpringBoot,版本之间肯定是 ...

  10. Mybatis+Springmvc+Spring整合常用的配置文件

    1.创建web项目 2.导入mabatis spring springnvc 需要的jar包 3.创建mybatis,spring,springmvc的配置文件 (1)web.xml配置文件 < ...