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

如何在HTML上插入圖片

發(fā)表時(shí)間：2023-08-28 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]在HTML中插入圖片的方法有：直接在html代碼上插入、在CSS樣式中插入、在JavaScript中通過給img設(shè)置src值來插入圖片、innerHTML插入img屬性來插入圖片如果一個(gè)頁面中僅有文字會(huì)顯得很單調(diào)，枯燥乏味，但是當(dāng)我們添加了一些圖片在上面時(shí)會(huì)顯得好看多了，今天將向大家介紹如何在HT...
在HTML中插入圖片的方法有：直接在html代碼上插入、在CSS樣式中插入、在JavaScript中通過給img設(shè)置src值來插入圖片、innerHTML插入img屬性來插入圖片

如果一個(gè)頁面中僅有文字會(huì)顯得很單調(diào)，枯燥乏味，但是當(dāng)我們添加了一些圖片在上面時(shí)會(huì)顯得好看多了，今天將向大家介紹如何在HTML頁面上插入圖片。

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

在HTML頁面中插入圖片需要用到html中的<img>標(biāo)簽

<img src="" alt="">

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

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

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

Web的圖像格式

.gif：是一種簡單的格式，由一系列彩色圖片元素或點(diǎn)，排列成一幅圖片，是動(dòng)圖

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

.JPEG：JPEG格式是目前網(wǎng)絡(luò)上最流行的圖像格式，是可以把文件壓縮到最小的格式

HTML插入圖片方法

直接在html代碼內(nèi)插入圖片

<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>

效果圖：

Image 5.jpg

innerHTML方法插入圖片

<div id="demo"></div>
<script>
	var demo=document.ElementById("demo");
	demo.innerHTML='<img src="images/4.jpg" width="450px" height="300px">';
</script>

效果圖：

Image 7.jpg

總結(jié)：以上就是本篇文章的全部內(nèi)容了，希望對(duì)大家學(xué)習(xí)有所幫助。

以上就是如何在HTML上插入圖片的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


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