Good web front-end programmers to share study notes nav tag in HTML5

  Good programmers web front-end share HTML5 in the nav label study notes, nav label stands for navigation, as the name suggests, is the meaning of navigation. The HTML5 relevant standards are defined as follows: "A sectionTop of Page A that links to or to Parts WITHIN OTHER Pages The Page:
. A sectionTop with Navigation links" in Chinese probably means "page for a link to another page, or area of the current page: a region containing navigation links. " Here a clear definition of the functions nav tags, header similar here and did not specify must be the primary navigation, it can also be a sub-page navigation other parts. as follows:

1. <h3> gbin1.com Article List </ h3>  

2.<nav>  

3.    <ul>  

4. <li> <a href="#html5"> HTML5 article describes </a> </ li>  

5. <li> <a href="#css3"> CSS3 article describes </a> </ li>  

6. <li> <a href="#jquery"> jQuery article describes </a> </ li>  

7.        <ul>  

8.</nav>  

In the above example, we see here is just a navigation area of the article, you can also use the nav defined within a small page navigation. But not all links Groups on the page needs to be placed inside the nav tag, which is mainly composed of the main navigation block page composition. For example, we usually put in the footer of the site where a set of links, including the terms of service, site description, copyright notice, etc., then, we usually use the footer, instead nav.
It may comprise a plurality of pages nav tags, as a whole or in different portions of the page navigation. In the following example, there are two nav tag, a website is the main navigation, and the other one is the current page itself assisted navigation links.

1. <h1> rain duckweed </ h1>  

2.<nav>  

3.    <ul>  

4.        <li><a href="/">首页</a></li>  

5.        <li><a href="#">html+css</a></li>  

6.        ...more...   

7.    </ul>  

8.</nav>  

9.<article>  

10.    <header>  

11. <h1> html5 structure semantic tag of the tag </ h1>  

12. <p> <span> published </ span> 2011-12-22 </ p   >

13.    </header>  

14.    <nav>  

15.        <ul>  

16.            <li><a href="#">子导航</a></li>  

17.            <li><a href="#">子导航</a></li>  

18.            ...more...   

19.        </ul>  

20.    </nav>  

21.    <div>  

22.        <section id="public">  

23. <h1> section which can still reuse h1 tag </ h1>  

24.            <p>...more...</p>  

25.        </section>  

26.        <section id="destroy">  

27. <h1> section which can still reuse h1 tag </ h1>  

28.            <p>...more...</p>  

29.        </section>  

30.        ...more... </div>  

31.    <footer>  

32. <p> <a href="#"> About Us </a> |   

33. <a href="#"> Link </a> |   

34. <a href="#"> assorted </a> </ p>  

35.    </footer>  

36.</article>  

37.<footer>  

38.    <p><small>© copyright 2011 </small></p>  

</footer>  

nav tag itself does not contain a list of requirements, it can also contain other forms of content.

1.<nav>  

2.    <h1>Navigation</h1>  

3.    <p>You are on my home page. To the north lies   

4.        <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain,   

5.        upon which many   

6.        <a href="/school">school papers</a>are littered. Far up thus mountain you can spy a little figure who appears to   

7.        be me, desperately scribbling a   

8.        <a href="/school/thesis">thesis</a>.</p>  

9.    <p>To the west are several exits. One fun-looking exit is labeled   

10.        <a href="http://games.example.com/">"games"</a>. Another more boring-looking exit is labeled   

11.        <a href="http://isp.example.net/">ISP</a>.</p>  

12.    <p>To the south lies a dark and dank   

13.        <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly   

14.        out of the page.</p>  

15.</nav>  

Guess you like

Origin www.cnblogs.com/gcghcxy/p/11359108.html