這里給大家分享我在網(wǎng)上總結(jié)出來(lái)的一些知識(shí),希望對(duì)大家有所幫助
本文介紹了一種新的HTML元素搜索方法,并提供了一個(gè)實(shí)用的工具來(lái)幫助開發(fā)者快速找到所需的元素。這對(duì)于那些需要處理大量HTML元素的開發(fā)者來(lái)說是非常有用的。文章還通過提供一些常見元素的用法示例,幫助開發(fā)者更好地理解和應(yīng)用這些元素。在眾多元素中找到特定的元素。為了解決這個(gè)問題,文章介紹了一種新的HTML元素搜索方法。
下面是正文
(資料圖)
一個(gè)新的語(yǔ)義元素已經(jīng)加入了 HTML 標(biāo)準(zhǔn) 。它代表文檔中用于搜索或過濾的部分。它應(yīng)該包含表單控件(如文本輸入、下拉菜單、按鈕等),搜索/過濾的范圍可以是任何內(nèi)容:從同一文檔到整個(gè)互聯(lián)網(wǎng)。
如何運(yùn)作
在
元素之前,我們可以在 標(biāo)簽中添加
role="search"
以指示該表單用于搜索:
有了這個(gè)新添加的功能,我們可以使用
由于
是標(biāo)準(zhǔn)中的新內(nèi)容,所有瀏覽器、屏幕閱讀器和其他工具可能需要一段時(shí)間才能跟上。在此期間,我們可以使用一個(gè) hack
,指定它已經(jīng)具有的 ARIA 角色(類似于 所發(fā)生的情況)。這在未來(lái)可能會(huì)變得多余,但它可能會(huì)為我們的代碼做好準(zhǔn)備,以便在瀏覽器支持新標(biāo)簽時(shí)使用。
...
這看起來(lái)有些違反直覺:我們正在移除 role="search"
,但我們正在用
包裝所有內(nèi)容??傮w而言,這是更多的文本/代碼(僅三個(gè)字符)和更多的嵌套(一個(gè)更高的級(jí)別)。
溫馨提示:盡管我們?cè)跇?gòu)建搜索組件時(shí)并不強(qiáng)制需要
標(biāo)簽,但是使用它卻能帶來(lái)額外的好處(甚至是必須的)。這樣,即使在無(wú)JavaScript環(huán)境下,搜索功能也能保持正常運(yùn)行,或者說,這是一種實(shí)踐漸進(jìn)式增強(qiáng)策略的方式。
另一個(gè)需要注意的關(guān)鍵點(diǎn)是,搜索區(qū)域不一定是網(wǎng)站或在線平臺(tái)上帶有搜索按鈕的文本輸入框。我們可以使用
來(lái)過濾結(jié)果或表格行。它的實(shí)用性不僅限于文本輸入和搜索框:
Filter results
看法
擁有一個(gè)用于識(shí)別搜索區(qū)域的元素是很好的。正如Scott O"Hara在這篇文章中指出的那樣,直到現(xiàn)在,這是唯一一個(gè)在HTML中沒有語(yǔ)義等效項(xiàng)的ARIA地標(biāo)角色:
- banner →
- complementary →
- form →
- main →
- navigation →
- region →
- search → ???
使用
來(lái)標(biāo)識(shí)應(yīng)具有“搜索”角色的部分,我們將使用一些語(yǔ)義化的 HTML 元素覆蓋所有 ARIA 地標(biāo)角色。這很棒:它將提高可訪問性(盡管如上所述,需要一段時(shí)間才能讓所有瀏覽器跟上),并擴(kuò)展了語(yǔ)言的語(yǔ)義。
但是,從程序員的角度來(lái)看,它感覺不夠完善或沒有為現(xiàn)有的實(shí)現(xiàn)增加太多東西。其他語(yǔ)義元素可以提高可訪問性并簡(jiǎn)化我們編寫特定組件的方式。例如,像
和
這樣的東西,在我看來(lái)會(huì)更具說服力和價(jià)值。
這并不會(huì)削弱它的重要性。所有的改進(jìn) - 即使是微小的改進(jìn) - 都是受歡迎的。這也適用于
。這是 HTML 家族的一個(gè)極好的新成員。
代碼部署后可能存在的BUG沒法實(shí)時(shí)知道,事后為了解決這些BUG,花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試,這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
本文轉(zhuǎn)載于:
https://juejin.cn/post/7236372620999868477
如果對(duì)您有所幫助,歡迎您點(diǎn)個(gè)關(guān)注,我會(huì)定時(shí)更新技術(shù)文檔,大家一起討論學(xué)習(xí),一起進(jìn)步。
關(guān)鍵詞: