Rumah > hujung hadapan web > html tutorial > html img标签的使用

html img标签的使用

韦小宝
Lepaskan: 2017-12-02 10:26:27
asal
3467 orang telah melayarinya

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

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

<img src="./imgs/002.jpg">
Salin selepas log masuk

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

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

<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"/>
Salin selepas log masuk

img下有许多属性可以选择:

1、alt 表示图片加载错误时的显示内容,方便访问者知道该图片的用途。

如:

<img src="./imgs/001.jpg12" alt="logo">
Salin selepas log masuk

显示结果是:

表示这张图片是一张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>
Salin selepas log masuk

其中图片都是相对路径下的本地图片

4、点击图片,打开另一个链接


<p>点击图片打开链接 <a href="page1.html" title="点击进入page1界面"> <img src="./imgs/001.jpg" alt="logo" width="200px" align="middle"/></a></p>
Salin selepas log masuk

其中 page1.html为另外一个html文档,代码如下:

<html>
<head>
    <title>page1界面</title>
</head>
<body>
    <p>我是page1</p>
</body>
</html>
Salin selepas log masuk


点击图片就会打开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>
Salin selepas log masuk

其中area与map合用,且area在map标签下。img的usemap指向map的name。实现点击图片不同位置,进入page1或page2两个不同的链接。

以上就是 html img标签的使用 的所有内容了,希望会给大家带来帮助吧。

相关推荐:

img属性中alt和title的区别图文详解

html中标签之关于创建图像映射详解

html中为什么不使用img标签来控制图片大小?

Atas ialah kandungan terperinci html img标签的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan