在纯文本的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. django manager

    django manager 在语句Book.objects.all()中,objects是一个特殊的属性,需要通过它查询数据库. 总之,模块manager是一个对象,Django模块通过它进行数据库 ...

  2. SQL语言分类DDL、DML、DQL、TCL、DCL

    关系型数据库的SQL语句都可以分为4大类: 1. DDL(数据定义语言)     DDL 主要是指如下的四种SQL 语句,以 CREATE.DROP.ALRET开头和 TRUNCATE TABLE 语 ...

  3. 【玩转SpringBoot】异步任务执行与其线程池配置

    同步代码写起来简单,但就是怕遇到耗时操作,会影响效率和吞吐量. 此时异步代码才是王者,但涉及多线程和线程池,以及异步结果的获取,写起来颇为麻烦. 不过在遇到SpringBoot异步任务时,这个问题就不 ...

  4. laravel 中url使用

    url() 通过url辅助函数(路由)生成:location.href = "{{url('user/index')}}"; 或者:location.href = "{{ ...

  5. appium常见问题02_android内嵌H5页(webview)如何定位

    现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...

  6. 什么是php递归

    程序调用自身的编程技巧称为递归( recursion).递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一 ...

  7. [Fw]初探linux中断系统(1)

    1. 重要接口 LDD上说,“内核维护了一个中断信号线的注册表,该注册表类似于I/O端口的注册表.模块在使用中断前要先请求一个中断通道(或者中断请求IRQ),然后在使用后释放该通道.” 撇开系统如何遍 ...

  8. Codefores 507B Amr and Pins

    B. Amr and Pins time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  9. HDU 2815 Mod Tree (扩展 Baby Step Giant Step )

    Mod Tree Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  10. android 短信发送