HTML 圖像 標(biāo)簽

在 HTML 中，通過 標(biāo)簽來定義顯示一副圖像。是一個(gè)非成對(duì)標(biāo)簽。

基本語法：

<img?src="url"?/>

標(biāo)簽 通過 src 屬性來確定圖像來源，url 是一個(gè)相對(duì)或者絕對(duì)的圖像地址。

圖像標(biāo)簽屬性：屬性功能說明

src	圖片源，必需。指定顯示的圖像來源地址，可以是相對(duì)地址或者絕對(duì)地址。
alt	可替換文本，可省略。用于圖像無法顯示或者瀏覽器屏蔽了圖片時(shí)，顯示出來的替換文本。
title	圖像提示文字，可省略。當(dāng)鼠標(biāo)停留到圖片上時(shí)，會(huì)提示相關(guān)文字。
width	圖片顯示的寬度，可省略。單位為像素。
height	圖片顯示的高度，可省略。單位為像素。

文本替換屬性(alt)

圖像標(biāo)簽的文本替換屬性 alt 雖然不是一個(gè)必需的屬性，但卻是一個(gè)很重要的屬性。當(dāng)因?yàn)槟承┰?#xff0c;瀏覽器讀取圖像失敗的時(shí)候，將顯示該替代文本以替代原圖像以提供丟失的相關(guān)圖像信息。該屬性也有助于那些使用純文本瀏覽器的用戶理解網(wǎng)頁內(nèi)容。

因此，給每幅圖像添加一個(gè)有意義的 alt 文本替換屬性是個(gè)很好的習(xí)慣。

標(biāo)簽使用練習(xí)

在 e:html 文件夾下的創(chuàng)建 images 文件夾用于存放圖像文件。將下面這幅圖片，鼠標(biāo)右鍵選擇 “圖片另存為”，將圖片存儲(chǔ)到 images 文件夾下以備用。

編輯我們的 HTML 小例子 1.html ，在 id="main-content" 的 div 標(biāo)簽內(nèi)做如下更改：

<h3>文章題目h3><p>文章具體內(nèi)容p><p><img src="images/flower_1.jpg" alt="花朵" />p>

這樣我們就在網(wǎng)頁中顯示了一幅圖像。

指定圖像顯示尺寸

可以給 標(biāo)簽增加 width 或 height 屬性以手動(dòng)指定圖像顯示的尺寸：

<img src="images/flower_1.jpg" alt="花朵" width="350" height="270" />

提示

一般情況下都會(huì)忽略圖像尺寸屬性而默認(rèn)顯示原圖大小或者瀏覽器自適應(yīng)大小顯示。指定不恰當(dāng)?shù)膱D像顯示尺寸，可能會(huì)讓圖像顯示變形。

由于載入圖像需要一定的時(shí)間，應(yīng)該盡量在保證圖片質(zhì)量的前提下，減小圖片的體積以盡量達(dá)到良好的用戶訪問體驗(yàn)。

延伸閱讀

像素(Pixel)：我們可以形象的認(rèn)為像素就是一個(gè)一個(gè)計(jì)算機(jī)可以顯示的最小的點(diǎn)，例如我們常說的的屏幕分辨率是 1920*1080 ，意思就是屏幕橫著有 1920?個(gè)(像素)點(diǎn)，豎著有 1080 個(gè)(像素)點(diǎn)。用作單位時(shí)一般默認(rèn)寫作 pix。

總結(jié)

以上是生活随笔為你收集整理的delphi tabsheet多标签自适应宽度_HTML 图像 img 标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。