溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹在HTML上插入圖片的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
在HTML中插入圖片的方法有：直接在html代碼上插入、在CSS樣式中插入、在JavaScript中通過給img設置src值來插入圖片、innerHTML插入img屬性來插入圖片
如果一個頁面中僅有文字會顯得很單調，枯燥乏味，但是當我們添加了一些圖片在上面時會顯得好看多了，今天將向大家介紹如何在HTML頁面上插入圖片。
在HTML頁面中插入圖片需要用到html中的<img>標簽
<img src="" alt="">
img代表“圖像”,它是圖像在頁面上顯示。
src代表“來源”它告訴瀏覽器去哪里找圖像，在寫代碼的時候最好將圖片放置在一個文件夾下保存，通過這樣的方式可以通過名稱前面的子目錄名稱來調用圖片
alt代表“文字”告訴瀏覽器如果找不到圖像，就只顯示該文本，或者將鼠標懸停在圖像上就會彈出設置的文字
Web的圖像格式
.gif：是一種簡單的格式，由一系列彩色圖片元素或點，排列成一幅圖片，是動圖
.png：與gif格式類似但它具有部分透明度選項，只支持無損壓縮。
.JPEG：JPEG格式是目前網絡上最流行的圖像格式，是可以把文件壓縮到最小的格式
HTML插入圖片方法
直接在html代碼內插入圖片
<img src="images/1.jpg">
效果圖：
在CSS樣式中插入圖片
<style>
div{
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上插入圖片的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
