圖文詳解HTML頁面中新增圖片的三種方法
- yulia原創
- 2018-10-08 10:24:5933633瀏覽
在頁面佈局時，經常需要在頁面中插入圖片，那你知道如何在HTML中加入圖片嗎？這篇文章就跟大家介紹HTML頁面中插入圖片的三種方法，有興趣的朋友可以參考一下，希望對你有幫助。
方法一、用HTML中的img標籤新增圖片
最簡單，最常用的就是直接使用img標籤，可以依照需求設定圖片的大小，程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="img/picture1.jpg"/ style="max-width:90%" height="180px" alt="圖文詳解HTML頁面中新增圖片的三種方法" > </body> </html>
效果圖：
#方法二、用JavaScript建立一個img元素來匯入圖片
先建立一個img元素，再設定這個img元素的路徑，圖片長和寬，最後將其插入到頁面中，程式碼如下：
<script type="text/javascript">
var Image1 = document.createElement("img");
Image1.src = "img/picture1.jpg";
Image1.width = 300;
Image1.height = 180;
document.body.appendChild(Image1);
</script>方法三、用JavaScript中的innerHTML動態插入圖片
還是使用JavaScript中的方法，實質和方法二類似，只是寫法不一樣，創建img元素然後添加到HTML頁面，程式碼如下：
<script type="text/javascript"> document.body.innerHTML = '<img src="img/picture1.jpg" style="max-width:90%" style="max-width:90%" / alt="圖文詳解HTML頁面中新增圖片的三種方法" >'; </script>
圖片效果和方法一一樣。
以上介紹了在HTML頁面中新增圖片的三種方法，一般我們都會直接使用img標籤新增圖片，但有時也會使用JavaScript動態插入圖片，具體選擇什麼方法，看項目需要。小白可以自己嘗試，希望可以幫助你！
以上是圖文詳解HTML頁面中新增圖片的三種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：html如何連接外部css檔案？下一篇：html如何連接外部css檔案？