十個(gè)幾乎無(wú)人使用的罕見(jiàn)HTML標(biāo)簽
HTML遠(yuǎn)不止<div>、<a>和<p>這些標(biāo)簽。
還有許多更復(fù)雜、功能更強(qiáng)大的標(biāo)簽，很多開(kāi)發(fā)者幾乎從不使用。
這些標(biāo)簽具有從現(xiàn)代列表可視化到??彩色高亮等有趣功能。
1.<abbr>標(biāo)簽
<abbr>標(biāo)簽用于定義縮寫(xiě)或首字母縮略詞，如HTML、CSS和JS。
也包括LOL——盡管現(xiàn)在它更像是一個(gè)獨(dú)立的詞。
I'm reading about
<abbr title="Hypertext Markup Language">HTML</abbr>
tags at
<abbr title="Coding Beauty">CB</abbr>
我們使用<abbr>標(biāo)簽的title屬性來(lái)顯示縮寫(xiě)/首字母縮略詞的描述，當(dāng)你懸停在元素上時(shí)會(huì)顯示:
懸停在<abbr>上以顯示完整形式:
2. <q>標(biāo)簽
<q>標(biāo)簽表示其中的文本是一個(gè)簡(jiǎn)短的內(nèi)聯(lián)引用。
<q>Coding creates informative tutorials on Web Development technologies</q>現(xiàn)代瀏覽器通常通過(guò)在封閉的文本周圍添加引號(hào)來(lái)實(shí)現(xiàn)這個(gè)標(biāo)簽:
3. <s>標(biāo)簽
<s>用于刪除線。
用于更正而不破壞更改歷史。
Buy for <s>$200</s> $100
<del>和<ins>對(duì)類似，但在語(yǔ)義上用于文檔更新而不是更正。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
del {
background-color: lightsalmon;
}
ins {
text-decoration: none;
background-color: lightgreen;
}
</style>
</head>
<body>
My favorite programming language is <del>JavaScript</del> <ins>TypeScript</ins>
</body>
</html>
4. <mark>標(biāo)簽
標(biāo)記或高亮文本。
Coding <mark>Beauty</mark> Website默認(rèn)為黃色背景:
就像瀏覽器顯示搜索結(jié)果那樣。
5. <wbr>標(biāo)簽
<wbr>告訴瀏覽器，"你只能在這里和那里斷開(kāi)文本"
這樣瀏覽器就不會(huì)隨意地在關(guān)鍵詞中斷開(kāi)。
這就是為什么它叫wbr -- Word BReak Opportunity（單詞斷開(kāi)機(jī)會(huì)）
沒(méi)有<wbr>:
<p>this-is-a-very-long-text-created-to-test-the-wbr-tag</p>
現(xiàn)在使用<wbr />。
<p>this-is-a-very-long-te<wbr />xt-created-to-test-the-wbr-tag</p>精確地在...-te之后斷開(kāi):
6.<details>標(biāo)簽
<details>全是關(guān)于展開(kāi)和收縮的 -- 就像宇宙一樣。
<details>
<summary>Lorem Ipsum</summary>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti eos quod fugiat quasi repudiandae, minus quae facere. Sed, quia? Quod cupiditate asperiores neque iste consectetur tempore eum repellat incidunt qui.
</details>展開(kāi):
7. <optgroup>標(biāo)簽
顧名思義 — 用于分組選項(xiàng)。
你通?？梢詫⒕薮蟮倪x項(xiàng)列表分組為清晰的層次結(jié)構(gòu)，<optgroup>就是為此而生。
<select name="country" id="countries">
<optgroup label="North America">
<option value="us">United States</option>
<option value="ca">Canada</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="fr">France</option>
</optgroup>
</select>國(guó)家 → 大洲。
8. <datalist>標(biāo)簽
<datalist>致力于讓文本輸入變得輕而易舉。
通過(guò)下拉列表實(shí)現(xiàn)自動(dòng)完成:
<form>
<label for="lang">Choose a language:</label>
<input list="langs" name="lang" id="lang" />
<!-- <input> 連接到 <datalist> -->
<datalist id="langs">
<option value="English" />
<option value="French" />
<option value="Spanish" />
<option value="Chinese" />
<option value="German" />
</datalist>
</form>
9. <fieldset>標(biāo)簽
<fieldset>創(chuàng)建一組字段 — 農(nóng)民們一定會(huì)覺(jué)得很有用。
創(chuàng)建清晰的視覺(jué)分隔，以便輕松理解表單。
<form>
<fieldset>
<legend>名字</legend>
<label for="fname">名字:</label>
<input type="text" id="fname" name="fname" /><br />
<label for="mname">中間名:</label>
<input type="text" id="mname" name="mname" /><br />
<label for="lname">姓:</label>
<input type="text" id="lname" name="lname" />
</fieldset>
<br />
<label for="email">電子郵箱:</label>
<input type="email" id="email" name="email" /><br /><br />
<label for="password">密碼:</label>
<input type="password" id="password" name="password" />
</form>我們使用<legend>標(biāo)簽為<fieldset>元素定義標(biāo)題。
10. <sup>和<sub>標(biāo)簽
<sup> -- 上標(biāo)。<sub> -- 下標(biāo)。
<p>該文本包含 <sub>下標(biāo)</sub> 文本</p>
<p>該文本包含 <sup>上標(biāo)</sup> 文本</p>
更復(fù)雜的應(yīng)用：中和反應(yīng)??
<p>??<sup>2</sup> - 3?? - 28 = 0. Solve for ??.</p>
<br />
<br />
<p>H<sub>2</sub>SO<sub>4</sub> + NaOH → Na<sub>2</sub>SO<sub>4</sub> + H<sub>2</sub>O</p>
在本文中，我們探討了一些最鮮為人知且很少使用的HTML標(biāo)簽。盡管使用頻率低，但這些罕見(jiàn)的標(biāo)簽在特定情況下可能非常有用。
