明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html img標簽的使用

發(fā)表時間：2024-05-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本文詳細講解了html中的圖片標簽的多種使用功能，在一個html頁面中圖片肯定是少不了的，html的img標簽也很簡單很好掌握的，我們一起來看看吧！img顯示本地圖片使用的是相對路徑 如：<img src="./imgs/002.jpg">開發(fā)技巧：在實際開發(fā)中，一...
本文詳細講解了html中的圖片標簽的多種使用功能，在一個html頁面中圖片肯定是少不了的，html的img標簽也很簡單很好掌握的，我們一起來看看吧！

img顯示本地圖片使用的是相對路徑 如：

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

開發(fā)技巧：在實際開發(fā)中，一般會在項目目錄下創(chuàng)建一個imgs文件夾，將圖片資源都放在里面，方便開發(fā)時圖片調(diào)用。如上面顯示的那樣，./imgs是找到圖片的所在目錄，/002.jpg是所要選擇的圖片。

img顯示網(wǎng)頁圖片使用的是絕對路徑 如：

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

img下有許多屬性可以選擇：

1、alt 表示圖片加載錯誤時的顯示內(nèi)容，方便訪問者知道該圖片的用途。

如：

<img src="./imgs/001.jpg12" alt="logo">

顯示結(jié)果是：

表示這張圖片是一張logo圖。

2、align 表示圖片在文字中對齊的位置

top頂部對齊，bottom底部對齊，middle居中對齊。默認為底部對齊。

兩個懸浮效果 left圖片浮動到文字左側(cè)，right圖片浮動到文字右側(cè)。

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。實現(xiàn)點擊圖片不同位置，進入page1或page2兩個不同的鏈接。

以上就是 html img標簽的使用 的所有內(nèi)容了，希望會給大家?guī)韼椭伞?/p>

相關(guān)推薦：

img屬性中alt和title的區(qū)別圖文詳解

html中<img>標簽之關(guān)于創(chuàng)建圖像映射詳解

html中為什么不使用img標簽來控制圖片大�。�

以上就是html img標簽的使用的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。