关于javascript:新的HTML标签-search

8次阅读

共计 2037 个字符,预计需要花费 6 分钟才能阅读完成。

本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一工夫和你分享前端行业趋势,学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi,蕴含一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的,咱们出的钱
体验地址:https://chat.waixingyun.cn
能够退出网站底部技术群,一起找 bug.

本文介绍了一种新的 HTML 元素搜寻办法,并提供了一个实用的工具来帮忙开发者疾速找到所需的元素。这对于那些须要解决大量 HTML 元素的开发者来说是十分有用的。文章还通过提供一些常见元素的用法示例,帮忙开发者更好地了解和利用这些元素。在泛滥元素中找到特定的元素。为了解决这个问题,文章介绍了一种新的 HTML 元素搜寻办法。

上面是注释

一个新的语义元素曾经退出了 HTML 规范 <search>。它代表文档中用于搜寻或过滤的局部。它应该蕴含表单控件(如文本输出、下拉菜单、按钮等),搜寻 / 过滤的范畴能够是任何内容:从同一文档到整个互联网。

如何运作

<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> 包装所有内容。总体而言,这是更多的文本 / 代码(仅三个字符)和更多的嵌套(一个更高的级别)。

舒适提醒:只管咱们在构建搜寻组件时并不强制须要 <form> 标签,然而应用它却能带来额定的益处(甚至是必须的)。这样,即便在无 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。

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
 0