摘要：如果你想了解更多關(guān)于的知識(shí)，可以訪問(wèn)以獲得更多的元素。如果用戶代理不支持指定的類(lèi)型，那么這個(gè)元素會(huì)被跳過(guò)。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

我聽(tīng)過(guò) “HTML很容易” 這種情緒的次數(shù)比我想象的要多。 雖然我同意 HTML 可能比其他編程語(yǔ)言更容易學(xué)習(xí)，但你不應(yīng)該認(rèn)為它是理所當(dāng)然的。

HTML 是一種功能強(qiáng)大的標(biāo)記語(yǔ)言，可用于為我們的 web 應(yīng)用程序提供結(jié)構(gòu)并提供強(qiáng)大的可訪問(wèn)性?xún)?yōu)勢(shì)，但只有在適當(dāng)使用時(shí)才能使用。

因此，今天我們將發(fā)覺(jué) 10 個(gè)你可能不知道存在的 HTML 元素，希望你可以創(chuàng)建易訪問(wèn)、結(jié)構(gòu)更健全的 web 應(yīng)用程序。

如果你想了解更多關(guān)于 HTML 的知識(shí)，可以訪問(wèn)W3Schools以獲得更多的 HTML 元素。

運(yùn)行效果：

查看示例

標(biāo)簽指定從另一個(gè)源引用的部分。

運(yùn)行效果：

查看示例

Output

標(biāo)簽表示一個(gè)計(jì)算的結(jié)果。你可以使用加號(hào)和等號(hào)來(lái)指定應(yīng)該將第一個(gè)和第二個(gè)輸入值輸出到輸出標(biāo)記;可以使用包含要合并的兩個(gè)元素的 ID 的 for 屬性來(lái)表示這一點(diǎn)。

運(yùn)行效果：

查看示例

Picture

通過(guò)包含零或多個(gè) 元素和一個(gè) 元素來(lái)為不同的顯示/設(shè)備場(chǎng)景提供圖像版本。瀏覽器會(huì)選擇最匹配的子 元素，如果沒(méi)有匹配的，就選擇 元素的 src 屬性中的URL。然后，所選圖像呈現(xiàn)在元素占據(jù)的空間中。

source 元素具有以下屬性：

srcset(必填)：定義要顯示的圖像的URL

media：media 屬性允許你提供一個(gè)用于給用戶代理作為選擇 元素的依據(jù)的媒體條件(media condition)（類(lèi)似于媒體查詢(xún)）。如果這個(gè)媒體條件匹配結(jié)果為 false，那么這個(gè) 元素會(huì)被跳過(guò)。

sizes： 定義單個(gè)寬度值，具有寬度值的單個(gè)媒體查詢(xún)，或具有寬度值的逗號(hào)分隔的媒體查詢(xún)列表

type: type 屬性允許你為 元素的 srcset 屬性指向的資源指定一個(gè) MIME 類(lèi)型。如果用戶代理不支持指定的類(lèi)型，那么這個(gè) 元素會(huì)被跳過(guò)。

如果瀏覽器不支持該元素，或者所有標(biāo)簽都不匹配，則使用標(biāo)簽提供向后兼容性。

Progress

標(biāo)簽表示任務(wù)的進(jìn)度。

標(biāo)簽不能替代標(biāo)簽，因此指示磁盤(pán)空間使用情況或查詢(xún)結(jié)果相關(guān)性的組件應(yīng)該使用標(biāo)簽。

運(yùn)行效果：

查看示例

Meter

標(biāo)簽定義了一個(gè)定義范圍內(nèi)的標(biāo)量度量，或者一個(gè)分?jǐn)?shù)值。你還可以通過(guò)名稱(chēng)gauge引用此標(biāo)記。

你可以使用標(biāo)簽來(lái)顯示磁盤(pán)使用情況統(tǒng)計(jì)數(shù)據(jù)，或者指示搜索結(jié)果的相關(guān)性。

不應(yīng)該使用標(biāo)簽來(lái)指示任務(wù)的進(jìn)度;這些類(lèi)型的組件應(yīng)該由元素定義。

運(yùn)行效果：

查看示例

Template

HTML內(nèi)容模板（