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

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