记录--新的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>
看法
拥有一个用于识别搜索区域的元素是很好的。正如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。