Java網(wǎng)絡(luò) 1.8 圖片

圖片

能使用的圖片類型

語法

alt 屬性

相對路徑

圖片在文件夾里

圖片在淺一層文件夾里

練習(xí)

能使用的圖片類型

頁面上可以插入的圖片類型是: jpg (jpeg), gif, png, bmp.

不能再網(wǎng)頁中插入的圖片格式是: psd, ai.

語法

HTML 頁面不是直接插入圖片, 而是插入圖片的引用地址, 所以也要把圖片上傳到服務(wù)器上.

插入方法:

1

img 是英語 image “圖片” 的簡寫. src 是英語 source “資源” 的簡寫. src 是 img 標(biāo)簽的屬性, http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529022315_65971.jpg 是這個屬性的值.

這個標(biāo)簽和我們之前學(xué)的都不一樣, 因為這個標(biāo)簽不是 “對兒”. 自封閉標(biāo)簽, 也稱為單標(biāo)簽.

為什么? 原因很簡單, 如果對, 里面就要有內(nèi)容, 表示這給這個內(nèi)容增加語義. 比如:

哈哈哈哈，我是主標(biāo)題啦！！！

1

圖片就是一個圖片, 不需要給什么文字增加語義, 所以單標(biāo)簽就可以了:

1

前面提到的 meta 也是自封閉標(biāo)簽:

1

alt 屬性

alt 屬性:

1

alt 是英語 alternate “替代” 的意思, 就表示不管因為為什么原因. 當(dāng)這個圖片無法被顯示的時候, 出現(xiàn)的替代文字. (有的瀏覽器不支持)

相對路徑

HTML 中插入圖片, 所以現(xiàn)在有兩個文件. 一個 html 文件, 一個是 jpg 文件.

我們關(guān)心的就是這兩個文件的相對位置. 即使這個網(wǎng)站項目, 被用 u 盤拷給別人, 只要相對路徑不變. 圖片一定能夠正常顯示.

圖片在文件夾里

如果 html 頁面和 images 文件夾在同一級. http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529022316_41796.jpg 圖片在 images 文件下, 則:

1

如果在很深的文件夾中, 也不怕. 我們可以一直羅列下去:

1

圖片在淺一層文件夾里

如果 html 文件在 web 文件夾下, 而 3.jpg 和 web 文件夾同一級:

1

如果是上兩級:

1

還可以更為復(fù)雜:

1

上兩級的文件夾中 images 文件夾中的 1 的文件夾中的 http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529022316_41796.jpg.

練習(xí)

有如下文件層次圖:

能在 index.html 頁面中, 插圖圖片 1.png 的語句是?

標(biāo)準(zhǔn)答案:

1

解釋:

現(xiàn)在 document 是最大的文件夾, 里面有兩個文件夾 work 和 photo. work 中有一個文件夾叫做 myweb. myweb 文件里面, 上一級就是 work 文件夾, 上兩級就是 document 文件夾. 通過 document 文件夾當(dāng)做一個中轉(zhuǎn)棧, 進入 photo 文件夾, 看到了 1.png.

Java 網(wǎng)絡(luò)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。