詳解HTML-XHTML中img圖像標簽的基本用法

2020-03-24 18:45:54

字體：大中小

來源：轉載

供稿：網友

圖像標簽用于在網頁里顯示一副圖像。
HTML/XHTML 圖像 img / 標簽
在 XHTML 中，通過 img / 標簽來定義顯示一副圖像。 img / 是一個非成對標簽?；菊Z法：
XML/HTML Code復制內容到剪貼板
img / 標簽通過 src 屬性來確定圖像來源，url 是一個相對或者絕對的圖像地址。圖像html' target='_blank'>標簽屬性：
src：圖片源，必需。指定顯示的圖像來源地址，可以是相對地址或者絕對地址。
alt：可替換文本，可省略。用于圖像無法顯示或者瀏覽器屏蔽了圖片時，顯示出來的替換文本。
title：圖像提示文字，可省略。當鼠標停留到圖片上時，會提示相關文字。
width：圖片顯示的寬度，可省略。單位為像素。
height：圖片顯示的高度，可省略。單位為像素。文本替換屬性（alt）
圖像標簽的文本替換屬性 alt 雖然不是一個必需的屬性，但卻是一個很重要的屬性。當因為某些原因，瀏覽器讀取圖像失敗的時候，將顯示該替代文本以替代原圖像以提供丟失的相關圖像信息。該屬性也有助于那些使用純文本瀏覽器的用戶理解網頁內容。
因此，給每幅圖像添加一個有意義的 alt 文本替換屬性是個很好的習慣。 img / 標簽使用練習
在 e:html 文件夾下的創建 images 文件夾用于存放圖像文件。將下面這幅圖片，鼠標右鍵選擇圖片另存為，將圖片存儲到 images 文件夾下以備用。
編輯我們的 XHTML 小例子 1.html ，在 id= main-content 的 div 標簽內做如下更改：
XML/HTML Code復制內容到剪貼板
p 文章具體內容 /p p imgsrc= images/flower_1.jpg alt= 花朵 / /p
這樣我們就在網頁中顯示了一幅圖像。指定圖像顯示尺寸
可以給 img / 標簽增加 width 或 height 屬性以手動指定圖像顯示的尺寸：
XML/HTML Code復制內容到剪貼板
imgsrc= images/flower_1.jpg alt= 花朵 width= 350 height= 270 /
提示
一般情況下都會忽略圖像尺寸屬性而默認顯示原圖大小或者瀏覽器自適應大小顯示。指定不恰當的圖像顯示尺寸，可能會讓圖像顯示變形。
由于載入圖像需要一定的時間，應該盡量在保證圖片質量的前提下，減小圖片的體積以盡量達到良好的用戶訪問體驗。延伸閱讀
像素（Pixel）：我們可以形象的認為像素就是一個一個計算機可以顯示的最小的點，例如我們常說的的屏幕分辨率是 1024*768 ，意思就是屏幕橫著有 1024 個（像素）點，豎著有 768 個（像素）點。用作單位時一般默認寫作 pix。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html中strong標簽與b標簽的區別總結

下一篇：html支持的列表標簽：無序列表、有序列表和定義