视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
htmlimg标签的使用
2020-11-27 15:27:35 责编:小采
文档

本文详细讲解了html中的图片标签的多种使用功能,在一个html页面中图片肯定是少不了的,html的img标签也很简单很好掌握的,我们一起来看看吧!

img显示本地图片使用的是相对路径 如:

<img src="./imgs/002.jpg">

开发技巧:在实际开发中,一般会在项目目录下创建一个imgs文件夹,将图片资源都放在里面,方便开发时图片调用。如上面显示的那样,./imgs是找到图片的所在目录,/002.jpg是所要选择的图片。

img显示网页图片使用的是绝对路径 如:

<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.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两个不同的链接。

下载本文
显示全文
专题