新的HTML标签<search>教程

今天给大家带来的是关于新的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>包装所有内容。总体而言，这是更多的文本/代码（仅三个字符）和更多的嵌套（一个更高的级别）。

温馨提示：尽管我们在构建搜索组件时并不强制需要

标签，但是使用它却能带来额外的好处（甚至是必须的）。这样，即使在无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。

到此这篇关于新的HTML标签&lt;search&gt;详解的文章就介绍到这了,更多相关HTML标签&lt;search&gt;内容请搜索乐学习HTML/CSS教程文章以前的文章或继续浏览下面的相关文章希望大家以后多多支持乐学习HTML/CSS教程文章！

Tags： html/CSS

版权声明： 感谢您对【乐学习】网站平台的认可，无特别说明，本站所有文章均归【乐学习】平台所有，转载请说明文章出处“来源【乐学习】”。 https://x.6wyx.com/post/82282.html