掌握 HTML Header 标签：打造网页结构的坚实基础

HTML 中，Header 标签起着至关重要的作用，它定义了网页的头部结构，为整个网页的内容分级和组织奠定了基础。Header 标签的使用直接影响着网页的布局、搜索引擎优化（SEO）和访问者体验。现在，让我们深入探讨 HTML Header 标签的奥秘，帮助你打造出结构清晰、易于阅读和搜索引擎优化的网页！

HTML Header 标签介绍

在 HTML 中，它通常位于网页的顶部，包含着网页标题、logo、导航菜单等重要元素。Header 标签可以出现不止一次，这意味着一个网页可以有多个 header 部分，但通常主 header 部分只会出现一次，用于包含与整个网页相关的全球性信息。

Header 标签的正确使用方法

正确使用 Header 标签对于构建一个良好网页结构至关重要。以下是你需要注意的关键点：

网页标题 (h1) ： Header 标签内通常包含一个网页标题，使用
标签来定义。这个标题应该准确地描述网页内容，因为它不仅是网页的视觉焦点，也是搜索引擎抓取网页内容的关键。
层级与嵌套： Header 标签内可以包含不同层级的标题，
确保标题层级是清晰的，不要跳级使用，这有助于搜索引擎正确理解网页结构。此外，你也可以在 Header 标签内嵌套其他标签，比如标签用于定义导航链接。
logo 与品牌形象：在 Header 部分包含你的 logo 和品牌名称，这有助于提升品牌辨识度和用户体验。你可以使用标签来添加 logo 图片，并确保它具有合适的替代文本 (alt text) 以利于 SEO 和辅助技术。
元数据与 SEO： Header 标签也是添加元数据 (meta data) 的理想位置，这可以帮助搜索引擎更好地理解和索引你的网页。使用标签来定义关键词、描述、作者等信息，确保你的网页在搜索结果中脱颖而出。

最佳实践与建议

要充分发挥 Header 标签的潜力，以下是一些最佳实践建议：

保持简洁与聚焦： Header 部分应该简洁明了，只包含必要的信息。避免在 Header 中添加过多内容，这可能会分散读者注意力并影响网页性能。
响应式设计：确保你的 Header 在不同设备和屏幕尺寸上都能良好呈现。使用响应式设计技术，比如媒体查询，使你的网页在手机、平板和桌面电脑上都能提供一致且便于使用的体验。
易于导航： Header 部分应该包含清晰易懂的导航链接，帮助读者快速定位他们感兴趣的内容。确保导航链接的标签具有描述性，且与网页内容相关。
测试与验证：使用 HTML 验证工具确保你的 Header 代码符合标准。此外，在不同浏览器和设备上测试你的网页，确保 Header 部分在所有环境中都能正常呈现。

结论

HTML Header 标签是构建网页结构的基石，它影响着网页的视觉呈现、用户体验和搜索引擎优化。通过正确使用 Header 标签，你可以打造出层级分明、易于导航和搜索引擎友好的网页。记住本文的最佳实践建议，你将能够创建出高质量、高性能且吸引人的网页！

端学习的太差了，一个header写了半天才写个勉强能用的。

vue-cli引入scss

npm install node-sass --save

npm install sass-loader --save

从element-ui官方拷贝一个导航栏修改

<div class="myHeader">
        <div class="headBack">
            <el-row class="container">
                <el-col :span="24">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#000">
                        <el-menu-item index="1">处理中心</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                            <el-menu-item index="2-3">选项3</el-menu-item>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项1</el-menu-item>
                                <el-menu-item index="2-4-2">选项2</el-menu-item>
                                <el-menu-item index="2-4-3">选项3</el-menu-item>
                            </el-submenu>
                        </el-submenu>

                        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </div>
    </div>

css样式完善

/*顶部导航栏盒子*/
.myHeader {
  /** 导航栏固定在顶部*/
  .headBack{
    width: 100%;
    background: rgba(40,52,44,0.6);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .headBox .el-menu {
    background: transparent;
    border-bottom: none!important;
  }
  .headBox .el-menu-demo li.el-menu-item,
  .headBox .el-menu--horizontal .el-submenu .el-submenu__title {
    height: 38px;
    line-height: 38px;
    border-bottom: none!important;
  }
  //导航栏字体修改
  .headBox .el-submenu div.el-submenu__title{
    color: #fff;
  }
  .el-menu--horizontal >ul ,
  .headBox>ul li.el-menu-item:hover,
  .headBox>ul li.el-submenu:hover .el-submenu__title,
  .headBox ul .el-submenu .el-menu .el-menu-item ,
  .headBox .el-menu--horizontal.menu  ul{
    background: #48456C;
    border-bottom: none;
    box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.1) !important;
  }
  // 如果展开颜色显示和下拉列表一致
  .is-opened{
    background: #48456C !important;
  }
  // 菜单右边
  .userInfo{
    position: absolute;
    right: 30px;
    color: #ffffff;
    line-height: 38px;
  }
   .userInfo a {
    color: #fff;
    font-size: 13px;
    transition: all 0.2s ease-out;
  }

  .headBox .userInfo a:hover {
    color: #48456C;
  }
  .pcsearchbox{
    max-width: 170px;
    height: 100%;
    line-height: 38px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }
  /*pc搜索框*/

  .headBox .pcsearchbox {
    padding: 0;
    max-width: 170px;
    /*min-width: 30px;*/
    height: 100%;
    line-height: 38px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  .headBox .pcsearchbox:hover .pcsearchinput {
    opacity: 1;
    /*transform: scaleX(1);*/
    visibility: visible;
  }

  .headBox .pcsearchbox i.pcsearchicon {
    color: #fff;
    padding-left: 10px;
  }

  .headBox .pcsearchbox .pcsearchinput {
    width: 180px;
    padding: 10px 20px 10px 20px;
    background: rgba(40, 42, 44, 0.6);
    border-radius: 0 0 2px 2px;
    position: absolute;
    right: 0;
    top: 38px;
    opacity: 0;
    visibility: hidden;
    /*transform: scaleX(0);*/
    transform-origin: right;
    transition: all 0.5s ease-out;
  }

  .headBox .pcsearchbox .hasSearched {
    opacity: 1;
    /*transform: scaleX(1);*/
    visibility: visible;
  }

  .headBox .pcsearchbox .el-input {
    width: 100%;
  }

  .headBox .el-input__inner {
    height: 30px;
    border: none;
    background: #fff;
    /*border: 1px solid #333;*/
    border-radius: 2px;
    padding-right: 10px;
  }

}
/*下拉选项菜单*/
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background-color: #64609E !important;
  float: none;
  height: 36px;
  line-height: 36px;
  color: #909399;
  position: relative;
}
//  下拉菜单
body > div.el-menu--horizontal.menu > ul{
  list-style: none;
  position: relative;
  margin: 0;
  z-index: 100;
  min-width: 130px;
  border: none;
  padding:  0;
  border-radius: 2px;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
}

body > div.el-menu--horizontal.menu > ul > li:hover {
  background: #48456C !important;
}

修改后的页面

<template>
    <div class="myHeader">
        <div class="headBack">
            <el-row class="container">
                <el-col :span="24">
                    <!-- pc端导航 -->
                    <div class="headBox">
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                                 @select="handleSelect" text-color="#fff">
                            <el-menu-item index="1">处理中心</el-menu-item>
                            <el-submenu index="2" popper-class="menu">
                                <template slot="title">我的工作台</template>
                                <el-menu-item index="2-1">选项1</el-menu-item>
                                <el-menu-item index="2-2">选项2</el-menu-item>
                                <el-menu-item index="2-3">选项3</el-menu-item>

                            </el-submenu>

                            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
                            <div index="" class="pcsearchbox">
                                <i class="el-icon-search pcsearchicon"></i>
                                <div class="pcsearchinput" :class="input?'hasSearched':''">
                                    <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="searchEnterFun" @keyup.enter.native="searchEnterFun" @change="searchChangeFun">
                                    </el-input>
                                </div>
                            </div>
                            <div class="userInfo">
                                <div v-show="!haslogin" class="nologin">
                                    <a href="javascript：void(0);" @click="logoinFun(1)">登录 </a>|<a href="javascript：void(0);" @click="logoinFun(0)"> 注册</a>
                                </div>
                                <div v-show="haslogin" class="haslogin">
                                    <i class="fa fa-fw fa-user-circle userImg"></i>
                                    <ul class="haslogin-info">
                                        <li>
                                            <a href="#/UserInfo">个人中心</a>
                                        </li>
                                        <li>
                                            <a href="#/LikeCollect?like=1">喜欢列表</a>
                                        </li>
                                        <li>
                                            <a href="#/LikeCollect?like=2">收藏列表</a>
                                        </li>
                                        <li>
                                            <a href="javascript：void(0);" @click="userlogout">退出登录</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>


                        </el-menu>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>

    export default {
        name: ""
    }
</script>

<style lang="scss">
    @import "../static/css/header.scss";
</style>

效果

小节基本要求：

会使用webstorm开发工具
至少明白html与css的作用

要点：

<ul><li>首页</li><li>xxxx</li>.....</ul>标签的使用
标签之间存在一种关系，称为父子关系。例如，li标签在ul标签里面，那么li就是子标签，ul就是父标签。

先看最终效果图

Step1

我们采用第二种方式-解耦方式，来编辑网页。所以要将css与html分离开编写。

右键项目-》new-》Directory

建立两个文件夹，分别是css、view。

顾名思义，css是放css文件的地方，view是放html文件的地方。

ps：通过上篇知道，代码是要写在html中的。

右键css文件夹，创建一个空的css文件，取名header

右键view文件夹，创建一个空的html文件，取名header

(它们的文件格式是不一样的)，css也取名为header可以理解为这个css文件是为header.html文件提供的。

Step2

开始编辑刚刚创建的header.html文件

body标签中的代码

<header>
    <nav>
        <span>
           <ul>														  <!--这个ul标签是关键-->
               <li>得之我幸</li>		<!--这个li标签全在ul标签里面，可以将它称为ul的子标签-->
               <li>首页</li>						<!--反之ul可以称为li标签的父标签-->
               <li>时间轴</li>
               <li>标签</li>
               <Li>分类</Li>
               <li>友情链接</li>
               <li>关于我</li>
               <li>更多</li>
           </ul>
        </span>
    </nav>
</header>

右键-》run一下，看看效果

可以发现，所有的文字都出来了，接下来该怎么做呢？该用css将它们的位置固定了吧！

“得之我幸”在左边，其它的在右边
而且文字不是竖着排列的，是横着的

下一篇，用css样式文件来达到美化刚刚创建的header.html的目的：https://www.toutiao.com/i6960072832588169739/

在线咨询

上一篇：html开发笔记20-合并单元格-列和行
下一篇：精美html大型商城模板通用电商模板源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商