定义和用法：

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. Java Servlet(九)：转发请求与重定向请求区别

    转发: <% pageContext.setAttribute("pageContextAttr", "pageContextAttribute"); r ...

  2. sdutoj 2608 Alice and Bob

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2608 Alice and Bob Time L ...

  3. jQuery选择器和事件

    选择器 常用事件 绑定与解除绑定 事件目标与冒泡 自定义事件

  4. viewdata向view传递匿名类，view该如何遍历？

    //方法中的代码var userInfoList = from p in db.UserInfo select new {UserID=p.ID, UserName = p.UName, UserPw ...

  5. 为什么要加 -moz- -webkit- -ms- -o- ?

    没有别的,为了兼容早期版本,为了解决CSS3标准正式发布以前的遗留问题.

  6. 32、mybatis

    第一章回顾jdbc开发 1)优点:简单易学,上手快,非常灵活构建SQL,效率高 2)缺点:代码繁琐,难以写出高质量的代码(例如:资源的释放,SQL注入安全性等) 开发者既要写业务逻辑,又要写对象的创建 ...

  7. sudo service docker start

    sudo service docker start sudo docker run -t -i ubuntu:14.04 /bin/bash docker ps -l CONTAINER ID IMA ...

  8. LeetCode----66. Plus One(Java)

    package plusOne66; /* Given a non-negative number represented as an array of digits, plus one to the ...

  9. [课程设计]Scrum 1.4 多鱼点餐系统开发进度（点餐页面框架布置）

    Scrum 1.4 多鱼点餐系统开发进度 (点餐页面框架布置) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系 ...

  10. zigbee学习之路(六):Time3(查询方式)

    一.前言 通过上次的学习,相信大家对cc2530单片机的定时器的使用有了一定的了解,今天我们来介绍定时器3的使用,为什么介绍定时器3呢,因为它和定时器4功能是差不多的,所以学会定时器3,就基本掌握了c ...