我們平時(shí)在網(wǎng)站上看到圖片，而支撐圖片顯示則需要一系列代碼，其中img屬性標(biāo)簽尤其重要。HTML的IMG標(biāo)記主要作用，是控制在網(wǎng)頁(yè)中插入圖片和其他靜態(tài)圖形對(duì)象。這個(gè)常見(jiàn)的標(biāo)簽支持幾個(gè)必需的和可選的屬性，這些屬性增加了您設(shè)計(jì)一個(gè)吸引人的、以圖像為中心的網(wǎng)站的能力。IMG有哪些屬性標(biāo)簽?zāi)?？?duì)于網(wǎng)站開(kāi)發(fā)人員來(lái)說(shuō)，網(wǎng)站建設(shè)開(kāi)發(fā)中的圖像標(biāo)簽img屬性知多少，是衡量其代碼編寫能力和水平的一個(gè)方式，本文會(huì)就此展開(kāi)一些討論，并告訴你常用或已經(jīng)一些過(guò)時(shí)的img標(biāo)簽知識(shí)。

完全形成的HTML IMG標(biāo)記的示例如下所示：

標(biāo)簽屬性說(shuō)明

SRC.

獲取要在網(wǎng)頁(yè)上顯示的圖像所需的唯一屬性是SRC屬性。此屬性標(biāo)識(shí)要顯示的圖像文件的名稱和位置。

ALT.

若要寫入有效的XHTML和HTML4，也需要ALT屬性。此屬性用于為非可視瀏覽器提供描述圖像的文本。瀏覽器以不同的方式顯示替代文本。當(dāng)您將鼠標(biāo)放在圖像上時(shí)，有些顯示為彈出窗口，有些顯示為右鍵單擊圖像時(shí)的屬性，有些則根本不顯示。使用Alt文本可以提供與網(wǎng)頁(yè)文本不相關(guān)或不重要的圖像的其他詳細(xì)信息。但是請(qǐng)記住，在屏幕閱讀器和其他純文本瀏覽器中，文本將與頁(yè)面上的其余文本內(nèi)聯(lián)讀取。為了避免混淆，使用說(shuō)明性的ALT文本，例如，“關(guān)于網(wǎng)頁(yè)設(shè)計(jì)和HTML”，而不只是“徽標(biāo)”。

在HTML5中，ALT屬性并不總是必需的，因?yàn)槟梢允褂脴?biāo)題向其添加更多描述。還可以使用此屬性指示包含完整描述的ID：

ARIA-DESCRIBEDBY

如果圖像純粹是裝飾性的，例如網(wǎng)頁(yè)頂部的圖形或圖標(biāo)，也不需要Alt文本。但如果你不確定，包括ALT文本以防萬(wàn)一。

推薦的IMG屬性

WIDTH

和

HEIGHT

您應(yīng)該養(yǎng)成始終使用寬度和高度屬性的習(xí)慣。而且，您應(yīng)該始終使用真正的大小，而不是用瀏覽器來(lái)調(diào)整圖像的大小。這些屬性加快了頁(yè)面的呈現(xiàn)速度，因?yàn)闉g覽器可以在設(shè)計(jì)中為圖像分配空間，然后繼續(xù)下載其余內(nèi)容，而不是等待整個(gè)圖像下載。

其他有用的img屬性

TITLE

該屬性是一個(gè)全局屬性，可應(yīng)用于任何HTML元素。此外，Title屬性允許您添加有關(guān)圖像的額外信息。大多數(shù)瀏覽器都支持title屬性，但它們使用的方式不同。有些將文本顯示為彈出窗口，而另一些則在用戶右鍵單擊圖像時(shí)在信息屏幕中顯示文本。您可以使用Title屬性來(lái)編寫有關(guān)圖像的其他信息，但不要指望此信息是隱藏的或可見(jiàn)的。你絕對(duì)不應(yīng)該用這個(gè)來(lái)隱藏搜索引擎的關(guān)鍵字。這種做法現(xiàn)在受到大多數(shù)搜索引擎的懲罰。

USEMAP

和

ISMAP

這兩個(gè)屬性設(shè)置客戶端()和服務(wù)器端(ISMAP)映像映射到您的映像。

LONGDESC

此屬性支持URL對(duì)圖像進(jìn)行更長(zhǎng)的描述。此功能使您的圖像更容易訪問(wèn)。

已棄用且已過(guò)時(shí)的img屬性

在HTML5中有幾個(gè)屬性現(xiàn)已過(guò)時(shí)，或在HTML4中已不推薦使用。為了獲得好HTML，您應(yīng)該找到其他解決方案，而不是使用這些屬性。

BORDER

該屬性定義圖像周圍任何邊框的寬度(以像素為單位)。它在HTML4中已被棄用CSS，而在HTML5中已過(guò)時(shí)。

ALIGN

此屬性允許您將圖像放置在文本內(nèi)部，并使文本圍繞文本流動(dòng)?？梢詫D像向右或向左對(duì)齊。在HTML4中，它已被棄用為Float CSS屬性，而在HTML5中，它已過(guò)時(shí)。

HSPACE

和

VSPACE

HSPACE和vSpace屬性添加水平(HSPACE)和垂直(VSpace)空白?？瞻讓⑻砑拥綀D形的兩側(cè)(頂部和底部或左側(cè)和右側(cè))，因此，如果您只需要在一側(cè)的空間，您應(yīng)該使用CSS。這些屬性在HTML4中已經(jīng)被棄用，取而代之的是Margin CSS屬性，并且它們?cè)贖TML5中已經(jīng)過(guò)時(shí)。

LOWSRC

當(dāng)圖像源非常大，以至于下載速度非常慢時(shí)，LOWSRC屬性提供了另一種圖像。例如，您可能有一個(gè)500KB的圖像要顯示在您的網(wǎng)頁(yè)上，但500KB需要很長(zhǎng)時(shí)間才能下載。因此，您可以創(chuàng)建一個(gè)小得多的圖像副本，可能是黑白的，或者只是非常優(yōu)化的，并將其放入LOWSRC屬性中。較小的圖像將首先下載并顯示，然后當(dāng)較大的圖像出現(xiàn)時(shí)，它將取代低來(lái)源的圖像。LOWSRC屬性被添加到Netscape Navigator 2.0的img標(biāo)記中。它是DOM級(jí)別1的一部分，但隨后從DOM級(jí)別2中刪除。盡管許多網(wǎng)站聲稱所有現(xiàn)代瀏覽器都支持該屬性，但瀏覽器對(duì)該屬性的支持一直不夠完善。它在HTML4中沒(méi)有被棄用，在HTML5中也沒(méi)有過(guò)時(shí)，因?yàn)樗鼜膩?lái)不是這兩個(gè)規(guī)范的正式部分。

避免使用該屬性，而是優(yōu)化圖像，使其快速加載。頁(yè)面加載的速度是良好的Web設(shè)計(jì)的關(guān)鍵部分，大圖像會(huì)極大地降低頁(yè)面的速度-即使您使用LOWSRC屬性也是如此。

網(wǎng)站欄目：網(wǎng)站建設(shè)開(kāi)發(fā)中的圖像標(biāo)簽img屬性知多少
URL網(wǎng)址：http://jinyejixie.com/news/144789.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)