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的图像显示,只有图像正常显 ...
随机推荐
- webstorm 10 更改默认端口
快捷键 ctrl + Alt + s :打开配置 如图下可以更改 默认端口.快捷键可能跟qq的快捷键冲突,可以关闭qq来设置端口
- Fiddler-2 Fiddler抓包原理
1 fiddler抓包是在 客户端和服务器之间建立一个代理服务器,监听本机发出的请求和服务器返回的响应结果. 截一张官网的图: 2 启动fiddler之前,[dinghanhua]先来看一下代理服务器 ...
- how a 程序猿 doubled his salary？
One thing i can say, no matter what position i was in or what was my salary, i never stopped studyin ...
- DTD指定了游戏规则。
1.DTD的作用 DTD是XML的型,列出了XML中的元素有哪些.元素间的关系.元素可以有哪些内容,元素的属性也有哪些.DTD实质说明的是元素间的关系,也就是类之间的关系.是一棵树状结构的说明,与XM ...
- C语言程序设计第6堂作业
一. 本次课主要内容: 通过几个实例来进一步掌握循环结构的应用. 二. 实验内容:(70分) 1. 穷举算法(古典算术问题-搬砖头)某地需要搬运砖块,已知 ...
- 基于Bayes和KNN的newsgroup 18828文本分类器的Python实现
向@yangliuy大牛学习NLP,这篇博客是数据挖掘-基于贝叶斯算法及KNN算法的newsgroup18828文本分类器的JAVA实现(上)的Python实现.入门为主,没有太多自己的东西. 1. ...
- CxImage图像库的使用 .
http://blog.csdn.net/wangjie0377/article/details/7830405 CxImage图像库 CxImage下载地址:http://www.codeproje ...
- c# 禁用 webBrowser 声音(转)
const int FEATURE_DISABLE_NAVIGATION_SOUNDS = 21; const int SET_FEATURE_ON_PROCESS = 0x00000002; [Dl ...
- 字符串处理——（第一次作业Draw输入命令处理部分升级）
#include<iostream> #include<sstream> //使用istringstream必须包含的头文件 #include<string> #i ...
- POJ 3067 原来是树状数组--真的涨姿势
题意:计划在东边的城市和西边的城市中建路,东边的点从1.....n,西边的点从1......m,求这些点连起来后有多少个交叉. PS:这个题目没有任何思路,没想到是树状数组.... 交叉出5个点 分析 ...