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 图像显示的更多相关文章

  1. 动画--问题追踪：ImageView执行缩放动画ScaleAnimation之后，图像显示不全的问题。

    http://www.bkjia.com/Androidjc/929473.html: 问题追踪:ImageView执行缩放动画ScaleAnimation之后,图像显示不全的问题., 问题:我有一个 ...

  2. Qt 实现遥感图像显示时的连动效果

    遥感图像处理时少不了ENVI,用过ENVI的人都知道,打开图像时或图像处理完后,在缩略图上移动鼠标时,鼠标周围的图像信息会在大的视图中实时的显示,即大图会跟着小图中的鼠标移动,这即是图像的连动效果.如 ...

  3. 第四章 跨平台图像显示库——SDL 第一节 与SDL第一次亲密接触

    http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章 跨平台图像显示库——SDL 第一节 ...

  4. 图像处理工具包ImagXpress中如何定义图像显示属性

    图像处理工具包ImagXpress中如何定义图像显示属性,如色彩管理.设置工具栏和工具.设置上下文&工具栏菜单.配置滚动条.鼠标和键等······ 在显示图像时的色彩管理 在ImagXpres ...

  5. 图像显示与加载——opencv（转）

    cvLoadImage() 函数:IplImage* cvLoadImage("图像名称",参数): 函数作用:加载图片: 函数返回值:为IplImage结构体: 参数说明:参数值 ...

  6. C语言漫谈（二） 图像显示 Windows和Linux

    关于图像显示有很多库可以用,Windows下有GDI,GDI+,D3D等,Linux下有X Window和Wayland,此外还有OpenGL ,SDL等图形库以及各种GUI库. 了解最原始的方式,对 ...

  7. 深入GDI图像显示

    摘  要:本文首先给出了一种结合了DIB和DDB两种位图优点的图像显示方法,其次对GDI函数的高级应用,如透明位图显示.图像旋转显示.图像镜像显示进行了研究. 关键词:GDI图像显示,特殊GDI函数的 ...

  8. 基于FPGA的OLED真彩色动态图像显示的实现

    源:基于FPGA的OLED真彩色动态图像显示的实现 作为第3代显示器,有机电致发光器件(Organic Light Emitting Diode,OLED)由于其主动发光.响应快.高亮度.全视角.直流 ...

  9. 基于FPGA的图像显示

    基于FPGA的图像显示 作者:lee神 这几天一直在调试FPGA的图像显示系统,今天终于成功,图像不在闪烁,也不再边框缺失. 基于FPGA的图像处理的第一课应该是基于FPGA的图像显示,只有图像正常显 ...

随机推荐

  1. TextView 常用摘要

    1.代码中设置drawableTop TextView textView = new TextView(getActivity()); Drawable drawable = getResources ...

  2. 使用eclipse搭建maven项目

    一.安装插件 如果安装的eclipse 4.0及以上的版本或是MyEclipse就不用安装插件,可以在工具栏->windows->preferences里面搜索maven,看是否有搜索结果 ...

  3. 如何修复Outlook 2007源文件.PST及性能优化补丁

    kb961752 微软发布了改善 Outlook 2007 个人数据文件性能的补丁,该补丁未来将会集成于 SP2 中,但是现在对于SP1用户可以提前得到它.   获取地址: http://suppor ...

  4. Android Design Support Library使用详解

    Android Design Support Library使用详解 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的And ...

  5. SQLBulkCopy使用实例--读取Excel写入数据库/将 Excel 文件转成 DataTable

    MS SQL Server 提供一个称为 bcp 的流行的命令提示符实用工具,用于将数据从一个表移动到另一个表(表可以在不同服务器上). SqlBulkCopy 类允许编写提供类似功能的托管代码解决方 ...

  6. json返回数据时提示字符串超出长度

    JavaScriptSerializer json = new JavaScriptSerializer(); json.MaxJsonLength = Int32.MaxValue; return ...

  7. ubuntu下修改进入root用户和修改文件权限

    (1)进入root用户 su root 密码:设置的root密码 (2)修改文件权限 sudo chmod +777  file (3)执行shell ./shellfile (4)编写shell 第 ...

  8. Windows多网卡上网设置

    http://blog.tianya.cn/blogger/post_show.asp?BlogID=1566293&PostID=12984307

  9. 最大流模版 pascal

    //最大流模版 ; maxm=; ..maxn] of integer; end; var n,m,max:longint; r:..maxn,..maxn] of longint; g:..maxn ...

  10. Rails学习笔记一

    安装篇: 下载railsintalls 这里我下载的是rubyinstaller-1.9.3-p448 安装后,安装SQLite3数据库 下载sqlite3.def sqlite3.dll sqlit ...