這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 本文介紹了一種新的HTML元素搜索方法，並提供了一個實用的工具來幫助開發者快速找到所需的元素。這對於那些需要處理大量HTML元素的開發者來說是非常有用的。文章還通過提供一些常見元素的用法示例，幫助開發者更好地理解和應用這些元素。在眾多元素 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
本文介紹了一種新的HTML元素搜索方法，並提供了一個實用的工具來幫助開發者快速找到所需的元素。這對於那些需要處理大量HTML元素的開發者來說是非常有用的。文章還通過提供一些常見元素的用法示例，幫助開發者更好地理解和應用這些元素。在眾多元素中找到特定的元素。為瞭解決這個問題，文章介紹了一種新的HTML元素搜索方法。
下麵是正文
一個新的語義元素已經加入了 HTML 標準 。它代表文檔中用於搜索或過濾的部分。它應該包含表單控制項（如文本輸入、下拉菜單、按鈕等），搜索/過濾的範圍可以是任何內容：從同一文檔到整個互聯網。
如何運作
在 <search> 元素之前，我們可以在 <form> 標簽中添加 role="search" 以指示該表單用於搜索：
<form role="search" method="get" action="/search"> <input type="search" name="search-text" /> <button>Search</button> </form>
有了這個新添加的功能，我們可以使用 <search> 標簽來包裝表單：
由於 <search> 是標準中的新內容，所有瀏覽器、屏幕閱讀器和其他工具可能需要一段時間才能跟上。在此期間，我們可以使用一個 hack，指定它已經具有的 ARIA 角色（類似於 <nav> 所發生的情況）。這在未來可能會變得多餘，但它可能會為我們的代碼做好準備，以便在瀏覽器支持新標簽時使用。
<search role="search"> ... </search>
這看起來有些違反直覺：我們正在移除 role="search" ，但我們正在用<search>包裝所有內容。總體而言，這是更多的文本/代碼（僅三個字元）和更多的嵌套（一個更高的級別）。
溫馨提示：儘管我們在構建搜索組件時並不強制需要
標簽，但是使用它卻能帶來額外的好處（甚至是必須的）。這樣，即使在無JavaScript環境下，搜索功能也能保持正常運行，或者說，這是一種實踐漸進式增強策略的方式。
另一個需要註意的關鍵點是，搜索區域不一定是網站或線上平臺上帶有搜索按鈕的文本輸入框。我們可以使用 <search> 來過濾結果或表格行。它的實用性不僅限於文本輸入和搜索框：
<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>
看法
擁有一個用於識別搜索區域的元素是很好的。正如Scott O'Hara在這篇文章中指出的那樣，直到現在，這是唯一一個在HTML中沒有語義等效項的ARIA地標角色：
- banner →
<header> - complementary →
<aside> - form →
<form> - main →
<main> - navigation →
<nav> - region →
<section> - search → ???
使用 <search> 來標識應具有“搜索”角色的部分，我們將使用一些語義化的 HTML 元素覆蓋所有 ARIA 地標角色。這很棒：它將提高可訪問性（儘管如上所述，需要一段時間才能讓所有瀏覽器跟上），並擴展了語言的語義。
但是，從程式員的角度來看，它感覺不夠完善或沒有為現有的實現增加太多東西。其他語義元素可以提高可訪問性並簡化我們編寫特定組件的方式。例如，像 <tabpanel> 和 <tab> 這樣的東西，在我看來會更具說服力和價值。
這並不會削弱它的重要性。所有的改進 - 即使是微小的改進 - 都是受歡迎的。這也適用於 <search> 。這是 HTML 家族的一個極好的新成員。
代碼部署後可能存在的BUG沒法實時知道，事後為瞭解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
本文轉載於:
https://juejin.cn/post/7236372620999868477
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
