掌握 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小時內與您取得聯系。

整合營銷服務商