首页 > 编程 > HTML > 正文

html img标签的使用

2020-03-24 19:09:18
字体:
来源:转载
供稿:网友
本文详细讲解了html中的图片标签的多种使用功能,在一个html页面中图片肯定是少不了的,html的img标签也很简单很好掌握的,我们一起来看看吧!

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教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表