记录--新的HTML标签：<search>-Toy模板网

这篇具有很好参考价值的文章主要介绍了记录--新的HTML标签：<search>。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

本文介绍了一种新的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>