Html Flexbox导航栏、容器和语义_Html_Css_Flexbox_Navigation_Navbar

Html Flexbox导航栏、容器和语义

html css navigation

Html Flexbox导航栏、容器和语义,html,css,flexbox,navigation,navbar,Html,Css,Flexbox,Navigation,Navbar,这是我关于stackoverflow的第一个问题。如果我没有相应地格式化或询问此问题，请提前原谅我因此，我见过人们以多种方式构建导航栏，特别是使用flexbox，因此，我知道这个主题以前曾多次提到，但是，如果：出于SEO目的，我网站上的品牌/徽标是否必须位于任何其他标题标签的标签内将品牌/徽标留在标签之外是否正确例如（下面的代码），我将使用class=container设置作为flex容器，但是站点中其他所有使用相同类的内容都将获得显示：flex也是。您是否建议创建一个单独的容器类来包含

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

因此，我见过人们以多种方式构建导航栏，特别是使用flexbox，因此，我知道这个主题以前曾多次提到，但是，如果：

出于SEO目的，我网站上的品牌/徽标是否必须位于任何其他标题标签的

标签内

将品牌/徽标留在

标签之外是否正确

例如（下面的代码），我将使用

class=container

设置

作为flex容器，但是站点中其他所有使用相同类的内容都将获得

显示：flex也是。您是否建议创建一个单独的容器类来包含just navbar？我正在应用display:flex和
，因此所有内容都在同一行上


非常感谢您抽出时间阅读本文，如果这是一个老话题，我再次表示歉意。我试图更好地组织我的代码并理解最佳实践
<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>







就搜索引擎优化而言，有多种方法可以获得更好的评级。H1可能是最好的，但您可以使用任何标题标记，并强调粗体、斜体等内容。
在这个区域中也有元标记，比如
<meta name="keywords" content="your keywords here">



在整个页面中使用关键词也是一个很大的帮助。人们在页面上获得巨大点击的一种方式是在链接中添加名称。就像你在网上看到的文章一样，它们将是/name_of_the_article.html这对搜索引擎有很大帮助
对于品牌/徽标，最好将其置于导航标签之外。您可能希望将它放在自己的div中，或者将它们都放在div树中，以便更轻松地定位它。但是，如果你希望品牌/标志与导航栏在一起，那么你也可以在那里使用它
对于容器部分，在没有看到css的情况下，我会说，如果它们将具有相同的样式，那么一定要将它们放在一起。但是，除非这些都是非常简单的东西，否则最好给他们自己的类作为一件事的样式，可能不适合另一件事
如果您可以制作一个JSFIDLE或codepen，那么就可以更容易地了解您特别想要的关于css类的内容。
嗨，Steve，谢谢您的回答。我做了一个代码笔项目来更好地说明它。简单地说，我的意思是，通过使它在语义上准确，似乎我必须使用更多的标记。例如，为了使整个flexbox工作，我必须将其应用于容器div。如果我需要在一个部分中再次重用它，例如，它将以一种我无法重用的方式进行配置。对它的链接进行了一些更改，我保持了相同的样式，但释放了容器类，以便可以通用。它可能可以清理得更好一点，但这是一个快速的修改。史蒂夫，非常感谢你的帮助和关注。顺便说一句，我尝试过的解决方案之一是使用一个容器类，它具有通常的margin:0auto
和最大宽度：
，并使用我需要的所有flex规范对其进行应用和id，以达到“浮动”效果。这样我可以在整个页面中重用容器类。很高兴我能帮忙。：-）我也在学习。太有趣了。