html5 <header>標籤版面教學-html教學-PHP中文網

首頁

web前端

html教學

html5

標籤版面教學

html5

標籤版面教學

巴扎黑

Jun 27, 2017 am 10:23 AM

h5headerhtml5

html5 header元素標籤 html5新增標籤元素之

，透過html header基礎教學學習同時作為header css佈局技巧

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

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

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

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

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

語法：

內容

1、直接不給id或class

2、設定id

頭部內容區

3、設定class

頭部內容區

#4、特色：就像DIV標籤元素一樣可以多次使用，不同地方可以使用id或class設定不同樣式。

三、相容性 - TOP

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

四、新舊DIV佈局比較案例 - TOP

#透過DIV+CSS佈局與HTML5+CSS佈局比較觀察並掌握對header應用。

1、DIVCSS5實例HTML5+CSS完整程式碼

<!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>

2、效果截圖

div與header佈局效果截圖

html5 <header>標籤版面教學

###################################################### ###DIVCSS5特別提示：程式碼在DW軟體截圖、效果在GoogleChrome（支援HTML5）瀏覽器效果進行PS的效果圖。一般IE6-IE8不支援HTML5看不到HTML5佈局效果，需要IE9以上版本瀏覽器才能看到佈局效果。 ###

以上是html5

標籤版面教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

linux的header是什么意思Jul 18, 2023 pm 03:34 PM

linux的header是指在文件或数据流中的开头部分，用于包含关于内容的元数据，通过正确地编写和使用Header文件，开发者能够更好地利用系统资源，提高代码的可读性和可维护性。

SpringBoot怎么通过Feign调用传递Header中参数May 16, 2023 pm 08:38 PM

【SpringBoot】通过Feign调用传递Header中参数如何通过Feign传递Header参数问题描述我们在SpringCloud中使用Feign请求另一个服务的Api接口时，有将Header中参数传递下去的需求，如果不做特殊处理，就会将Header中的参数丢失。解决方案方案一：通过@RequestHeader(name="headerName")来传递例如：Feign定义如下@FeignClient(name="service-name")pub