HTML怎么加圖片？

時(shí)間：2024-01-14 09:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-01-14 09:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML怎么加圖片？：再簡(jiǎn)單的問題，可能也有新手小白不會(huì)，丁鹿學(xué)堂勤庸老師保姆式視頻講解在HTML中圖片的添加，字幕內(nèi)容如下：首先我們新建一個(gè)網(wǎng)站目錄website。然后把我們的網(wǎng)站目錄拖到我們的vs code 上面。這時(shí)候用vs code的來(lái)創(chuàng)建我們網(wǎng)站的基本目錄結(jié)構(gòu)。比如說(shuō)點(diǎn)這一個(gè)就是創(chuàng)建一個(gè)目錄，新建文件夾，就是創(chuàng)建一個(gè)文件。那我們創(chuàng)建一個(gè)imgs的文件夾，放我們的網(wǎng)頁(yè)圖片，然后點(diǎn)這個(gè)+，在我們website 的這個(gè)目錄下面，你就要點(diǎn)中website目錄，然后再點(diǎn)添加文件夾c s s 樣式的一個(gè)目錄，再點(diǎn)回到這一個(gè)website 這個(gè)目錄，再點(diǎn)加號(hào)，再創(chuàng)建一個(gè)叫js的目錄。這就是我們網(wǎng)頁(yè)常用常用的一個(gè)目錄結(jié)構(gòu)。三個(gè)目錄分別裝對(duì)應(yīng)的內(nèi)容。 然后我們?cè)僭趙ebsite 的這個(gè)目錄里面，建一個(gè)首頁(yè)叫index.html。我們可以用vs code的快速的生成一個(gè)html結(jié)構(gòu)，直接shift+!，然后選擇第一個(gè)!回車鍵。這時(shí)候他就非?？焖俚纳梢粋€(gè)網(wǎng)頁(yè)的基本結(jié)構(gòu)，就不用我們?cè)偃ナ智谩?注意!我們創(chuàng)建完這個(gè)文件以后，要習(xí)慣性的保存按ctrl+s 保存我們的創(chuàng)建的這個(gè)代碼。如果你不保存，那你的電腦一關(guān)掉，或者你把這個(gè)文件關(guān)掉，你的代碼就沒有。所以說(shuō)要習(xí)慣性的按ctrl+s 保存我們編寫的這個(gè)代碼。我們?cè)谶@個(gè)文件夾里，imgs的文件夾里放一張圖片，也可你可以直接在這個(gè)目錄里拖一張圖片進(jìn)去，這樣我們imgs文件夾就有一張圖片了。 我們引入圖片是用標(biāo)簽,然后他有一個(gè)叫 src 的屬性。就可以引入我們的圖片，這個(gè)img的標(biāo)簽它是單行標(biāo)簽。所以說(shuō)在標(biāo)簽內(nèi)結(jié)尾加一個(gè) /，表示它的結(jié)束。然后src 就是圖片的一個(gè)地址，我們圖片是在這個(gè)imgs文件夾下面的logo.png。所以說(shuō)我們把這個(gè)圖片的路徑給他寫上就可以了。imgs是文件夾 / 下面的logo.png。我們安裝了插件以后，自動(dòng)都有提醒我們的一個(gè)功能，我們就把然后ctrl+s 保存,右鍵點(diǎn)open in live server。這時(shí)候他就自動(dòng)在我們的瀏覽器打開了我們這一個(gè)網(wǎng)頁(yè)，并且出現(xiàn)了這一個(gè)圖片。 這個(gè)src 就是圖片的一個(gè)地址，這是本地圖片的地址。如果說(shuō)你這個(gè)圖片名稱錯(cuò)了，他沒找到這一張圖片，這時(shí)候圖片就顯示成這種一個(gè)圖片沒出來(lái)的一個(gè)圖標(biāo)。 他還有一個(gè)叫alt的屬性，alt的屬性就是當(dāng)圖片顯示不出來(lái)的時(shí)候，就顯示alt 里面的文字。我們ctrl+s 保存，然后刷新點(diǎn)這一個(gè)圓圈，刷新一下。這時(shí)候你看圖片沒有顯示出來(lái)，就顯示了這個(gè)alt的文字。如果說(shuō)你的圖片是正確的，沒有寫錯(cuò)，那它顯示圖片的話就不會(huì)顯示這個(gè)alt的內(nèi)容。 我們src 屬性除了給本地的圖片地址，還可以給一個(gè)網(wǎng)絡(luò)的圖片地址。比如說(shuō)在網(wǎng)上有這么一張圖片，我們右鍵copy img address(復(fù)制圖片地址）。然后我們?cè)僬迟N到src 的這個(gè)地方，這就是一個(gè)網(wǎng)絡(luò)圖片的地址。當(dāng)我們ctrl+s保存再去刷新一下。然后我們進(jìn)到這里就能看見這個(gè)圖片顯示出來(lái)了。