中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2022-03-18    分類: 網(wǎng)站建設(shè)

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

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

<img src="url">

標(biāo)簽屬性說明

SRC.

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

ALT.

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

在HTML5中,ALT屬性并不總是必需的,因?yàn)槟梢允褂脴?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)速度,因?yàn)闉g覽器可以在設(shè)計(jì)中為圖像分配空間,然后繼續(xù)下載其余內(nèi)容,而不是等待整個(gè)圖像下載。

其他有用的img屬性

TITLE

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

USEMAP

ISMAP

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

LONGDESC

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

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

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

BORDER

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

ALIGN

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

HSPACE

VSPACE

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

LOWSRC

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

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

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

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷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í)需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司
凤翔县| 莆田市| 淮北市| 深圳市| 盈江县| 大城县| 潍坊市| 凤城市| 博湖县| 铅山县| 钟山县| 大新县| 永吉县| 梅河口市| 永仁县| 喜德县| 南宁市| 新化县| 河间市| 博兴县| 彭泽县| 淮滨县| 玉溪市| 平塘县| 邛崃市| 郴州市| 阜城县| 奈曼旗| 聂拉木县| 渑池县| 五指山市| 枣庄市| 宣汉县| 肥乡县| 扎赉特旗| 高阳县| 阿尔山市| 永济市| 天峻县| 定州市| 那坡县|