html中header定義的作用是什么

本篇文章給大家分享的是有關html中header定義的作用是什么，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)為企業(yè)級客戶提高一站式互聯(lián)網+設計服務，主要包括成都網站制作、成都網站建設、重慶APP軟件開發(fā)、小程序開發(fā)、宣傳片制作、LOGO設計等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經驗豐富的經驗，可以確保每一個作品的質量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。 

在html中，header標簽定義文檔的頁眉。語法格式為“<header>內容</header>”。header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區(qū)塊的標題等。

一、header標簽元素基本介紹

在HTML5版本之前習慣使用div標簽布局網頁，在HTML5在div標簽基礎上新增header標簽元素。也叫“<header>”頭部標簽。以前我們在div css布局中常常把網頁大致分為頭部、內容、底部。對于大結構我們常常使用div里加id進行布局。而頭部常常使用<div id=”header”></div>或<div class=”header”></div>進行布局，特點與傳統(tǒng)div布局不同，少了div做標簽，而是新增元素標簽。

正應為大家公認html布局中對“header”為常用命名，所以在HTML5新增了個header標簽元素?？梢赃@樣理解為什么在html5中新增header為標簽元素。

除了直接使用header標簽外，也可以對header設置class或id。

二、語法結構

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

語法：

<header>內容</header>

1、直接不給id或class

<header>頭部內容區(qū)</header>

2、設置id

<header id=”pcss5”>頭部內容區(qū)</header>

3、設置class

<header class=”pcss5”>頭部內容區(qū)</header>

4、特點：就像div標簽元素一樣可以多次使用，不同地方可以使用id或class設置不同樣式。

三、兼容性

因為header標簽是HTML5新增標簽元素，所以舊版本瀏覽器均不支持，需要IE9+以上瀏覽器、最新谷歌Chrome等瀏覽器才支持。當然國內360瀏覽器、百度瀏覽器、遨游瀏覽器等瀏覽器均借用系統(tǒng)自帶IE內核，所以國內瀏覽器實際上與你系統(tǒng)自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然就兼容HTML5新增標簽元素。

四、新舊div布局對比案例

通過div+CSS布局與HTML5+CSS布局對比觀察并掌握對header應用。

實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>html5 Header標簽實例 DIVCSS5</title>
    <style>
      /* 傳統(tǒng)布局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">我在傳統(tǒng)div布局中</div>

    <header>
      我在傳統(tǒng)div布局中,必須在支持HTML5瀏覽器才能看到效果，
      建議谷歌瀏覽器測試觀察效果
    </header>

    <header class="color-000">我顏色為黑色,背景為#666</header>
  </body>
</html>

效果截圖

html中header定義的作用是什么

以上就是html中header定義的作用是什么，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：html中header定義的作用是什么
當前網址：http://muchs.cn/article30/johcpo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、云服務器、Google、網站導航、網站建設、網頁設計公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網站建設