定义和用法：

img元素向网页中嵌入一副图像。

请注意：从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

属性：

<img>标签有两个必需的属性：src属性（规定显示图像的URL）和alt属性（规定图像的替代文本）。

可选的属性：

height:定义图像的高度。

width:定义图像的宽度。

ismap:将图像定义为服务器端图像映射。

longdesc：指向包含长的图像描述文档的URL。

usemap:将图像定义为客户端的图像映射。

图片链接样式
IE默认为紫色2px的边框线
FF默认为蓝色2px的边框线
要清除图片链接样式，一般可以设置
img {
   border:0;
}

text–align是针对块级元素的，让块级元素里面的内容居中。<img>是行内元素，text-align也不能够让他本身居中。text-align应该放在你想要居中的元素的父元素下才有作用。

<img>标签居中：要在<img>标签外面加一个<div>标签。

<div style="text-align:center;>

<img src="#" alt="xc"/>

</div>

<li><img>标签之间有空隙 最终解决办法

解决方法

一、将图片转换为块级对象
即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub
img {display:block;}”。

二、设置图片的垂直对齐方式
即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub
img {vertical-align:top;}”。

三、设置父对象的文字大小为0px
即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

四、改变父对象的属性
如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。

五、设置图片的浮动属性
即在本例中增加一行CSS代码：“#sub img
{float:left;}”。如果要实现图文混排，这种方法是很好的选择。

六、取消图片标签和其父对象的最后一个结束标签之间的空格。
这个方法要强调下，在实际开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过IDE提供代码缩进显示，这必然会让标签和其他标签换行显示，比如说DW的“套用源格式”命令。

原因分析

图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和
font-size，font-family 相关，不一定是 5px），所以设置
vertical-align:top/bottom/text-top/text-bottom
都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。

至于这里的HTML属性align=”center”（对于图片浏览器会处理成align=”middle”），就相当于vertical-align:middle;
所以道理也是一样的，只要vertical-align不取baseline，这个空隙就消失了。

相关信息

IE的显示有几种模式，在html文档的开始部分声明<!DOCTYPE ….>
如果声明为strict模式，ie以w3c的方式显示文档，而w3c的标准里面<img
/>默认是一个inline的标签，除非自己显式的声明为block。

那个空隙是ie针对盒模型默认的line-height和font-size。给img
desplay:block；虽然能解决问题，但没从结构上来考虑.可谓治标不治本。

HTML 与 XHTML 之间的差异

在 HTML 中，<img> 标签没有结束标签。

在 XHTML 中，<img> 标签必须被正确地关闭。

在 HTML 4.01 中，不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。

在 XHTML 1.0 Strict DTD 中，不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。

例子：

1.制作图像链接：

<html>

<body>

<p>

您也可以把图像作为链接来使用：

<a href="/example/html/lastpage.html">

<img border="0" src="/i/eg_buttonnext.gif" />

</a>

</p>

</body>

</html>

2.创建图像地图：

<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>

HTML 图像<img>的更多相关文章

  1. C#中如何调整图像大小

    在本篇文章中,我将介绍如何在C#中来调整你想要的图像大小.要实现这一目标,我们可以采取以下几个步骤: 1.首先要获取你想要调整大小的图像: string path = Server.MapPath(& ...

  2. 基于window7+caffe实现图像艺术风格转换style-transfer

    这个是在去年微博里面非常流行的,在git_hub上的代码是https://github.com/fzliu/style-transfer 比如这是梵高的画 这是你自己的照片 然后你想生成这样 怎么实现 ...

  3. 超全面的.NET GDI+图形图像编程教程

    本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了 ...

  4. git图像化界面GUI的使用

    GIT学习笔记 一.        基础内容 1.git是一个版本控制软件,与svn类似,特点是分布式管理,不需要中间总的服务器,可以增加很多分支. 2.windows下的git叫msysgit,下载 ...

  5. CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能

    CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...

  6. 【.net深呼吸】WPF异步加载大批量图像

    如何在WPF中加载大批量数据,并且不会阻塞UI线程,尤其是加载大量图片时,这活儿一直是很多朋友都相当关注的.世上没有最完美的解决之道,咱们但求相对较优的方案. 经过一些试验和对比,老周找到了一种算是不 ...

  7. 了解HTML图像

    img <img>表示image图像,从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像.<img> 标签创建的是被引用图像的占位空间. [必须 ...

  8. 四种比较简单的图像显著性区域特征提取方法原理及实现-----> AC/HC/LC/FT。

    laviewpbt  2014.8.4 编辑 Email:laviewpbt@sina.com   QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以 ...

  9. 图像抠图算法学习 - Shared Sampling for Real-Time Alpha Matting

    一.序言   陆陆续续的如果累计起来,我估计至少有二十来位左右的朋友加我QQ,向我咨询有关抠图方面的算法,可惜的是,我对这方面之前一直是没有研究过的.除了利用和Photoshop中的魔棒一样的技术或者 ...

  10. 如何快速清除ZBrush画布中多余图像

    ZBrush是一款数字雕刻与绘画软件,它以强大的功能和直观的工作流程彻底改变了整个三维行业.它的简洁化.智能化和人性化的设计无不让众多用户所折服.刚接触它的用户可能会因为找不到相关命令或不熟悉而觉得它 ...

随机推荐

  1. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框

    [自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...

  2. 实用命令dd

    1.命令简介 dd 的主要选项: 指定数字的地方若以下列字符结尾乘以相应的数字: b=512, c=1, k=1024, w=2, xm=number m if=file #输入文件名,缺省为标准输入 ...

  3. 学生各门课程成绩统计SQL语句大全

    学生成绩表(stuscore): 姓名:name 课程:subject 分数:score 学号:stuid 张三 数学 89 1 张三 语文 80 1 张三 英语 70 1 李四 数学 90 2 李四 ...

  4. Android--Retrofit的简单使用（一）

    1,如果不太了解retrofit的同学可以先去官网学习一下简单使用:http://square.github.io/retrofit/,这里我们以一个简单的Get请求的例子来练习一下 2,https: ...

  5. python 练习（一）代码统计工具的实现

    最近部门成立了一个python学习小组,旨在让大家在做项目中开始成长起来,于是老大就给布置了第一个小任务:代码统计工具,具体的需求如下: 需求: . 能够统计指定目录下C++程序的代码行数. . C+ ...

  6. VBA 操作 Excel 生成日期及星期

    直接上代码~~ 1.  在一个 Excel 生成当月或当年指定月份的日期及星期 ' 获取星期的显示 Function disp(i As Integer) Select Case i disp = & ...

  7. CoordinatorLayout 自定义Behavior并不难，由简到难手把手带你飞

    先来看看最终的效果~~ 本文同步至博主的私人博客wing的地方酒馆 嗯..一个是头像上移的 另一个是模仿UC浏览器的. (PД`q.)你不是说!有三款的吗,怎么只有两款!!!! 不要急嘛... 说了从 ...

  8. tp-link便携式路由器固件升级方式

    系统: win-7 32bit 关闭杀毒软件,关闭防火墙(保险起见) 各位从tp-link的官网下载自己对应的固件 http://www.tp-link.com.cn/product/list_por ...

  9. A feature in Netsuite Reports > Financial > Balance Sheet

    最新版本的Customize balance sheet page Left side > Layout > Add Reference Row Then in right side, y ...

  10. 网页设计中常用的19个Web安全字体

    来自http://www.jb51.net 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况 ...