• nav元素


    将主要的、基本的链接组放进nav元素中。

    nav元素应用场合:

    (1)传统导航条:

    (2)侧边栏导航:

    (3)页内导航:本页面几个主要组成部分<section>之间的跳转

     1          <header>
     2              <h1>HTML5与CSS3的历史</h1>
     3                <nav>
     4                    <ul>
     5                        <li><a href="#HTML5">HTML5的历史</a></li>
     6                        <li><a href="#CSS3">CSS3的历史</a></li>
     7                    </ul>
     8                </nav>
     9            </header>
    10            <section id="HTML5">
    11                <h1>html5的历史</h1>
    12                <p>正文</p>
    13            </section>
    14            <section id="CSS3">
    15                <h1>CSS3的历史</h1>
    16                <p>正文</p>
    17            </section>

    (4)翻页导航:多个页面的前后页或博客前后文的滚动中

    简单的nav元素示例:

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title>MyHtml.html</title>
     5     <link href="CSS/test1.css" rel="stylesheet" type="text/css" />
     6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     7     <meta http-equiv="description" content="this is my page">
     8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     9     
    10   </head>
    11   
    12   <body>
    13       <h1>nav元素示例</h1>
    14       <nav>
    15           <ul>
    16               <li><a href="/">主页</a></li>
    17               <li><a href="/">主页</a></li>
    18               <li><a href="/">主页</a></li>
    19               <li><a href="/">主页</a></li>
    20               <li><a href="/">主页</a></li>
    21               <li><a href="/">主页</a></li>
    22           </ul>
    23       </nav>
    24       <article>
    25           <header>
    26               <h1>HTML5与CSS3的历史</h1>
    27               <nav>
    28                   <ul>
    29                       <li><a href="#HTML5">HTML5的历史</a></li>
    30                       <li><a href="#CSS3">CSS3的历史</a></li>
    31                   </ul>
    32               </nav>
    33           </header>
    34           <section id="HTML5">
    35               <h1>html5的历史</h1>
    36               <p>正文</p>
    37           </section>
    38           <section id="CSS3">
    39               <h1>CSS3的历史</h1>
    40               <p>正文</p>
    41           </section>
    42           <footer>
    43               <p>
    44                   <a href="?edit">编辑</a>|
    45                   <a href="?delete">删除</a>
    46               </p>
    47           </footer>
    48       </article>
    49       <footer>
    50           <p><small>版权所有</small></p>
    51       </footer>
    52   </body>
    53 </html>
    54                   
  • 相关阅读:
    第一课 JSON的简介
    xml 简介
    前端面试题汇总(长期更新)
    HTML5中的canvas
    AJAX第一课 AJAX的学习和简介
    margin:0 auto和text-aglin:center的区别
    js中的正则表达式
    border和box-shadow
    css中的伪类
    (素材源码)猫猫学IOS(十五)UI之曾经大热的打砖块小游戏
  • 原文地址:https://www.cnblogs.com/1305yyf/p/6014050.html
Copyright © 2020-2023  润新知