Home >
Article > Web Front-end > How to use the
How to use the tag of html
- php中世界最好的语言Original
- 2017-11-22 17:17:235173browse
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>
Do not give id or class directly
<header>头部内容区</header>
Set id
<header id=”p”>头部内容区</header>
Set class
<header class=”p”>头部内容区</header>
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>There are so many uses of the 1aa9e5d373740b65a0cc8f0a02150c53 tag. For more exciting content, please pay attention to the php Chinese website Other related articles!
Related reading:
The above is the detailed content of How to use the