新的HTML标签<search>详解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">如何运作</a></li><li><a href="#_label1">看法</a></li></ul></div><p>本文介绍了一种新的HTML元素搜索方法，并提供了一个实用的工具来帮助开发者快速找到所需的元素。这对于那些需要处理大量HTML元素的开发者来说是非常有用的。文章还通过提供一些常见元素的用法示例，帮助开发者更好地理解和应用这些元素。在众多元素中找到特定的元素。为了解决这个问题，文章介绍了一种新的HTML元素搜索方法。</p><p>一个新的语义元素已经加入了 HTML 标准 。它代表文档中用于搜索或过滤的部分。它应该包含表单控件（如文本输入、下拉菜单、按钮等），搜索/过滤的范围可以是任何内容：从同一文档到整个互联网。</p>
<p class="maodian"><a name="_label0"></a></p><h2>如何运作</h2>
<p>在 <code><search></code> 元素之前，我们可以在 <code><form></code> 标签中添加 <code>role="search"</code> 以指示该表单用于搜索：</p>
<div class="jb51code"><pre class="brush:xhtml;"><form role="search" method="get" action="/search">
<input type="search" name="search-text" />
<button>Search</button>
</form></pre></div>
<p>有了这个新添加的功能，我们可以使用<code><search</code>> 标签来包装表单：</p>
<p>由于 <code><search></code> 是标准中的新内容，所有浏览器、屏幕阅读器和其他工具可能需要一段时间才能跟上。在此期间，我们可以使用一个 <code>hack</code>，指定它已经具有的 ARIA 角色（类似于 <code><nav></code>所发生的情况）。这在未来可能会变得多余，但它可能会为我们的代码做好准备，以便在浏览器支持新标签时使用。</p>
<div class="jb51code"><pre class="brush:xhtml;"><search role="search">
...
</search></pre></div>
<p>这看起来有些违反直觉：我们正在移除 <code>role="search"</code>，但我们正在用<code><search></code>包装所有内容。总体而言，这是更多的文本/代码（仅三个字符）和更多的嵌套（一个更高的级别）。</p>
<blockquote><p>温馨提示：尽管我们在构建搜索组件时并不强制需要</p>标签，但是使用它却能带来额外的好处（甚至是必须的）。这样，即使在无JavaScript环境下，搜索功能也能保持正常运行，或者说，这是一种实践渐进式增强策略的方式。</blockquote>
<p>另一个需要注意的关键点是，搜索区域不一定是网站或在线平台上带有搜索按钮的文本输入框。我们可以使用 <code><search></code>来过滤结果或表格行。它的实用性不仅限于文本输入和搜索框：</p>
<div class="jb51code"><pre class="brush:xhtml;"><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></pre></div>
<p class="maodian"><a name="_label1"></a></p><h2>看法</h2>
<p>拥有一个用于识别搜索区域的元素是很好的。<a href="https://www.scottohara.me/blog/2023/03/24/search-element.html" rel="external nofollow" target="_blank">正如Scott O'Hara在这篇文章中指出的那样</a>，直到现在，这是唯一一个在HTML中没有语义等效项的ARIA地标角色：</p>
<ul><li>banner → <code><header></code></li><li>complementary → <code><aside></code></li><li>form → <code><form></code></li><li>main → <code><main></code></li><li>navigation → <code><nav></code></li><li>region → <code><section></code></li><li>search → ???</li></ul>
<p>使用 <code><search></code> 来标识应具有“搜索”角色的部分，我们将使用一些语义化的 HTML 元素覆盖所有 ARIA 地标角色。这很棒：它将提高可访问性（尽管如上所述，需要一段时间才能让所有浏览器跟上），并扩展了语言的语义。</p>
<p>但是，从程序员的角度来看，它感觉不够完善或没有为现有的实现增加太多东西。其他语义元素可以提高可访问性并简化我们编写特定组件的方式。例如，像 <code><tabpanel></code> 和<code><tab></code> 这样的东西，在我看来会更具说服力和价值。</p>
<p>这并不会削弱它的重要性。所有的改进 - 即使是微小的改进 - 都是受欢迎的。这也适用于 <code><search></code> 。这是 HTML 家族的一个极好的新成员。</p>
<p><strong>代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 <a href="https://link.juejin.cn/?target=https%3A%2F%2Fwww.fundebug.com%2F%3Futm_source%3Dxiaozhi" rel="external nofollow" target="_blank">Fundebug</a>。</strong></p>
頁:
[1]