html5 new tag--nav tag introduction-H5 Tutorial-php.cn

html5 new tag--nav tag introduction

青灯夜游

Release： 2018-09-11 15:39:31

Original

4540 people have browsed it

The nav element tag is a new tag added to HTML5. This chapter will bring you an introduction to the nav tag, a new tag in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, nav is also a new element tag in html5. At the same time, like other new tags, nav is used as a common name related to the navigation bar in the traditional HTML layout of previous versions of HTML5.

For example:

<div class=”nav”>网站导航内容</div>

Copy after login

<div id=”nav”>网站导航内容</div>

Copy after login

In HTML5, the previously commonly used named nav is specially used as a new tag element. This tag is often used in navigation layout.

1. HTML nav tag syntax and structure

1. Basic syntax

<nav>内容</nav>

Copy after login

2. nav plus id

<nav id=”abc”>内容</nav>

Copy after login

3. Add class to nav

<nav class=”abc”>内容</nav>

Copy after login

4. Quickly understand and master the nav tag

Nav is related to navigation, so it is generally used for website navigation layout. At the same time, the

tag can be used exactly like using div tags and span tags to add id or class. The difference with the div tag is that this tag is generally only used in navigation-related places, so in an html web page It may be used in the layout of the navigation bar, or in the layout related to the navigation bar.

5. What tags should nav be used with?

DIVCSS5 introduced in the previous article tutorial that the general navigation bar uses the ul li tag layout, and the nav tag and the ul li tag in the general layout are used together.

Small cases are as follows:
1), traditional html layout

<div id=”nav”>
			<ul>
				<li>首页</li>
				<li>栏目名称</li>
				<li>联系我们</li>
			</ul>
		</div>

Copy after login

2), after nav tag

<nav>
<ul>
<li>首页</li>
<li>栏目名称</li>
<li>联系我们</li>
</ul>
</nav>

Copy after login

From the above HTML layout to HTML5 conversion is actually very easy to understand the use of html nav tags and the techniques of layout navigation bar with ul li.

2. Compatibility Tips

Because the

tag is a new tag in HTML 5, and in IE8 and below IE browsers (IE8, IE7, IE6) do not support it, so choose layout HTML according to your needs.

3. HTML nav css layout case

Compare and learn from traditional div layout and nav layout, so as to master nav from html css layout Grammar and Usage.

The following DIVCSS5 allows everyone to master nav layout through three layout practices, respectively:

1), traditional div ul li layout navigation style;

2), nav ul li Layout navigation style;

3) Then set the class css style for nav based on the nav ul li layout

Through the above cases, let everyone understand that nav is generally used with ul li or directly used for layout navigation Related layout, while using nav like div, you can directly set css or add class or id.

The specific cases are as follows:

1. Traditional div css layout and NAV css layout complete HTML source code

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>nav布局 在线演示 DIVCSS5</title> 
<style> 
ul,li{ padding:0; margin:0;list-style:none} 
.nav{border:1px solid #000; width:510px; overflow:hidden} 
.nav li{ line-height:22px; float:left; padding:0 5px;} 
.nav li a:hover{ color:#F00} 
/* 对class=nav设置黑色边框，鼠标滑过超链接文字为红色 */ 
 
nav{ border:1px solid #F00; width:520px; overflow:hidden} 
nav li{line-height:22px; float:left; padding:0 6px;} 
nav li a{ color:#F00} 
/* 对nav设置红色边框，超链接位置为红色 */ 
 
nav.bg{ background:#CCC} 
nav.bg li a{ color:#090} 
/* 对nav设置class=bg，设置背景为灰色，超链接位置为绿色 */ 
</style> 
</head> 
<body> 
<p>传统 div ul li布局导航条效果</p> 
<div class="nav"> 
    <ul> 
        <li><a href="http://www.divcss5.com/">网站首页</a></li> 
        <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> 
        <li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li> 
        <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li> 
        <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> 
        <li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li> 
</ul> 
</div> 
<p>html5 nav ul li布局导航条没有对nav加id和class 同时设置nav li a超链接文字字体颜色为红色字和红色框效果</p> 
<nav> 
    <ul> 
        <li><a href="http://www.divcss5.com/">网站首页</a></li> 
        <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> 
        <li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li> 
        <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li>
        <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> 
        <li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li> 
    </ul> 
</nav> 
<p>html5 nav ul li布局另外加class=bg设置背景为灰黑色,超链接文字字体颜色为绿色</p> 
<nav class="bg"> 
    <ul> 
        <li><a href="http://www.divcss5.com/">网站首页</a></li> 
        <li><a href="http://www.divcss5.com/html/">HTML教程</a></li> 
        <li><a href="http://www.divcss5.com/htmlrumen/">HTML入门</a></li> 
        <li><a href="http://www.divcss5.com/html5/">HTML5教程</a></li> 
        <li><a href="http://www.divcss5.com/rumen/">CSS教程</a></li> 
        <li><a href="http://www.divcss5.com/cssrumen/">CSS入门</a></li> 
    </ul> 
</nav> 
</body> 
</html>

Copy after login

The above uses traditional div ul li css Lay out the navigation class layout, and then use nav ul li css layout, and at the same time set the class to nav based on nav to change its layout contrast effect.

Special note: For those who do not know div css layout, it may be difficult to see the above code. The fundamental solution is to learn div css. Naturally, you will understand the case expression knowledge points at a glance by looking at the above code. , naturally you can grasp it by looking at the above cases.

2. Screenshot of DIVCSS5 instance layout

html5 new tag--nav tag introduction

The above is the detailed content of html5 new tag--nav tag introduction. For more information, please follow other related articles on the PHP Chinese website!