时间戳

首页 > 解决方案 > Flexbox 导航栏、容器和语义

html - Flexbox 导航栏、容器和语义

问题描述

这是我在stackoverflow上的第一个问题。如果我没有相应地格式化或询问这个，请提前原谅我。

所以，我看到人们以多种方式构建导航栏，特别是使用 flexbox，因此，我知道这个话题之前被多次提及，但是，如果有人可以澄清我：

  1. 出于 SEO 目的，我网站上的品牌/徽标是否必须位于<h1>任何其他标题标签的标签内？

  2. 将品牌/徽标留在<nav>标签之外是否正确？

  3. 例如（下面的代码），我会将 设置<div>为class= containerflex 容器，但是网站其余部分中具有相同类的所有内容也会得到display: flex;。你会建议创建一个单独的容器类来包含导航栏吗？我正在display: flex;容器上申请，<ul>所以所有人都在同一条线上。

非常感谢您抽出宝贵时间阅读本文，如果这是一个老话题，我再次道歉。我正在尝试更好地组织我的代码并了解最佳实践。

<body>
    <header>
        <div class="container">
            <a href="" class="brand">
                Brand
            </a>

            <nav>
                <ul>
                    <li><a href="#" class="nav-link">services</a></li>
                    <li><a href="#" class="nav-link">about</a></li>
                    <li><a href="#" class="nav-link">location</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>

标签： htmlcssflexboxnavigationnavbar

解决方案

就 SEO 而言，您可以通过多种方式获得更好的评级。H1 可能是最好的，但您可以使用任何标题标签，并强调粗体​​、斜体等内容。该区域还有元标记，例如

<meta name="keywords" content="your keywords here">

在整个页面中使用关键字也是一个很大的帮助。人们在他们的页面上大获成功的方法之一是将名称添加到链接中。就像您在网上看到的文章一样，它们将是 /name_of_the_article.html，这对搜索引擎有很大帮助。

对于品牌/徽标，最好将其留在导航标签之外。您可能希望将其放在自己的 div 中或将它们都包装在 div 树中，以便您可以更轻松地定位它。但是，如果您希望品牌/徽标与导航栏一起使用，那么您也可以在那里拥有它。

对于容器部分，如果没有看到 css，我会说如果它们具有相同的样式，那么一定要把它们放在一起。但除非这都是非常简单的东西，否则最好给他们自己的类作为一件东西的样式，可能不适合另一件东西。

如果您可以制作 jsfiddle 或 codepen，则更容易了解您想要的关于类 css 的具体内容。

推荐阅读