本文介紹了一種新的HTML元素搜索方法，并提供了一個(gè)實(shí)用的工具來(lái)幫助開(kāi)發(fā)者快速找到所需的元素。這對(duì)于那些需要處理大量HTML元素的開(kāi)發(fā)者來(lái)說(shuō)是非常有用的。文章還通過(guò)提供一些常見(jiàn)元素的用法示例，幫助開(kāi)發(fā)者更好地理解和應(yīng)用這些元素。在眾多元素中找到特定的元素。為了解決這個(gè)問(wèn)題，文章介紹了一種新的HTML元素搜索方法。

一個(gè)新的語(yǔ)義元素已經(jīng)加入了 HTML 標(biāo)準(zhǔn) 。它代表文檔中用于搜索或過(guò)濾的部分。它應(yīng)該包含表單控件（如文本輸入、下拉菜單、按鈕等），搜索/過(guò)濾的范圍可以是任何內(nèi)容：從同一文檔到整個(gè)互聯(lián)網(wǎng)。

如何運(yùn)作

在 <search> 元素之前，我們可以在 <form> 標(biāo)簽中添加 role="search" 以指示該表單用于搜索：

<form role="search"?method="get"?action="/search">
??<input type="search"?name="search-text"?/>
??<button>Search</button>
</form>

有了這個(gè)新添加的功能，我們可以使用<search> 標(biāo)簽來(lái)包裝表單：

由于 <search> 是標(biāo)準(zhǔn)中的新內(nèi)容，所有瀏覽器、屏幕閱讀器和其他工具可能需要一段時(shí)間才能跟上。在此期間，我們可以使用一個(gè) hack，指定它已經(jīng)具有的 ARIA 角色（類(lèi)似于 <nav>所發(fā)生的情況）。這在未來(lái)可能會(huì)變得多余，但它可能會(huì)為我們的代碼做好準(zhǔn)備，以便在瀏覽器支持新標(biāo)簽時(shí)使用。

<search role="search">
???...
</search>

這看起來(lái)有些違反直覺(jué)：我們正在移除 role="search"，但我們正在用<search>包裝所有內(nèi)容。總體而言，這是更多的文本/代碼（僅三個(gè)字符）和更多的嵌套（一個(gè)更高的級(jí)別）。

溫馨提示：盡管我們?cè)跇?gòu)建搜索組件時(shí)并不強(qiáng)制需要

標(biāo)簽，但是使用它卻能帶來(lái)額外的好處（甚至是必須的）。這樣，即使在無(wú)JavaScript環(huán)境下，搜索功能也能保持正常運(yùn)行，或者說(shuō)，這是一種實(shí)踐漸進(jìn)式增強(qiáng)策略的方式。

另一個(gè)需要注意的關(guān)鍵點(diǎn)是，搜索區(qū)域不一定是網(wǎng)站或在線平臺(tái)上帶有搜索按鈕的文本輸入框。我們可以使用 <search>來(lái)過(guò)濾結(jié)果或表格行。它的實(shí)用性不僅限于文本輸入和搜索框：

<search>
??<h2>Filter results</h2>
??<form>
????<label?for="cartype">Car type</label>
????<select?id="cartype">
??????<option value="coupe">Coupe</option>
??????<option value="sedan">Sedan</option>
????</select>
????<label?for="electric">Electric?</label>
????<input type="checkbox"?id="electric"?/>
??</form>
</search>

看法

擁有一個(gè)用于識(shí)別搜索區(qū)域的元素是很好的。正如Scott O'Hara在這篇文章中指出的那樣，直到現(xiàn)在，這是唯一一個(gè)在HTML中沒(méi)有語(yǔ)義等效項(xiàng)的ARIA地標(biāo)角色：

• banner → <header>
• complementary → <aside>
• form → <form>
• main → <main>
• navigation → <nav>
• region → <section>
• search → ???

使用 <search> 來(lái)標(biāo)識(shí)應(yīng)具有“搜索”角色的部分，我們將使用一些語(yǔ)義化的 HTML 元素覆蓋所有 ARIA 地標(biāo)角色。這很棒：它將提高可訪問(wèn)性（盡管如上所述，需要一段時(shí)間才能讓所有瀏覽器跟上），并擴(kuò)展了語(yǔ)言的語(yǔ)義。

但是，從程序員的角度來(lái)看，它感覺(jué)不夠完善或沒(méi)有為現(xiàn)有的實(shí)現(xiàn)增加太多東西。其他語(yǔ)義元素可以提高可訪問(wèn)性并簡(jiǎn)化我們編寫(xiě)特定組件的方式。例如，像 <tabpanel> 和<tab> 這樣的東西，在我看來(lái)會(huì)更具說(shuō)服力和價(jià)值。

這并不會(huì)削弱它的重要性。所有的改進(jìn) - 即使是微小的改進(jìn) - 都是受歡迎的。這也適用于 <search> 。這是 HTML 家族的一個(gè)極好的新成員。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

到此這篇關(guān)于新的HTML標(biāo)簽<search>詳解的文章就介紹到這了,更多相關(guān)HTML標(biāo)簽<search>內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論