Usage of HTML <header> tag-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Usage of HTML

tag

Usage of HTML

tag

巴扎黑

Jun 07, 2017 am 11:41 AM

html5 header element tag The new tag element of html5 is

. Through the html header basic tutorial, you can learn how to use it as a header css layout technique.

1. Basic introduction to the header tag element - TOP

Before the HTML5 version, it was customary to use div tags to layout web pages. In HTML5, a new header tag element is added based on the DIV tag. Also called the "

" header tag. In the past, we often divided web pages into header, content, and bottom in div css layout. For large structures, we often use divs with ids for layout. The header is often laid out using or . The characteristics are different from the traditional DIV layout. There is no need for div. tag, but add a new element tag.

It is recognized 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.

2. Syntax structure - TOP

The header tag element is used the same as div. There is a beginning and a closing.

Grammar:

Content

1. Directly do not give the id or class

header Content area

2. Set id

Header content area

3. Set class

Header content area

4. Features: Just like the DIV tag element, it can be used multiple times in different places Different styles can be set using id or class.

3. Compatibility - TOP

Because the header tag is a new tag element in HTML5, older versions of browsers do not support it. It requires IE9+ or above browsers, the latest Google Chrome and other browsers. support. Of course, domestic browsers such as 360 Browser, Baidu Browser, and Aoyou Browser all use 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 your IE browser is IE9 or above. The version is naturally compatible with the new tag elements of HTML5.

4. Comparison case of old and new DIV layout - TOP

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

1. DIVCSS5 instance HTML5+CSS complete code

<!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. Effect screenshot

Usage of HTML <header> tag

## Code screenshot in DW software, effect in Google Chrome (supports HTML5) browser effect for PS rendering. Ordinary IE6-IE8 do not support HTML5 and cannot see the HTML5 layout effect. You need IE9 and above browsers to see the layout effect.

The above is the detailed content of Usage of HTML

tag. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn