9個你可能從未聽說過的HTML功能
1、<optgroup>元素
<select><option value="strawberry">Strawberry</option><option value="raspberry">Raspberry</option><option value="apple">Apple</option><option value="apricot">Apricot</option><option value="cucumber">Cucumber</option><option value="carrot">Carrot</option><option value="broccoli">Broccoli</option><option value="cabbage">Cabbage</option></select>
這對于短列表來說非常好，但是，當(dāng)你擁有大量可用選項時，它可能會造成混亂。一種簡單的改進(jìn)方法是，將相似的選項組合在一起，以便用戶可以直接跳到更相關(guān)的選項，而不必搜索所有的選項。
關(guān)于如何實現(xiàn)此目標(biāo)的第一個想法可能是遵循以下思路：
<select><option value="" disabled="true">--- Fruits ---</option><option value="strawberry">Strawberry</option><option value="raspberry">Raspberry</option><option value="apple">Apple</option><option value="apricot">Apricot</option><option value="" disabled="true">--- Vegetables ---</option><option value="cucumber">Cucumber</option><option value="carrot">Carrot</option><option value="broccoli">Broccoli</option><option value="cabbage">Cabbage</option></select>
對于用戶來說，這已經(jīng)是一個很大的改進(jìn)，但是現(xiàn)在我們的標(biāo)記中雜亂無章的選項僅用于分隔組。
幸運的是，有一種更好的方法可以做到這一點–即使用<optgroup>元素！
示例如下：
<select><optgroup label="Fruits"><option value="strawberry">Strawberry</option><option value="raspberry">Raspberry</option><option value="apple">Apple</option><option value="apricot">Apricot</option></optgroup><optgroup label="Vegetables"><option value="cucumber">Cucumber</option><option value="carrot">Carrot</option><option value="broccoli">Broccoli</option><option value="cabbage">Cabbage</option></optgroup></select>
如上圖，我們所見，我們實現(xiàn)了我們想要的功能，并且瀏覽器甚至添加了一些其他樣式，從而使用戶可以更輕松地在列表中導(dǎo)航。
2、<base>元素
這個HTML元素可以稍微清理一下你的代碼，并可以在以后更輕松地重構(gòu)URL。該<base>元素需要放置頁面的<head>元素里面。
頁面上的<base>元素都會有對應(yīng)的URL，無論是用于圖像還是網(wǎng)址。
以后更改該URL將是單行更改。此外，這減少了重復(fù)的代碼，并使你的網(wǎng)址更短且更易于閱讀。
示例如下：
<head><base href="https://www.w3schools.com/" target="_blank"></head><body><img src="images/stickman.gif" width="24" height="39" alt="Stickman"><a href="tags/tag_base.asp">HTML base Tag</a></body>
3、<kbd>元素
這個<kbd>元素可用于將某些文本標(biāo)記為鍵盤輸入,在編寫文檔或技術(shù)博客文章時，可以快速，輕松地改進(jìn)標(biāo)記。
我建議將此標(biāo)簽與其他一些CSS樣式結(jié)合使用，如本示例中的Stack Overflow那樣：
示例如下：
< p > < kbd > Ctrl </ kbd > + < kbd > Alt </ kbd > + < kbd > Del </ kbd > </ p >4、<samp>元素
<samp>元素可以向頁面添加更多語義。它用于將某些文本標(biāo)記為計算機(jī)輸出。示例文本的默認(rèn)樣式是使用等寬字體顯示它。
與<kbd>元素類似，你可以只使用少量的CSS即可自定義和改進(jìn)樣式。
<p>Message from my computer:</p><p><samp>File not found.<br>Press F1 to continue</samp></p>
5、<del>和<ins>元素
這是我在這里要提到的最后兩個可以使使的標(biāo)記更加整潔的元素。它們應(yīng)用于文本的一部分標(biāo)記，分別使已刪除或已添加。
瀏覽器通常會使用<del>元素來刪除文本，并在刪除的文本上添加一根刪除文本線，但是，你可以使用一些自定義樣式來增強(qiáng)該樣式，就像其他所有元素一樣。
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
6、<wbr>元素
wbr代表斷詞機(jī)會，并控制瀏覽器的斷詞行為。如果你要處理很長的單詞，而這些單詞的拆分方式與瀏覽器默認(rèn)情況下的拆分方式不同，那么，你使用<wbr>元素，就可以比較完美的解決這個問題。
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
7、<fieldset>元素
字段集是一種為表單添加更多結(jié)構(gòu)的好方法！特別是在處理大型表單時，可以使用字段集，這樣用戶可以更容易獲得表單概述。
示例如下：
<form><fieldset><legend>Personal information:</legend><label for="fname">First name:</label><input type="text" id="fname" name="fname"><br><br><label for="lname">Last name:</label><input type="text" id="lname" name="lname"><br><br><label for="email">Email:</label><input type="email" id="email" name="email"><br><br></fieldset><fieldset><legend>Payment:</legend><label for="cardnumber">Credit card number:</label><input type="text" id="cardnumber" name="cardnumber"><br><br><label for="cvv">CVV:</label><input type="text" id="cvv" name="cvv"><br><br></fieldset><br /><input type="submit" value="Submit"></form>
8、<colgroup>元素
<colgroup>元素可以使樣式非常容易的應(yīng)用于表中。
而且<colgroup>元素內(nèi)部也可以定義<table>以及之后的任何<caption>元素和之前的任何<thead>，<tbody>，<tfoot>和<tr>元素。
在內(nèi)容一樣可以使用span屬性控制組樣式。如果你未定義任何span，則默認(rèn)為單個列。
示例如下：
<table><colgroup><col span="2" style="background-color:red"><col style="background-color:yellow"></colgroup><tr><th>ISBN</th><th>Title</th><th>Price</th></tr><tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr><tr><td>5869207</td><td>My first CSS</td><td>$49</td></tr></table>
9、<dl>，<dt>和<dd>元素
這些元素可用于構(gòu)建某些描述列表。當(dāng)你為博客或書籍構(gòu)建詞匯表或參考文獻(xiàn)列表時，這些元素是非常有用的。
以下是一個描述列表的示例：
<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>
總結(jié)
希望你能從本文中學(xué)到一些新知識，同時，也希望這些新知識可以幫助你提升開發(fā)效率，最后，感謝你的閱讀！編程愉快！
學(xué)習(xí)更多技能
請點擊下方web前端開發(fā)
