網(wǎng)站建設(shè)開發(fā)中的圖像標(biāo)簽img屬性知多少

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

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

<img src="url">

標(biāo)簽屬性說明

SRC.

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

ALT.

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

在HTML5中，ALT屬性并不總是必需的，因為您可以使用標(biāo)題向其添加更多描述。還可以使用此屬性指示包含完整描述的ID：

ARIA-DESCRIBEDBY

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

推薦的IMG屬性

WIDTH

和

HEIGHT

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

其他有用的img屬性

TITLE

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

USEMAP

和

ISMAP

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

LONGDESC

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

已棄用且已過時的img屬性

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

BORDER

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

ALIGN

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

HSPACE

和

VSPACE

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

LOWSRC

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

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

本文題目：網(wǎng)站建設(shè)開發(fā)中的圖像標(biāo)簽img屬性知多少
鏈接分享：http://www.muchs.cn/news39/144789.html

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

廣告

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