html img標(biāo)簽的使用
發(fā)表時(shí)間：2023-12-24 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本文詳細(xì)講解了html中的圖片標(biāo)簽的多種使用功能，在一個(gè)html頁(yè)面中圖片肯定是少不了的，html的img標(biāo)簽也很簡(jiǎn)單很好掌握的，我們一起來(lái)看看吧！img顯示本地圖片使用的是相對(duì)路徑 如：<img src="./imgs/002.jpg">開發(fā)技巧：在實(shí)際開發(fā)中，一...
本文詳細(xì)講解了
html中的
圖片標(biāo)簽的多種使用功能，在一個(gè)
html頁(yè)面中圖片肯定是少不了的，
html的
img標(biāo)簽也很簡(jiǎn)單很好掌握的，我們一起來(lái)看看吧！
img顯示本地圖片使用的是相對(duì)路徑 如：
<img src="./imgs/002.jpg">
開發(fā)技巧：在實(shí)際開發(fā)中，一般會(huì)在項(xiàng)目目錄下創(chuàng)建一個(gè)imgs文件夾，將圖片資源都放在里面，方便開發(fā)時(shí)圖片調(diào)用。如上面顯示的那樣，./imgs是找到圖片的所在目錄，/002.jpg是所要選擇的圖片。
img顯示網(wǎng)頁(yè)圖片使用的是絕對(duì)路徑 如：
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"/>
img下有許多屬性可以選擇：
1、alt 表示圖片加載錯(cuò)誤時(shí)的顯示內(nèi)容，方便訪問者知道該圖片的用途。
如：
<img src="./imgs/001.jpg12" alt="logo">
顯示結(jié)果是：
表示這張圖片是一張logo圖。
2、align 表示圖片在文字中對(duì)齊的位置
top頂部對(duì)齊，bottom底部對(duì)齊，middle居中對(duì)齊。默認(rèn)為底部對(duì)齊。
兩個(gè)懸浮效果 left圖片浮動(dòng)到文字左側(cè)，right圖片浮動(dòng)到文字右側(cè)。
3、通過(guò)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>
其中圖片都是相對(duì)路徑下的本地圖片
4、點(diǎn)擊圖片，打開另一個(gè)鏈接
<p>點(diǎn)擊圖片打開鏈接 <a href="page1.html" title="點(diǎn)擊進(jìn)入page1界面"> <img src="./imgs/001.jpg" alt="logo" width="200px" align="middle"/></a></p>
其中 page1.html為另外一個(gè)html文檔，代碼如下：
<html>
<head>
<title>page1界面</title>
</head>
<body>
<p>我是page1</p>
</body>
</html>
點(diǎn)擊圖片就會(huì)打開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標(biāo)簽下。img的usemap指向map的name。實(shí)現(xiàn)點(diǎn)擊圖片不同位置，進(jìn)入page1或page2兩個(gè)不同的鏈接。
以上就是 html img標(biāo)簽的使用 的所有內(nèi)容了，希望會(huì)給大家?guī)?lái)幫助吧。
相關(guān)推薦：
img屬性中alt和title的區(qū)別圖文詳解
html中<img>標(biāo)簽之關(guān)于創(chuàng)建圖像映射詳解
html中為什么不使用img標(biāo)簽來(lái)控制圖片大小？
以上就是html img標(biāo)簽的使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
