61.插入图像
本例演示如何在网页中显示图像。
图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />
#####
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">
#####
图像标签
标签 描述
<img>  定义图像。
<map>  定义图像地图。
<area> 定义图像地图中的可点击区域。

实例1
<p>
    一副图像：
    <img src="2.jpg" width="128" height="128" />
</p>
<p>
    一副动画图像：
    <img src="3.gif" width="50" height="50">
</p>

62.从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。
<P>
    来自本地文件夹图片
    <img src="./2.jpg" />

</P>
<p>
    来自 W3school.com.cn的图像：
    <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif">
</p>

63.背景图片
本例演示如何向 HTML 页面添加背景图片。
<body background="2.jpg">
<h4>图片背景</h4>
<p>gif 和 jpg 文件均可作用 HTML 背景</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>

64.排列图片
本例演示如何在文字中排列图像。
align属性值
值  描述
left   标题在表格的左边。
right  标题在表格的右边。
top    标题在表格的上边。
bottom 标题在表格的下边。

<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src="3.gif"></p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="3.gif" align="bottom"></p>
<p>图像 <img src="3.gif" align="middle"></p>
<p>图像 <img src="3.gif" align="top"></p>
<p>图像 <img src="3.gif" align="left"></p>

65.浮动图像
本例演示如何使图片浮动至段落的左边或右边。
<p>
    <img src="3.gif" align="left">
    带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
    <img src="3.gif" align="right">
    带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

66.调整图像尺寸
本例演示如何将图片调整到不同的尺寸。
<img src="2.jpg" width="50" height="50">

<br />

<img src="2.jpg" width="100" height="100">

<br />

<img src="2.jpg" width="200" height="200">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

67.为图片显示替换文本
本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>

<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>
<img src="xzc.gif" alt="向左转" />
<p>如果无法显示图像，将显示"alt" 属性中的文本：</p>
<img src="xzc.gif" alt="向左转" />

68.制作图像链接
本例演示如何将图像作为一个链接使用。
<p>
    您也可以把图像作为链接来使用：
    <a href="test1.html">
        <img border="0" src="xzc.gif" />
    </a>
</p>

69.创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
实例1
<p>
    <img src="eg_merglobe.gif">
</p>
实例2
<p>请点击图像上的星球，把他们放大</p>
<img src="eg_planets.jpg" border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
    <area
    shape="circle"
    coords="180,139,14"
    href="venus.html"
    target="_blank"
    alt="Mercury" />

    <area
    shape="circle"
    coords="129,161,10"
    href ="mercur.html"
    target ="_blank"
    alt="Mercury" />

    <area
    shape="rect"
    coords="0,0,110,260"
    href ="sun.html"
    target ="_blank"
    alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

70.把图像转换为图像映射
本例显示如何把一幅普通的图像设置为图像映射。
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>

<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />

HTML 图像实例的更多相关文章

  1. CVPR2019 | 超越Mask R-CNN！华科开源图像实例分割新方法MS R-CNN

    安妮 乾明 发自 凹非寺 本文转载自量子位(QbitAI) 实习生又立功了! 这一次,亮出好成绩的实习生来自地平线,是一名华中科技大学的硕士生. 他作为第一作者完成的研究Mask Scoring R- ...

  2. 图像实例分割：CenterMask

    图像实例分割:CenterMask CenterMask: single shot instance segmentation with point representation 论文链家: http ...

  3. 手把手教你使用LabVIEW实现Mask R-CNN图像实例分割

    前言 前面给大家介绍了使用LabVIEW工具包实现图像分类,目标检测,今天我们来看一下如何使用LabVIEW实现Mask R-CNN图像实例分割. 一.什么是图像实例分割? 图像实例分割(Instan ...

  4. html5 Canvas处理图像 实例讲解

    最近在学习canvas,canvas有很强大的图像处理功能,下面写一个我的学习总结: canvas常用功能: 1. 绘制矩形.圆形.曲线.组合图形 2. 绘制文本 3.绘制渐变.变形的图形 4. 图片 ...

  5. 一步一步学Silverlight 2系列（32）：图形图像综合实例—“功夫之王”剧照播放

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  6. Why数学图像生成工具

    该软件能够以给定的数学公式及算法生成各种绚烂的数学图像.软件中有两种生成图像的方法: (1)通过一种我自定义的脚本语言生成: 软件中定义一套简单易学的脚本语言,用于描述数学表达式.使用时需要先要将数学 ...

  7. 用python简单处理图片（2）：图像通道\几何变换\裁剪

    一.图像通道 1.彩色图像转灰度图 from PIL import Image import matplotlib.pyplot as plt img=Image.open('d:/ex.jpg') ...

  8. 《学习opencv》笔记——矩阵和图像操作——cvInRange,cvInRangeS,cvInvert and cvMahalonobis

    矩阵和图像的操作 (1)cvInRange函数 其结构 void cvInRange(//提取图像中在阈值中间的部分 const CvArr* src,//目标图像 const CvArr* lowe ...

  9. python matplotlib包图像配色方案

    可选的配色方案: Accent, Accent_r, Blues, Blues_r, BrBG, BrBG_r, BuGn, BuGn_r, BuPu, BuPu_r, CMRmap, CMRmap_ ...

随机推荐

  1. 配置jboss EAP 6.4 数据库连接超时时间

    Environment Red Hat JBoss Enterprise Application Platform (EAP) 6.x 7.x Issue Server throws followin ...

  2. mysql InnoDB引擎索引超过长度限制

    组合索引长度之和大于 767 bytes并无影响,当有某个字段定义长度大于 767 bytes(1000*3)时,仅产生告警,但不影响创建,超长字段会取前 255 字符作为前缀索引,并且组合索引中字段 ...

  3. sha256sum和 md5sum 命令之间的区别

    Short answer: For verifying ISOs, there is no practical difference, use whichever you want, as long ...

  4. Django之views视图函数

    views视图函数属于MTV中逻辑处理的部分视图函数包含着两个对象,HttpRequest对象和HttpResponse对象 一.HttpRequest对象 HttpRequest对象在Django中 ...

  5. 团队作业8-测试与发布(beta阶段)

    小组成员 [组长]金盛昌(201421122043).刘文钊(20142112255).陈笑林(201421122042) 张俊逸(201421122044).陈志建(201421122040).陈金 ...

  6. PyQt5---firstwindow

    # -*- coding:utf-8 -*- ''' Created on Sep 13, 2018 @author: SaShuangYiBing ''' import sys from PyQt5 ...

  7. [BUG] python实例化N次类，调用类函数log会输出N遍的bug 解决办法

    最近再写DOU用例时,采用的是 unittest测试框架,就涉及到将其它所有模块需要全部在一个 .py文件中进行实例化,然后再运行时发现在控制台中同一个日志信息会打印多次(实例化几次,同一消息就会打印 ...

  8. 数据结构习题Pop Sequence的理解----小白笔记^_^

    Pop Sequence(25 分) Given a stack which can keep M numbers at most. Push N numbers in the order of 1, ...

  9. wx.aui.AuiManager部分/布局翻译

    wx.aui.AuiManager wx.aui.AuiManager 是AUI框架类中的主要类 wx.aui.AuiManager管理于指定的wx.Frame相关联的窗口,通过使用窗口的wx.aui ...

  10. js 判断元素是否在列表中

    /** * 使用循环的方式判断一个元素是否存在于一个数组中 * @param {Object} arr 数组 * @param {Object} value 元素值 */ function isInA ...