首頁 > web前端 > html教學 > html中header定義什麼意思

html中header定義什麼意思

醉折花枝作酒筹
發布: 2023-01-06 11:16:47
原創
18868 人瀏覽過
在html中,header標籤定義文件的頁首。語法格式為“
內容
”。 header元素是一種具有引導和導航作用的結構元素,通常用來放置整個頁面或頁面內的一個內容區塊的標題等。

html中header定義什麼意思

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

一、header標籤元素基本介紹

在HTML5版本之前習慣使用div標籤佈局網頁,並在HTML5在div標籤基礎上新增header標籤元素。也叫「

」頭部標籤。以前我們在div css版面中常常把網頁大致分為頭部、內容、底部。對於大結構我們常常使用div裡加id進行佈局。而頭部常使用
進行佈局,特點與傳統div佈局不同,少了div做標籤,而是新增元素標籤。

正應為大家公認html版面配置中對「header」為常用命名,所以在HTML5新增了個header標籤元素。可以這樣理解為什麼在html5中新增header為標籤元素。

除了直接使用header標籤外,也可以對header設定class或id。

二、語法結構

header標籤元素和div用法相同。有開始有閉合。

語法:

<header>内容</header>
登入後複製

1、直接不給id或class

<header>头部内容区</header>
登入後複製

2、設定id

<header id=”pcss5”>头部内容区</header>
登入後複製

3、設定class

<header class=”pcss5”>头部内容区</header>
登入後複製

4、特點:就像div標籤元素一樣可以多次使用,不同地方可以使用id或class設定不同樣式。

三、相容性

因為header標籤是HTML5新增標籤元素,所以舊版瀏覽器皆不支持,需要IE9 以上瀏覽器、最新GoogleChrome等瀏覽器才能支援。當然國內360瀏覽器、百度瀏覽器、遨遊瀏覽器等瀏覽器均借用系統自帶IE內核,所以國內瀏覽器實際上與你係統自帶瀏覽器IE版本相同,所以你IE瀏覽器在IE9或以上版本自然相容於HTML5新增標籤元素。

四、新舊div版面比較案例

透過div CSS版面與HTML5 CSS版面比較觀察並掌握對header應用。

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html5 Header标签实例 DIVCSS5</title>
    <style>
      /* 传统布局CSS */
      #header {
        width: 300px;
        height: 40px;
        background: #ccc;
      }

      /* HTML5布局样式 */
      header {
        width: 400px;
        height: 70px;
        color: #f00;
        background: #f5f5f5;
      }
      .color-000 {
        color: #000;
        background: #666;
      }
    </style>
  </head>
  <body>
    <div id="header">我在传统div布局中</div>

    <header>
      我在传统div布局中,必须在支持HTML5浏览器才能看到效果,
      建议谷歌浏览器测试观察效果
    </header>

    <header class="color-000">我颜色为黑色,背景为#666</header>
  </body>
</html>
登入後複製

效果截圖

html中header定義什麼意思

#推薦學習:html影片教學

#

以上是html中header定義什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板