How to use the <header> tag of html-HTML Tutorial-php.cn

How to use the

tag of html

php中世界最好的语言

Release： 2017-11-22 17:17:23

Original

5240 people have browsed it

In versions before HTML5, you may have the habit of using DIV tags to layout web pages, but H5 adds a header tag element based on the DIV tag, which is what we call the head tag. In the past, we often divided web pages into layouts. For the header, content, and bottom, there are now systematic tags to help us plan, which is a lot more convenient. So how do we use this header tag? Today we will take a closer look

It should be recognized by everyone that "header" is a commonly used name in html layout, so a new header tag element has been added to HTML5. You can understand why the header is added as a label element in html5.

In addition to using the header tag directly, you can also set class or id to the header.

Syntactic structure

The header tag element has the same usage as p. There is a beginning and there is a closure.

Syntax:

<header>内容</header>

Copy after login

Do not give id or class directly

<header>头部内容区</header>

Copy after login

Set id

<header id=”p”>头部内容区</header>

Copy after login

Set class

<header class=”p”>头部内容区</header>

Copy after login

Features: Just like The DIV tag element can be used multiple times, and id or class can be used to set different styles in different places.

Compatibility

Because the header tag is a new tag element in HTML5, older versions of browsers do not support it. It requires browsers such as IE9+ or above and the latest Google Chrome to support it. Of course, domestic browsers such as 360 Browser, Baidu Browser, and Aoyou Browser all borrow the IE kernel that comes with the system, so domestic browsers are actually the same version as the IE version that comes with your system, so you IE BrowserIn IE9 or above, it is naturally compatible with the new tag elements of HTML5.

New and old DIV layout comparison case

Observe and master the application of header by comparing DIV+CSS layout and HTML5+CSS layout.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html5 Header标签实例</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> 
<p id="header">我在传统p布局中</p> 
 
<header>我在传统p布局中,必须在支持HTML5浏览器才能看到效果， 
建议谷歌浏览器测试观察效果</header> 
 
<header class="color-000">我颜色为黑色,背景为#666</header> 
</body> 
</html>

Copy after login

There are so many uses of the

tag. For more exciting content, please pay attention to the php Chinese website Other related articles!