Question

如果我有一个页面区域，其中包含用于过滤搜索结果的不同选项（带有链接，复选框，选择等的无序列表）。应该使用什么html5标签来包装过滤器？ A＆＃34;部分＆＃34;标签，＆＃34;导航＆＃34;标签或其他什么？

<div id="search-filters"> <!-- This should be a div, a nav, a section? -->
    <h3>Price</h3>
    <ul>
        <li>less than 100</li>
        <li>100 - 200</li>
        <li>more than 200</li>
    </ul>

    <h3>Brand</h3>
    <ul>
        <li>Brand A</li>
        <li>Brand B</li>
        <li>Brand C</li>
    </ul>

    ...
</div>
<section id="search_results">
    ...
</section>

Answer 1

您可以使用header element：

header元素代表一组介绍性或导航辅助工具。

请注意，header需要在搜索结果的切片元素（在您的情况下为section）中

<section id="search_results">

  <h1>Search results</h1>

  <header id="search-filters">
    <!-- your filters -->
  </header>

  <article>
    <!-- search result 1 -->
  </article>

  <article>
    <!-- search result 2 -->
  </article>

</section>

如果您愿意，也可以在h1中添加header。如果您需要为过滤器设置样式挂钩，则可以使用包装器div。

如果您的过滤器相当复杂，例如如果您提供了许多过滤器，可能包含子标题，则可以在section内使用header元素：

<section id="search_results">

  <h1>Search results</h1>

  <header id="search-filters">
    <section>
      <h2>Filter the results</h2>
      <!-- your filters -->
    </section>
  </header>

  <article>
    <!-- search result 1 -->
  </article>

  <article>
    <!-- search result 2 -->
  </article>

</section>

Answer 2

怎么样：

<nav role="search">
...
</nav>

我知道这不完美，因为......

nav并没有在标准中说明它应该被使用，但它显然会引导你到不同的页面（这是）。没有更好的方法，但您也可以使用menu，因为它也可以被视为命令（1，2）。
并不是真正的“搜索”角色，因为你说它正在过滤已经搜索过的内容，但我认为它是最接近它的。

Answer 3

我会在html中使用这样的东西：

<form method="get">
    Search By Client Name: <input type="search" name="searchText" />
    <input type="submit" value="Search" />
</form>

在控制器中，有这样的事情：

// GET: /Clients/

MyContextDB db = new MyContextDB();

public ActionResult Index(string searchText = null)
{
    var model =
    db.ClientProfiles
        .OrderBy(r => r.ClientName)
        .Where(r => searchText == null || r.ClientName.StartsWith(searchText))
        .Take(2)
        .Select(r => new ClientListViewModel {
            ClientId = r.ClientId,
            ClientName = r.ClientName,
            ....
        });

    return View(model);
}

应该使用什么html5标记来过滤搜索结果

3 个答案: