• 欢迎访问故纵博客网,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站兼容其他浏览器.
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏极客公园吧

WEB – html 图像标签(1)

HTML wyoq 9个月前 (02-20) 73次浏览 已收录 0个评论

HTML 图像是通过<img> 标签来定义的。图像的名称和尺寸是以属性的形式提供的,添加动态图片和添加静态图片格式是一样的,只是图像文件格式可能会有所不同。注意:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。通过在 <a> 标签中嵌套 <img> 标签,可以给图像添加到另一个文档的链接,浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。在 HTML 中,<img> 标签没有结束标签。<img src=”images/head.gif” width=”90″ height=”90″ alt=”替代文本” title=”图片描述”>  <img> 标签有两个必需的属性:src 和 alt。 要在页面上显示图像,就需要使用源属性(src),src 指 “source(来源)”,源属性的值是图像的 URL 地址,URL 指存储图像的位置。如果从另一个文件夹中添加图像,需要选择图片的路径:<img src=”D/images/logo.jpg”>。如果从另一个网站中添加图像,需要选择网站图片的路径,假如名为 “head.gif” 的图像位于 http://www.demo.com 的 images 目录中,那么其 URL 为 http://www.demo.com/images/head.gif。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。  注意:title 属性用于把鼠标移动到图片上时显示文字信息,只有在重要的图片或者网站标志 LOGO 上加此属性。width 和 height 属性用于设置图像的高度与宽度。属性值默认单位为像素:px。指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏 HTML 页面的整体布局。注意:假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件,加载图片是需要时间的,在加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。  ismap 属性是一个布尔属性,可直接使用,用于将图像规定为服务器端图像映射,图像映射指的是带有可点击区域的图像。usemap 属性值为 #mapname 用于将图像定义为客户器端图像映射。HTML5 中增加了一个 新属性 crossorigin 值为 anonymous、use-credentials 用于设置图像的跨域属性。  在文字中插入图像,需要使用 CSS 定义,图像需要与文字底部对齐则定义为:.img{vertical-align:bottom},如果这里不设置的话图像会与文字底部会有一点距离。图像需要与文字中间对齐则设置为:.img{vertical-align:middle}。图像需要与文字顶部对齐则设置为-:.img{vertical-align:top}。  vertical-align 这个属性的默认值是 baseline(基线),插入的 img 元素会放置在父元素的基线上,由于图片撑起了高度,所以文字下移。其实并不是文字下移,而是图像的高度与文字不同,就像鹤立鸡群。vertical-align 是“垂直的”+“对齐”的意思,用于设置元素的垂直排列的,多用在表格中,用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐,所有浏览器都支持 vertical-align 属性。  它的值比较多:    baseline:基线,默认值。元素放置在父元素的基线上。    sub:垂直对齐文本的下标。    sup:垂直对齐文本的上标。    top:把元素的顶端与行中最高元素的顶端对齐。    text-top:把元素的顶端与父元素字体的顶端对齐。    middle:把此元素放置在父元素的中部。    bottom:把元素的顶端与行中最低的元素的顶端对齐。    text-bottom:将支持 valign 特性的对象的文本与对象底端对齐。    length:用长度值指定由基线算起的偏移量,可以为负值。基线对于数值来说为 0。    percentage(%):用百分比指定由基线算起的偏移量,可以为负值,基线对于百分数来说就是 0%。  vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值,这会使元素降低而不是升高。在表格单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。valign 用来定义表格的对齐方式,valign 代表行的垂直对齐方式,(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))。valign 可以通俗的理解为上中下,而和 align 的区别是: align 为左中右,用于设置文本的对齐方式,text-align:center 居中,text-align:left 居左,text-align:right 居右。  定义图像在文字中的位置也可以将底外边距设置为负值,强行设置,假如图像的高度为 90px,则可定义为:.img1{margin-bottom:-45px;},也就是图像距离底部缩进 45 像素。像素不同可以定义其处在不同的位置,但是这样设置会增加本行的高度。不建议这样定义,但可用在特殊地方。   <map> 标签定义图像地图。<area> 标签定义图像地图中的可点击区域。可用于创建图像映射,使其带有可供点击区域的图像地图,其中的每个区域都是一个超级链接。  <map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。<img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以应同时向 <map> 添加 id 和 name 属性。注意: 在 HTML5 中, 如果 id 属性在 <map> 标签中指定, 则必须同样指定 name 属性。name 属性用于为 image-map 规定名称,必需的属性。  <area> 标签定义图像映射内部的区域。注意:<area> 元素永远嵌套在 <map> 元素内部。<img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联,以创建图像与映射之间的关系。在 HTML 中,<area> 标签没有结束标签。  <area> 标签属性,href 属性规定区域的目标 URL。alt 属性规定区域的替代文本,如果使用 href 属性,则该属性是必需的。coords 属性值为 coordinates 规定区域的坐标。shape 属性值为(default(默认)、circle、rect、poly)规定区域的形状。target 属性规定在何处打开目标 URL。media 属性规定目标 URL 是为何种媒介/设备优化的,默认为:all。在 HTML5 中增加了一个新属性 rel ,他的值为(alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag))规定当前文档与目标 URL 之间的关系。


故纵博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WEB – html 图像标签(1)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址