HTML 程式札記 : <img> 圖片

閱讀時間約 2 分鐘

在網頁設計中,圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片,包括基本語法、屬性設定等,幫助你更好的在網頁中使用圖片。

HTML 圖片基本語法

HTML中插入圖片主要是通過 <img> 標籤來實現。以下是一個基本的例子:

<img src="image.jpg" alt="描述文字" title="懸停時顯示的文字">
  • src 屬性指定了圖片的路徑和檔名。
  • alt 屬性提供了圖片的替代文字,當圖片無法顯示時會出現。
  • title 屬性可以在滑鼠懸停圖片時顯示一段文字

設定圖片尺寸

可以通過 widthheight 屬性來設定圖片的寬度和高度:

<img src="image.jpg" alt="描述文字" width="500" height="600">

figure、figcaption 標籤

<figure> 用於將圖片與其他內容分開,<figcaption> 則提供圖片的說明文字。

<figure>
<img src="image.jpg" alt="描述文字">
<figcaption>這是圖片的說明文字</figcaption>
</figure>

圖片懶加載

懶加載是一種優化技術,只有當用戶滾動到圖片時,圖片才會加載。這可以通過 JavaScript 實現,或在HTML5中,可以使用loading屬性。

<img src="image.jpg" alt="描述性文字" loading="lazy">

圖片 SEO 優化建議

為了提升網頁的SEO表現和使用者體驗,請遵循以下幾點建議:

  • 替代文字(Alt Text):確保每個圖片都有 alt 屬性,這有助於在圖片無法加載時提供信息。
  • 圖片大小:適當的圖片大小可以加快頁面加載速度,提升用戶體驗。
  • 描述性檔名和路徑:使用描述性的檔名和組織良好的資料夾結構,有助於搜索引擎理解圖片內容。

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
HTML 表單扮演著收集用戶資訊的重要角色。無論是登入頁面、註冊表、問卷調查,或是任何需要用戶輸入的場景,都離不開 HTML 表單。本文將帶你快速了解 HTML 表單的基礎知識,包括表單的結構、元素及其驗證方式。
在網頁開發中,HTML 表格是展示資料的一種重要方式。本文將介紹HTML表格的基本結構和合併單元格,並通過實際範例幫助你理解。
無論是跳轉到另一個網頁,還是在同一頁面內導航,HTML 連結都扮演著關鍵角色。本文將簡單的介紹 HTML 連結的基礎語法和使用方法。
在網頁設計中,列表是基本且重要的元素之一。透過 HTML 列表,我們能夠提高網頁內容的可讀性。本文將帶你了解 HTML 中的列表類型,以及它們的使用方式。
本文將介紹 HTML 中的標題、段落、文本格式化、引用和註釋,這些文本標籤有助於建立一個結構良好的網站。
HTML 表單扮演著收集用戶資訊的重要角色。無論是登入頁面、註冊表、問卷調查,或是任何需要用戶輸入的場景,都離不開 HTML 表單。本文將帶你快速了解 HTML 表單的基礎知識,包括表單的結構、元素及其驗證方式。
在網頁開發中,HTML 表格是展示資料的一種重要方式。本文將介紹HTML表格的基本結構和合併單元格,並通過實際範例幫助你理解。
無論是跳轉到另一個網頁,還是在同一頁面內導航,HTML 連結都扮演著關鍵角色。本文將簡單的介紹 HTML 連結的基礎語法和使用方法。
在網頁設計中,列表是基本且重要的元素之一。透過 HTML 列表,我們能夠提高網頁內容的可讀性。本文將帶你了解 HTML 中的列表類型,以及它們的使用方式。
本文將介紹 HTML 中的標題、段落、文本格式化、引用和註釋,這些文本標籤有助於建立一個結構良好的網站。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床,因此要看檔案副檔名是否為常見的圖片名稱。 有些網站會限制外網直接連結,所以篩選圖片要注意。
網頁輸入欄位動態改變範例 Html Dynamic DropDown Example
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床,因此要看檔案副檔名是否為常見的圖片名稱。 有些網站會限制外網直接連結,所以篩選圖片要注意。
網頁輸入欄位動態改變範例 Html Dynamic DropDown Example
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。