您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

HTML 图像

在 html 中,图像由 <img> 定义,<img> 是空,意思是说,它只包含,并且没有闭合 。

html 图像 - 图像 ( <img> ) 和源 ( src )

在 HTML 中,图像由 <img> 定义,请注意:从技术上讲,<img>并不会在网页中插入图像,而是从网页上图像。<img>创建的是被引用图像的占位空间。

<img> 是空,意思是说,它只包含,并且没有闭合

要在上图像,需要使用源 ( src )

src 指 "source",源的值是图像的 URL 地址

<img src=" *url* " alt=" *some_text* ">

URL 指存储图像的位置

浏览器将图像在文档中图像出现的地方

如果你将图像置于两个段落之间,那么浏览器会首先第段落,然后,最后第二段

<img>有两个必需的:src(规定图像的URL)和alt(规定图像的替代文本)。

可选的:

height:定义图像的高度。

width:定义图像的宽度。

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

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

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

HTML 图像 - alt

alt 用来为图像定义一串预备的可替换的文本

替换文本的值是定义的

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本告诉读者她们失去的信息

此时,浏览器将这个替代性的文本而不是图像

为上的图像都替换文本是个好习惯,这样有助于更好的信息,并且对于那些使用纯文本浏览器的人来说是非常有用的

HTML 图像 - 设置图像的

height 与 width 用于设置图像的

值认单位为像素

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

指定图像的高度和宽度的很好的习惯

如果图像指定了高度宽度,加载时就会保留指定的尺寸

如果没有指定的大小,加载时有可能会破坏 HTML 的整体布局

有用的

假如某个 HTML 包含十个图像,那么为了正确这个,需要加载 11 个

加载是需要时,所以我们的建议是:慎用

加载时,要注意插入图像的路径,如果不能正确设置图像的位置,浏览器无法加载,图像就会破碎的

<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也会有这个现象。

至于这里的HTMLalign=”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;虽然能问题,但没从结构上来考虑.可谓治标不治本。 


联系我
置顶