HTML 图像<img>

定义和用法:

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>
时间: 2024-08-30 13:31:00

HTML 图像<img>的相关文章

mp4网页播放代码,有声音无图像的解决办法~

mp4网页播放代码,有声音无图像的解决办法~ 关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github :https://github.com/videojs/video.js/ demo:http://www.videojs.com/downloads/video-js-4.12.5.zip 使用方法: ①引入文件:指派flash播放的swf文件 <link href="//example.com/p

Halcon学习之三:有关图像通道的函数

黑白摄像机会返回每个像素所对应的能量采用结果,这些结果组成了一幅单通道灰度值图像,而对于RGB彩色摄像机,它将返回每个像素所对应的三个采样结果,也就是一幅三通道图像.下面这些是与图像通道有关的函数: 1.access_channel ( MultiChannelImage : Image : Channel : ) 获取多通道图像MultiChannelImage的Channel通道的图像Image. 2.append_channel ( MultiChannelImage, Image : I

Halcon学习之六:获取Image图像中Region区域的特征参数

area_center_gray ( Regions, Image : : : Area, Row, Column )    计算Image图像中Region区域的面积Area和重心(Row,Column). cooc_feature_image ( Regions, Image : : LdGray, Direction : Energy,Correlation, Homogeneity, Contrast )   计算共生矩阵和推导出灰度特征值 Direction:灰度共生矩阵计算的方向  

数字图像处理,图像锐化算法的C++实现

http://blog.csdn.net/ebowtang/article/details/38961399 之前一段我们提到的算法都是和平滑有关, 经过平滑算法之后, 图像锐度降低, 降低到一定程度, 就变成了模糊. 今天我们反其道行之, 我们看看锐化是怎么做的. 这里的锐化, 还是的从平滑谈开去.我们先来观察原来的图像和平滑图像的区别: 原图 raw: 模糊图 blur: _________________________________________________________ 源图

【内存优化】加载一张图像资源到底占据多少内存

0.内容概览 1. 简介 2. 问题 3. 概念描述 4. 具体分析 5. 总结 6. 参考文档 1.简介 Android中经常要通过ImageView进行图片资源显示.在加载图片时,首先要考虑的两个因素就是体验问题和性能问题. 其中,体验问题是指图片显示的是否正确(例如Universal-Image-Loader在适配Adapter图片资源时会导致图片显示错位),分辨率是否合适等.而体验问题主要是指图片加载速度,以及更加重要的图片加载的内存占用问题.本文重点介绍ImageView加载图片中的内

什么是图像 -- opencv基础

opencv基础篇--到底什么是图像 什么是图像?英语中有两个单词来形容图像,一个是picture,一个是image.这两者虽然是形容同一个东西,但却又有着区别.picture代表实而有物的真实图像:而image代表着计算机中存储的图像,也代表想象中的图像. 而我们更多研究的便是image,计算机图像从广义地可分为矢量图和像素图(位图).矢量图,是由一系列计算机指令描述和记录的一幅图,一幅图可以解为一系列由点.线.面等组成的子图.像素图,则是由很多个点组成的,每个点都是由二进制数据来描述和存储其

画图软件中调整图像的大小

在打开Windows附件的画图软件时,有时候截屏.或者其它图形粘贴的大小不合式.需要调整图像的大小. 画图软件有两个界面可调整:内界面是蓝色背景中的白色矩形,外界面是画图软件的边框.内界面固定在边框内,但是长.宽可以通过鼠标拉伸. 拉伸时,鼠标为从右下至左上的斜线型.调整内界面才能调整图像的大小. 如果内界面和外界面边界基本重合,则需要将进度条向右下角汇聚,直至出现内边界的右下"角".从这个角出发,将内边界从下往上.从右往左 拉动,可以发现内边界能移动.通常,在内边界和外边界之间都保存

二维图像到二维屏幕的投影 用例

说明 在默认的2D渲染中,渲染的X,Y轴的范围都是从[-1, 1],屏幕的中心点(0,0),所以鼠标点击的坐标,必须转换成世界地理坐标系,在2D环境下,默认Z轴坐标为0.0 假设屏幕宽800,高4800 屏幕坐标 地理坐标 左上角 0,0 -1,1 左下角  0,480 -1,-1 右上角  800,0           1,1 右下角  800,480         1,-1 现在通过gluOrtho2D函数将二维图像到二维屏幕上的投影,将坐标移动到左下角,方向刚好和屏幕坐标的Y轴相反 代

OpenCV与EmguCV中的图像轮廓提取

轮廓是图像中表示边界的一系列点的集合. 虽然边缘检测算法可以根据像素间的差异检查出轮廓边界的像素,但是它并没有把轮廓做为一个整体表示出来.所以下一步工作是把这些边缘检测出来的像素组装成轮廓. openCV中可以用findContours()函数来从二值图像中提取轮廓. openCV中一般用序列来存储轮廓信息.序列中的每一个元素是曲线中一个点的位置. 函数findContours()从二值图像中寻找轮廓.findContours()处理的图像可以是Canny()后得到的有边缘像素的的图像,也可以是

Opencv图像识别从零到精通(7)----图像平移、旋转、镜像

根据vc6.0c++的学习经验,如果可以很好的自己编程,让图像进行平移旋转这些操作,那么就好像能够清楚的看见图像的内部结构当然这里你怎么访问像素,这个可以自己选一种适合的,最多的是ptr指针,at也是挺多的.看着很简单的变换,可以对图像处理上手的更快,当然对于旋转可能就稍微i难了一点,不过opencv提供了resize(0,remap()等这样的函数,可以方便的让我们进行学习-特别是旋转的时候,有很多的变换,你可以任意旋转一个角度,也可能一直旋转,当然还可以保持图像大小不变的旋转和大小变换的旋转