HTML5 new label--nav label Introduction

Source: Internet
Author: User
The nav element tag is a new label for HTML5. This chapter will bring you HTML5 new label--nav label Introduction, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

First, NAV is also a new element tag in HTML5. As with other new tags, nav is used as a common name for navigation bars in previous versions of traditional HTML5 HTML layouts.

Like what:

<div class= "NAV" > site navigation content </div>

Or

<div id= "NAV" > site navigation content </div>

The previously used named NAV is specifically used as a new label element in HTML5. This label is commonly used for navigation layout.

I. HTML NAV tag syntax and structure

1. Basic grammar

<nav> content </nav>

2. Nav Plus ID

<nav id= "abc" > Content </nav>

3. Nav Plus class

<nav class= "abc" > Content </nav>

4. Quick understanding of NAV labels

NAV is related to navigation, so it is generally used for site navigation layouts. While using the <nav> tag as a div tag or span tag to add an ID or class, and unlike a div tag, this tag is typically used only for navigation related places, so it may be used in a navigation bar in an HTML page layout. Or a local layout associated with the navigation bar.

5, nav with what label use

DIVCSS5 introduced the general navigation bar using the UL Li label layout in the previous article tutorial, using the Nav label in the general layout with the UL Li tag.

The small cases are as follows:
1), traditional HTML layout

<div id= "nav" ><ul><li> home </li><li> column name </li><li> Contact Us </li></ul ></div>

2), after the Nav label

<nav><ul><li> Home </li><li> Column name </li><li> Contact Us </li></ul></ Nav>

By the above HTML layout to the HTML5 conversion it is actually easy to understand the use of HTML NAV tags, as well as with the UL Li layout navigation bar tips.

second, compatibility tips

Because the <nav></nav> tag is a new label for HTML 5, and is not supported in IE8 and the following IE browsers (IE8, IE7, IE6), layout html is selected on demand.

Third, HTML nav CSS layout case

Learn the basics of NAV syntax and usage from the HTML CSS layout by comparing the traditional div layout with the nav layout.

The following DIVCSS5 through three layout practices to let you master the nav layout, respectively:

1), traditional Div+ul+li layout navigation style;

2), Nav+ul+li layout navigation style;

3) Set the class CSS style to NAV based on the Nav+ul+li layout

Through the above case to let everyone understand nav generally with UL Li or directly for layout navigation related layout, while Nav is like Div use can directly set CSS can also add class or ID.

The specific cases are as follows:

1. Traditional div css layout and nav CSS layout full HTML source code

<! DOCTYPE html> <html> <head> <meta charset= "Utf-8"/> <title>nav layout Online demo 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}/* Set black border on Class=nav, mouse over hyperlink text red */nav{border:1px solid #F00; width:520px; overflow:hidden } nav li{line-height:22px; float:left; padding:0 6px;} Nav li a{color: #F00}/* Set a red border on Nav, the hyperlink position is red */nav.bg{background: #CCC} nav.bg li a{color: #090}/* Set CLASS=BG on NAV, set background to     Gray, Hyperlink location is green */</style> </head> <body> <p> Traditional div ul li layout navigation bar effect </p> <div class= "NAV" > <ul> <li><a href= "http://www.divcss5.com/" > Homepage </a></li> <li><a H ref= "http://www.divcss5.com/html/" >html tutorials </a></li> <li><a href= "http://www.divcss5.com/ htmlrumen/">html Getting Started </a></li>         <li><a href= "http://www.divcss5.com/html5/" >html5 tutorials </a></li> <li><a href = "http://www.divcss5.com/rumen/" >css tutorials </a></li> <li><a href= "http://www.divcss5.com/ cssrumen/"&GT;CSS entry </a></li> </ul> </div> &LT;P&GT;HTML5 nav ul li layout navigation bar does not have a Nav plus ID and class Also set nav li a hyperlink text font color to red and red box effect </p> <nav> <ul> <li><a href= "http://www.divcss5.com/ "> Home </a></li> <li><a href=" http://www.divcss5.com/html/">html tutorial </a></li > <li><a href= "http://www.divcss5.com/htmlrumen/" >html Getting Started </a></li> <li>&lt ; a href= "http://www.divcss5.com/html5/" >html5 tutorials </a></li> <li><a href= "http:// www.divcss5.com/rumen/">css tutorial </a></li> <li><a href=" http://www.divcss5.com/cssrumen/" >css Getting Started </a></li> </ul> </nav> <p&GT;HTML5 nav ul li layout plus class=bg set Background to gray-black, hyperlink text font color to green </p> <nav class= "bg" > <ul> &LT;LI&GT;&L T;a href= "http://www.divcss5.com/" > Homepage </a></li> <li><a href= "http://www.divcss5.com/html /">html tutorial </a></li> <li><a href=" http://www.divcss5.com/htmlrumen/">html Getting Started </a>& lt;/li> <li><a href= "http://www.divcss5.com/html5/" &GT;HTML5 tutorials </a></li> <li> <a href= "http://www.divcss5.com/rumen/" >css tutorials </a></li> <li><a href= "http://www.divcss5 . com/cssrumen/">css Getting Started </a></li> </ul> </nav> </body> </html>

The above uses the traditional DIV+UL+LI+CSS layout navigation class layout, and then uses the NAV+UL+LI+CSS layout, and then on the basis of NAV to the NAV set class to change its layout contrast effect.

Special note: May not div CSS layout, may see the above code is difficult, the fundamental solution is to learn div+css, naturally see the above code will be a glance will understand the case to express knowledge points, natural look at the above cases to master.

2. DIVCSS5 instance Layout

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: