您不知道的12個(gè)HTML標(biāo)簽

時(shí)間：2023-09-26 20:06:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-26 20:06:01 來源：網(wǎng)站運(yùn)營

您不知道的12個(gè)HTML標(biāo)簽：HTML（超文本標(biāo)記語言）用于結(jié)合使用超文本和標(biāo)記語言來設(shè)計(jì)網(wǎng)頁。

在這篇文章中，我們將看一些可以使用HTML完成的很酷的事情。讓我們看一些html標(biāo)記，您可能甚至不知道它們是否存在。應(yīng)該利用今天。

讓我們開始吧

1.<figure>標(biāo)簽

這可以用來標(biāo)記照片。該<figure>元素也可以包含一個(gè)<figcaption>。

<figure> <img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" alt="Person using lack laptop computer on brown wooden table" style="width:100%"> <figcaption>Person using lack laptop computer on brown wooden table</figcaption></figure>

2.<audio>標(biāo)簽

?<audio>元素提供了一種在不使用任何其他插件的情況下將音頻資源添加到網(wǎng)頁的方法。?用于播放聲音，就像播放音樂或音頻流一樣。它支持mp3，wav和ogg。tag標(biāo)記中包含一個(gè)后備文本，以向不支持該元素的瀏覽器顯示。?default默認(rèn)情況下，瀏覽器不顯示任何控件。?要增加用戶播放，暫停，調(diào)節(jié)音量等功能，可以使用'controls'屬性。

<audio controls> <source src="music.mp4" type="audio/mp4"> <source src="mucis.ogg" type="audio/ogg"></audio>

3.<video>標(biāo)簽

這使您可以嵌入媒體播放器以播放視頻。它用于播放視頻片段或視頻流，而無需嵌入youtube或vimeo視頻。它支持mp4，webm和ogg。

例如，您可以將視頻上傳到AWS S3并使用<video>標(biāo)簽將其嵌入到您的網(wǎng)站中。

您還可以指定某些屬性，例如寬度，高度，自動(dòng)播放，循環(huán)，控件等。

<video width="960" height="540" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"></video>

4.<progress>標(biāo)簽

該<progress>標(biāo)簽代表一個(gè)任務(wù)的進(jìn)度。

該<progress>標(biāo)簽不應(yīng)與混淆<meter>標(biāo)簽（其代表表壓）。它具有兩個(gè)屬性值和最大值。

<progress value="57" max="100"></progress>

5.<meter>標(biāo)簽

您可以使用儀表元素來測量給定范圍（儀表）內(nèi)的數(shù)據(jù)。

這可以通過最小值和最大值或百分比來實(shí)現(xiàn)。

<meter value="7" min="0" max="10">7 out of 10</meter><meter value="0.4">40%</meter>

6.<data>標(biāo)簽

它指定元素內(nèi)容的機(jī)器可讀翻譯。它還提供了人類可讀的文本。

<ul> <li> <data value="010">Dogs</data> </li> <li> <data value="011">Cats</data> </li></ul>

7.<datalist>標(biāo)簽

?<datalist>標(biāo)簽用于在表單的輸入字段中提供自動(dòng)完成功能。?specifies指定一組供用戶輸入的預(yù)定義建議。

<input type="text" list="days" placeholder="Choose a Day"><datalist id="days"> <option value="Monday"></option> <option value="Tuesday"></option> <option value="Wednesday"></option> <option value="Thursday"></option> <option value="Friday"></option> <option value="Saturday"></option> <option value="Sunday"></option></datalist>

8.<noscript>標(biāo)簽

<noscript>僅當(dāng)禁用JavaScript時(shí)，瀏覽器才會(huì)呈現(xiàn)元素內(nèi)的內(nèi)容。它為無法使用JavaScript的組件提供了備用機(jī)制。

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

9.<detail>標(biāo)簽

<?detail>當(dāng)需要提供有關(guān)用戶可以選擇隱藏或查看的主題的額外信息時(shí)，該標(biāo)簽用于制作可折疊部分。uses它使用<summary>標(biāo)記來指定標(biāo)題，該標(biāo)題可以單擊以展開或折疊詳細(xì)信息。

<details> <summary>Click To Open</summary> Hey, I am natively collapsable section. My content remains hidden till you click on summary.</details>

10.<wbr>標(biāo)簽

該<wbr>標(biāo)記代表分詞 機(jī)會(huì)，該詞在單詞太長且您不希望瀏覽器在隨機(jī)位置將其分解時(shí)使用，有助于在想要的位置分解該詞。?

<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>

11.<mark>標(biāo)簽

<mark> 是一個(gè)非常簡單實(shí)用的本機(jī)標(biāo)記，用于在沒有任何CSS的情況下在您的網(wǎng)頁中添加一些精美的文字。

<p>HTML can do <mark> MAGIC </mark>.</p>

12.<ins>和<del>標(biāo)簽

<ins>元素表示已添加到文檔 <del>中的文本。??用于已從文檔中刪除的文本

<p>Jatin is a <del>spider man</del> <ins>web developer</ins> from India.</p>

作者：Jatin Rao
譯者：花燈姑娘
鏈接：12 HTML Tags You Don't Know
來源：hashnode