HTML 图像显示
HTML 图像显示：
图像标签：<img>，源属性：Src
<img>是空标签，没有闭合标签，它只包含属性；显示图像时需要调用源属性src；
src的值是图像的地址；
语法：
<img src="url" />
替换文本属性(alt)
<img src="boat.gif" alt="big boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
注意：由于加载web的内容（图片）是需要时间的，所以在编辑一般HTML文件时建议慎用图片。
<html>
<!背景图像访问>
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>
<!设置图像的对齐方式>
<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>
<!浮动图像>
<html>
<body>
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>
<!编辑图像的大小》
<html>
<body>
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>
<!显示图像的替换文本>
<html>
<body>
<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>
<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>
<img src="/i/eg_goleft.gif" alt="向左转" />
<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>
<img src="/i/eg_goleft123.gif" alt="向左转" />
</body>
</html>
<!制作图像的跳转链接>
<html>
<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
<!创建图像映射>
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
<!把图像转换为图像映射>
<!DOCTYPE html>
<html>
<body>
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>
</body>
</html>
图像标签：
标签 描述
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。
HTML 图像显示的更多相关文章
- 动画--问题追踪：ImageView执行缩放动画ScaleAnimation之后，图像显示不全的问题。
http://www.bkjia.com/Androidjc/929473.html: 问题追踪:ImageView执行缩放动画ScaleAnimation之后,图像显示不全的问题., 问题:我有一个 ...
- Qt 实现遥感图像显示时的连动效果
遥感图像处理时少不了ENVI,用过ENVI的人都知道,打开图像时或图像处理完后,在缩略图上移动鼠标时,鼠标周围的图像信息会在大的视图中实时的显示,即大图会跟着小图中的鼠标移动,这即是图像的连动效果.如 ...
- 第四章 跨平台图像显示库——SDL 第一节 与SDL第一次亲密接触
http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章 跨平台图像显示库——SDL 第一节 ...
- 图像处理工具包ImagXpress中如何定义图像显示属性
图像处理工具包ImagXpress中如何定义图像显示属性,如色彩管理.设置工具栏和工具.设置上下文&工具栏菜单.配置滚动条.鼠标和键等······ 在显示图像时的色彩管理 在ImagXpres ...
- 图像显示与加载——opencv（转）
cvLoadImage() 函数:IplImage* cvLoadImage("图像名称",参数): 函数作用:加载图片: 函数返回值:为IplImage结构体: 参数说明:参数值 ...
- C语言漫谈（二） 图像显示 Windows和Linux
关于图像显示有很多库可以用,Windows下有GDI,GDI+,D3D等,Linux下有X Window和Wayland,此外还有OpenGL ,SDL等图形库以及各种GUI库. 了解最原始的方式,对 ...
- 深入GDI图像显示
摘 要:本文首先给出了一种结合了DIB和DDB两种位图优点的图像显示方法,其次对GDI函数的高级应用,如透明位图显示.图像旋转显示.图像镜像显示进行了研究. 关键词:GDI图像显示,特殊GDI函数的 ...
- 基于FPGA的OLED真彩色动态图像显示的实现
源:基于FPGA的OLED真彩色动态图像显示的实现 作为第3代显示器,有机电致发光器件(Organic Light Emitting Diode,OLED)由于其主动发光.响应快.高亮度.全视角.直流 ...
- 基于FPGA的图像显示
基于FPGA的图像显示 作者:lee神 这几天一直在调试FPGA的图像显示系统,今天终于成功,图像不在闪烁,也不再边框缺失. 基于FPGA的图像处理的第一课应该是基于FPGA的图像显示,只有图像正常显 ...
随机推荐
- JavaScript Module Pattern: In-Depth
2010-03-12 JavaScript Module Pattern: In-Depth The module pattern is a common JavaScript coding patt ...
- 谈谈黑客攻防技术的成长规律（aullik5）
黑莓末路 昨晚听FM里谈到了RIM这家公司,有分析师认为它需要很悲催的裁员90%,才能保证活下去.这是一个意料之中,但又有点兔死狐悲的消息.可能在不久的将来,RIM这家公司就会走到尽头,或被收购,或申 ...
- Selenium 2 入门
在多个浏览器中进行 Web 应用程序的端到端功能测试 Selenium 是一款有名的 Web 应用程序测试框架,用于进行功能测试.新版本 Selenium 2 结合了 Selenium 1 和 Web ...
- pointer to function
指针.函数.数字.结构体.指针函数.函数指针 初学不好区分,做点儿实验来有效区分一下,以下代码采用dev-C++平台测试 //pointer to fucntion 函数功能是 基地址加偏移量得到偏移 ...
- 二叉树的实现与一些基本操作（C++环境）
#include<cstdio>#include<cstdlib>#include<iostream>#include<cstring>using na ...
- Java里面，反射父类里面数字类型字段，怎么set值
Java里面,反射父类里面数字类型字段,怎么set值,我的做法是这样: /** * TODO 直接设置对象属性值, 忽略private/protected 修饰符, 也不经过setter * @aut ...
- 【转】Thread.isBackground
C#中,Thread类有一个IsBackground 的属性.MSDN上对它的解释是:获取或设置一个值,该值指示某个线程是否为后台线程.个人感觉这样的解释等于没有解释. .Net中的线程,可以分为后台 ...
- 【LeetCode OJ】Validate Binary Search Tree
Problem Link: https://oj.leetcode.com/problems/validate-binary-search-tree/ We inorder-traverse the ...
- Qt for Android开发Android应用时的各种错误汇总(此片博文不成熟，请大家略过)
“Qt for Android真的很脆弱,项目能跑起来靠的是奇迹,跑不起来,各种报错才是正常...” 问题一:Qt for Android编译不过:make (e=2): 系统找不到指定的文件. 之前 ...
- 更新记录后关闭子窗口并刷新父窗口的Javascript
有时我们需要在新打开的窗口里面编辑信息,等编辑完了,需要将当前窗口关闭并且刷新父窗口,以使修改生效,本文就是介绍用 javascript 来实现"更新记录后关闭子窗口并刷新父窗口" ...