前端開(kāi)發(fā)人員使用 HTML 圖片標(biāo)籤來(lái)根據(jù)視口等首選項(xiàng)指定要在網(wǎng)頁(yè)上顯示的多個(gè)文件來(lái)源。此標(biāo)籤允許Web開(kāi)發(fā)人員在響應(yīng)式網(wǎng)頁(yè)中指定多圖像來(lái)源，並根據(jù)視口自動(dòng)選擇圖像，從而使網(wǎng)頁(yè)完美地填充來(lái)源。我們可以在圖片標(biāo)籤中指定多個(gè)來(lái)源，網(wǎng)頁(yè)就會(huì)載入滿足偏好的圖片。圖片標(biāo)籤是 HTML 5 中引入的。

文法：

HTML中的圖片標(biāo)籤包含兩種類型的標(biāo)籤，第一種是；它允許指定檔案的來(lái)源，第二個(gè)是;允許在瀏覽器不支援的情況下指定要顯示的圖像的標(biāo)籤。標(biāo)籤。 的語(yǔ)法如下：標(biāo)籤如下，

<picture>
<source .>
.
.
<source .>
<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" class="lazy" . alt="HTML 圖片標(biāo)籤" >
</source></source></picture>

圖片標(biāo)籤總是有一個(gè)結(jié)束標(biāo)籤，其中包含兩種類型的標(biāo)籤，如上所述。 標(biāo)籤會(huì)根據(jù)資源數(shù)量出現(xiàn)多次，且只有一個(gè) 。標(biāo)籤。來(lái)源標(biāo)籤和圖像標(biāo)籤將具有不同的屬性，這些屬性將決定圖片標(biāo)籤的功能。

HTML 圖片標(biāo)籤的屬性

如前所述，圖片標(biāo)籤包含其他兩個(gè)標(biāo)籤 ;和。適用於這兩個(gè)標(biāo)籤的屬性將適用於圖片標(biāo)籤。

1.源

該屬性與 一起使用標(biāo)籤。此屬性允許指定要顯示的圖像的路徑或 URL。該欄位是必需的，並且每當(dāng)使用來(lái)源標(biāo)記時(shí)都需要指定。這樣我們就可以指定多個(gè)圖片來(lái)源。

2. srcset

此屬性可以與 一起使用或 標(biāo)籤，是 HTML 5 中的新屬性。該屬性與先前的“src”屬性類似，但它允許我們定義更多值。此屬性接受兩個(gè)值作為輸入，第一個(gè)是檔案的路徑或URL，第二個(gè)是影像的寬度描述符（如(100w)）或影像的像素密度描述符（如(3x)）；每個(gè)後面分別跟著w 和x。

3.媒體

此屬性與 一起使用標(biāo)籤。該標(biāo)籤允許我們定義圖像的顯示規(guī)則。此屬性將任何媒體查詢作為輸入並套用規(guī)則。媒體查詢可以檢查視口或設(shè)備大小或高度等

這樣，我們就可以使用該屬性和標(biāo)籤以及來(lái)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。標(biāo)籤。

4.尺寸

此屬性可以與 一起使用和 標(biāo)籤。由於圖像將以預(yù)設(shè)寬度顯示，因此該屬性允許我們根據(jù)媒體條件明確指定圖像的寬度。媒體條件是一個(gè)簡(jiǎn)單的條件，如“max-width: 800px”，沒(méi)有任何附加參數(shù)。圖片標(biāo)籤始終有一個(gè)結(jié)束標(biāo)籤，其中包含兩種類型的標(biāo)籤，如上所述。 標(biāo)籤會(huì)根據(jù)資源數(shù)量出現(xiàn)多次，且只有一個(gè) 。標(biāo)籤。來(lái)源標(biāo)籤和圖像標(biāo)籤將具有不同的屬性，這些屬性將決定圖片標(biāo)籤的功能。 size 屬性可以接受多個(gè)這樣的媒體條件。這在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中非常有用，我們可以在其中設(shè)定條件並相應(yīng)地顯示圖像。

5.輸入

此屬性與 一起使用標(biāo)籤。此屬性可讓我們明確指定要顯示的檔案的 MIME 類型。

HTML 圖片標(biāo)籤範(fàn)例

HTML 用於為 Web 開(kāi)發(fā)人員提供定義影像資源的彈性。?以下是 HTML 圖片標(biāo)籤的範(fàn)例：

範(fàn)例#1

代碼：

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543850795429.png" class="lazy" alt="HTML 圖片標(biāo)籤"   style="max-width:90%">
</source></source></picture>
</div>
</div>

輸出:

這裡有三張不同解析度的影像。

在程式碼中，我們指定了最小寬度媒體查詢來(lái)顯示圖像。運(yùn)行程式碼後，嘗試調(diào)整瀏覽器大小，會(huì)根據(jù)寬度顯示不同的圖片。

寬度大於 550 像素：

寬度大於 465 px：

其他情況，即寬度小於465px：

Note, the outer border of the images clarifies the resolution of images. In most of the cases, all these images will be the same but with different resolutions.

Example #2

Code:

<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>
picture tag in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
.img {
max-width: 100%;
}
</style>


<div class="results">
<h2> picture tag in HTML </h2>
<span> Resize the browser to see the effect.. </span>
<div class="resultText">
<picture>
<source media="(min-width: 550px)" srcset="https://cdn.educba.com/triangle.png">
<source media="(min-width: 465px)" srcset="https://cdn.educba.com/rectangle.png">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543851554073.png" class="lazy" alt="HTML 圖片標(biāo)籤" srcset="https://cdn.educba.com/HTML 圖片標(biāo)籤.png 2000w" sizes="900vw"   style="max-width:90%">
</source></source></picture>
</div>
</div>

Output:

Here, we have used the attribute size with the tag. The maximum width of an image is limited by using CSS first, but these sizes attribute, along with srcset, forces to use the width depending on the size specified in terms of the viewport.

Conclusion

Web developers use HTML picture tag in responsive web page designing. This tag consists of two child tags source and img. Using different attributes available for these tags makes it possible to display images dynamically depending on the conditions.

以上是HTML 圖片標(biāo)籤的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！