這篇文章主要介紹在HTML上插入圖片的方法,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

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

在HTML頁面中插入圖片需要用到html中的<img>標(biāo)簽
<img src="" alt="">
img代表“圖像”,它是圖像在頁面上顯示。
src代表“來源”它告訴瀏覽器去哪里找圖像,在寫代碼的時(shí)候最好將圖片放置在一個(gè)文件夾下保存,通過這樣的方式可以通過名稱前面的子目錄名稱來調(diào)用圖片
alt代表“文字”告訴瀏覽器如果找不到圖像,就只顯示該文本,或者將鼠標(biāo)懸停在圖像上就會彈出設(shè)置的文字
Web的圖像格式
.gif:是一種簡單的格式,由一系列彩色圖片元素或點(diǎn),排列成一幅圖片,是動圖
.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>效果圖:

innerHTML方法插入圖片
<div id="demo"></div>
<script>
var demo=document.ElementById("demo");
demo.innerHTML='<img src="images/4.jpg" width="450px" height="300px">';
</script>效果圖:

以上是在HTML上插入圖片的方法的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前文章:在HTML上插入圖片的方法-創(chuàng)新互聯(lián)
地址分享:http://chinadenli.net/article2/hpjoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容