HTML 是網站制作中的基本語言,也是了解網絡編程的第一步。其中,設置圖片的 src 屬性也是非常重要的一個知識點。下面我們來一起學習一下。
一個 img 標簽可以用來在網頁上顯示圖片。其中,src 屬性用來指定圖片資源的 URL(統一資源定位符)。如下所示:
<img src="image.jpg">
在這里,我們將圖片文件名設為 “image.jpg”,它必須和 HTML 文件在相同的目錄下。如果圖片文件存放的路徑和 HTML 文件不在同一個目錄下,則可以使用相對路徑或絕對路徑。相對路徑是指相對于 HTML 文件的路徑,而絕對路徑則是完整的 URI。如下所示:
<img src="../images/image.jpg"> <!-- 相對路徑 -->
<img src="https://example.com/image.jpg"> <!-- 絕對路徑 -->
值得注意的是,當圖片文件沒有找到時,圖片標簽將展示一個“無法顯示圖像”的圖標(大多數瀏覽器如此)。為了提高用戶體驗,我們可以給這個標簽添加一個 alt 屬性,如下所示:
<img src="image.jpg" alt="一只狗狗">
這樣,當用戶無法查看圖片時,瀏覽器就會顯示出 alt 屬性的文本,讓用戶了解圖片的內容。
綜上所述,設置圖片的 src 屬性是網頁制作中的基本操作之一。在實踐中,我們還可以通過 CSS、JavaScript 等技術來添醋這些標簽,讓網站更加生動、吸引人。