定义和用法：

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. Learning How To Learn

    1.Practice 2.memory every week for from working memory to long tern memory 3.sleep 4.running promote ...

  2. 关于在archlinux中安装virtualbox

    之前安装的时候具体忘记了,现在重新整理一下安装的过程: 1. 安装virtualbox sudo pacman -S virtualbox 安装的过程中因依赖,需要安装提供host模块的包,这里我们安 ...

  3. Entity FrameWork对有外键关联的数据表的添加操作

    前天做了一个MVC Entity FrameWork项目,遇到有外键关联的数据编辑问题.当你编辑的时候,按照正常的逻辑,把每个字段的数据都对号入座了,然后点击保存按钮,本以为会顺理成章的编辑数据,但是 ...

  4. SQL2005中的事务与锁定（三）- 转载

    ------------------------------------------------------------------------ -- Author : HappyFlyStone  ...

  5. configure.ac:32: error: possibly undefined macro: AC_DEFINE

    在ubuntu 下编译snappy时,在检查依赖关系时,处理autoconf的包时,在相关依赖包都已经安装的情况下,报如下错误,死活不过. configure.ac:32: error: possib ...

  6. HTTP中Get与Post的区别

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认 为:一个URL地址,它用于描述一个网络上的资源,而HTT ...

  7. asp.net 分页-自己写分页控件

    去年就发表过asp.net 分页-利用后台直接生成html分页 ,那种方法只是单纯的实现了分页,基本不能使用,那时就想写个自己的分页控件,无奈能力有限.最近有点时间了,就自己做出了这个分页控件.我承认 ...

  8. 2x2矩阵相乘模版

    由于Unity只有4x4矩阵,今天要做一个2x2矩阵的旋转,居然忘了顺序.故写下作为模版记录. 顺序: 下面是使用其进行旋转的C#代码: public struct Position { public ...

  9. js图片放大镜

    <!doctype html><html><head><meta charset="utf-8"><style>#sma ...

  10. linux mysql导入导出

    linux下导入.导出mysql数据库命令 一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径):1.导出数据和表结构:mysqldump -u用户名 -p密码 数据库名 ...