img显示本地图片使用的是相对路径 如:
img src= ./imgs/002.jpg
开发技巧:在实际开发中,一般会在项目目录下创建一个imgs文件夹,将图片资源都放在里面,方便开发时图片调用。如上面显示的那样,./imgs是找到图片的所在目录,/002.jpg是所要选择的图片。
img显示网页图片使用的是绝对路径 如:
img src= /uploads/allimg/190430/141F45E3-1.png /
img下有许多属性可以选择:
1、alt 表示图片加载错误时的显示内容,方便访问者知道该图片的用途。
如:
img src= ./imgs/001.jpg12 alt= logo
显示结果是:
表示这张图片是一张logo图。
2、align 表示图片在文字中对齐的位置
top顶部对齐,bottom底部对齐,middle居中对齐。默认为底部对齐。
两个悬浮效果 left图片浮动到文字左侧,right图片浮动到文字右侧。
3、通过width和height改变图片的大小
2和3的代码演示如下
p 一张百度logo img src= ./imgs/001.jpg width= 100 / /p p 一张百度logo img src= ./imgs/001.jpg align= top width= 100 / /p p 一张logo img src= ./imgs/002.jpg align= bottom width= 100 /p p 百度logo img src= ./imgs/002.jpg align= middle width= 100 /p p 百度logo img src= ./imgs/002.jpg align= left width= 100 /p p 百度logo img src= ./imgs/002.jpg align= right width= 100 /p
其中图片都是相对路径下的本地图片
4、点击图片,打开另一个链接
p 点击图片打开链接 a href= page1.html title= 点击进入page1界面 img src= ./imgs/001.jpg alt= logo width= 200px align= middle / /a /p
其中 page1.html为另外一个html文档,代码如下:
html head title page1界面 /title /head body p 我是page1 /p /body /html
点击图片就会打开page1.html。
5、图像映射
img src= page.jpg border= 0 usemap= #page alt= pages / map name= page id= page area shape= circle coords= 180,139,14 href = page1.html alt= page1 / area shape= circle coords= 129,161,10 href = page2.html alt= page2 / /map
其中area与map合用,且area在map标签下。img的usemap指向map的name。实现点击图片不同位置,进入page1或page2两个不同的链接。
以上就是 html img标签的使用 的所有内容了,希望会给大家带来帮助吧。
相关推荐:
img属性中alt和title的区别图文详解
html中 img 标签之关于创建图像映射详解
html中为什么不使用img标签来控制图片大小?
以上就是html img标签的使用的详细内容,html教程
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。
新闻热点
疑难解答