免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

在HTML上插入圖片的方法-創新互聯

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

創新互聯是專業的西區網站建設公司,西區接單;提供成都網站設計、成都網站制作,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行西區網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

在HTML中插入圖片的方法有:直接在html代碼上插入、在CSS樣式中插入、在JavaScript中通過給img設置src值來插入圖片、innerHTML插入img屬性來插入圖片

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

在HTML上插入圖片的方法

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

<img src="" alt="">

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

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

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

Web的圖像格式

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

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

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

HTML插入圖片方法

直接在html代碼內插入圖片

<img src="images/1.jpg">

效果圖:

在HTML上插入圖片的方法

在CSS樣式中插入圖片

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

效果圖:

在HTML上插入圖片的方法

利用JavaScript語言插入圖片

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

效果圖:

在HTML上插入圖片的方法

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上插入圖片的方法的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創新互聯行業資訊頻道!

另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。

當前文章:在HTML上插入圖片的方法-創新互聯
地址分享:http://m.newbst.com/article2/hpjoc.html

成都網站建設公司_創新互聯,為您提供關鍵詞優化、品牌網站設計、品牌網站建設、網站內鏈、響應式網站、自適應網站

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都網頁設計公司