如果一個頁面中僅有文字會顯得很單調，枯燥乏味，但是當我們添加了一些圖片在上面時會顯得好看多了，今天將向大家介紹如何在HTML頁面上插入圖片。

【推薦課程：HTML課程、JavaScript課程】

在HTML頁面中插入圖片需要用到html中的 img 標簽

 img src= alt= 

img代表“圖像”,它是圖像在頁面上顯示。

src代表“來源”它告訴瀏覽器去哪里找圖像，在寫代碼的時候最好將圖片放置在一個文件夾下保存，通過這樣的方式可以通過名稱前面的子目錄名稱來調用圖片

alt代表“文字”告訴瀏覽器如果找不到圖像，就只顯示該文本，或者將鼠標懸停在圖像上就會彈出設置的文字

Web的圖像格式

.gif：是一種簡單的格式，由一系列彩色圖片元素或點，排列成一幅圖片，是動圖

.png：與gif格式類似但它具有部分透明度選項，只支持無損壓縮。

.JPEG：JPEG格式是目前網絡上最流行的圖像格式，是可以把文件壓縮到最小的格式

HTML插入圖片方法

直接在html代碼內插入圖片

 img src= images/1.jpg 

效果圖：

在CSS樣式中插入圖片

 style width:450px;height: 300px;background-image: url( images/2.jpg ) /style  /head  body  div /div 

效果圖：

利用JavaScript語言插入圖片

 body  img id= demo  script  var demo=document.getElementById( demo  demo.src= images/3.jpg  demo.width= 450  demo.height= 300  /script  /body 

效果圖：

innerHTML方法插入圖片

 div id= demo /div  script  var demo=document.ElementById( demo  demo.innerHTML= img src= images/4.jpg width= 450px height= 300px  /script 

效果圖：

總結：以上就是本篇文章的全部內容了，希望對大家學習有所幫助。

以上就是如何在HTML上插入圖片的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。