整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例
如何插入圖像：
<imgsrc="smiley-2.gif"alt="Smiley face"width="42"height="42">
瀏覽器支持
所有主流瀏覽器都支持 <img> 標簽。
標簽定義及使用說明
<img> 標簽定義 HTML 頁面中的圖像。
<img> 標簽有兩個必需的屬性：src 和 alt。
注釋：從技術上講，圖像并不會插入 HTML 頁面中，而是鏈接到 HTML 頁面上。<img> 標簽的作用是為被引用的圖像創建占位符。
提示：通過在 <a> 標簽中嵌套 <img> 標簽，給圖像添加到另一個文檔的鏈接。
HTML 4.01 與 HTML5之間的差異
HTML5 中不支持以下屬性：align、border、hspace、longdesc、vspace。
在 HTML 4.01 中，以下屬性：align、border、hspace、vspace 已廢棄。
HTML 與 XHTML 之間的差異
在 HTML 中，<img> 標簽沒有結束標簽。
在 XHTML 中，<img> 標簽必須被正確地關閉。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| align | topbottommiddleleftright | HTML5 不支持。HTML 4.01 已廢棄。 規定如何根據周圍的文本來排列圖像。 |
| alt | text | 規定圖像的替代文本。 |
| border | pixels | HTML5 不支持。HTML 4.01 已廢棄。 規定圖像周圍的邊框。 |
| crossoriginNew | anonymous use-credentials | 設置圖像的跨域屬性 |
| height | pixels | 規定圖像的高度。 |
| hspace | pixels | HTML5 不支持。HTML 4.01 已廢棄。 規定圖像左側和右側的空白。 |
| ismap | ismap | 將圖像規定為服務器端圖像映射。 |
| longdesc | URL | HTML5 不支持。HTML 4.01 已廢棄。 指向包含長的圖像描述文檔的 URL。 |
| src | URL | 規定顯示圖像的 URL。 |
| usemap | #mapname | 將圖像定義為客戶器端圖像映射。 |
| vspace | pixels | HTML5 不支持。HTML 4.01 已廢棄。 規定圖像頂部和底部的空白。 |
| width | pixels | 規定圖像的寬度。 |
全局屬性
<img> 標簽支持 HTML 的全局屬性。
事件屬性
<img> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
我們平時在瀏覽網站的過程中如果只有文字的話難免會有些太單調了，并且看文字多了眼睛也會比較難受，這時我們想要讓我們的網頁更漂亮更吸引人眼球，那么肯定少不了精美的圖片來進行點綴，這就用到了今天我要教給大家的圖像標簽img。
src：圖片的路徑 這個是必須要有的
title：當我們把鼠標移動到圖片上展示的文本內容
alt：當圖片的路徑錯誤或圖片有問題時瀏覽器無法識別渲染的情況下展示的文本內容
width：設置圖片的寬度
height：設置圖片的高度
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖像標簽</title> </head> <body> <pre> ../:代表上一級目錄 ../../：上上級目錄 當前目錄中的文件夾下使用：文件夾名稱/圖片名稱 上n級目錄下的n級文件夾：n個../+n個文件夾的名稱直到找到圖片文件為止 </pre> <img src="奶茶妹妹.png" width="500" height="300" title="這是同一個目錄下的圖片"><br> <img src="" alt="對不起，圖片走丟了"> <img src="img/章澤天.png" title="這是同一目錄中文件夾下的圖片"><img src="../田馥甄.png" width="350" height="300" title="這是上一級目錄中的圖片"> <img src="../img/高圓圓.png" title="這是上級目錄中某個文件夾下的圖片"> </body> </html> |
瀏覽器預覽效果圖
以上就是img圖片標簽的簡單應用
常用的圖像格式—GIF，PNG，JPG
圖像標記<img />
HTML網頁中任何元素的實現都要依靠HTML標記，要想在網頁中顯示圖像就需要使用圖像標記，接下來將詳細介紹圖像標記以及和他相關的屬性。其基本語法格式如下：
<img src="圖像URL" />
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標記的必需屬性。
相對路徑
相對路徑不帶有盤符，通常是以HTML網頁文件為起點，通過層級關系描述目標圖像的位置。
例如：
<img src="img/logo.gif" alt="傳智播客-專業的java培訓,.net培訓,php培訓,網頁培訓,平面培訓,iOS培訓機構" />
相對路徑設置分為以下三種：
圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。
圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。
圖像文件位于html文件的上一級文件夾：在文件名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推，如<img src="../logo.gif" />。
絕對路徑
絕對路徑一般是指帶有盤符的路徑。
例如：
“D:\HTML+CSS網頁制作\chapter02\img\logo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/logo.gif”。
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
原文鏈接：https://blog.csdn.net/dubaiqaq/article/details/103500345
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
