html5--2.5新的布局元素(4)-aside/nav

学习要点

  1. 了解aside/nav元素的语义和用法
  2. 通过实例理解aside/nav元素的用法
    1. aside元素（附属信息）
      • aside元素通常用来设置侧边栏。
      • 用于定义article元素之外的内容(比如作者简介，版权声明)，前提是这些内容与article元素内的内容相关。
      • 同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。
    1. nav元素（导航）
      • 用来定义目录、导航栏、超链接
      • 并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
      • 在文章页面中，nav还可以用来给一个文字做一个目录的超链接

实例

一、aside做侧边栏

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>新元素布局</title>

     <style type="text/css">

         header{width: 100%;height: 10%;background: green}

         footer{width: 100%;height: 10%;background: blue;float: left;}

         section{height: 80%;background: DarkGray}

         aside{width: 20%;height: 80%;background: Aquamarine;float: left;}

         section{width: 80%;height: 80%;background: DarkGray;float: left;}

     </style>

 </head>

 <body style="margin: 0;height: 708px">

     <header>header</header>

     <aside>

         aside

     </aside>

     <section>

         section

     </section>

     <footer>footer</footer>

 </body>

 </html>

二、aside添加附加信息

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>2.4课堂演示</title>

 </head>

 <body>

     <aside>

         作者简介：..... <br>

         版权归属........

     </aside>

     <article>

         <header>

             <h3>文章标题</h3>

             <h5>作者：***</h5>

         </header>

         <p>我是正文********************<br>********************<br>********************<br>********************<br></p>

             <section>

                 <article>

                     <header><h4>网友A的评论</h4></header>

                     <p>评论内容......................</p>

                     <footer>发布时间：2015/10/20</footer>

                 </article>

                 <article>

                     <header><h4>网友b的评论</h4></header>

                     <p>评论内容......................</p>

                     <footer>发布时间：2015/10/20</footer>

                 </article>

             </section>

         <footer>

             <p>尾部：阅读：300 评论：80</p>

         </footer>

         <aside>

             <p>名词解释：-------</p>

             <p>本文参考了《****》：-------</p>

         </aside>

     </article>

 </body>

 </html>

三、在article里面做附属信息

html5--2.5新的布局元素(4)-aside/nav的更多相关文章

  1. html5--2.6新的布局元素(5)-nav

    html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...

  2. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  3. html5--2.9新的布局元素(5)-hgroup/address

    html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...

  4. html5--2.7新的布局元素(4)-time

    html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...

  5. html5--2.1新的布局元素概述

    html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...

  6. html5--2.4新的布局元素(3)-section

    html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...

  7. html5--2.3新的布局元素(2)-article

    html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...

  8. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  9. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

随机推荐

  1. 怎样通过Html网页调用本地安卓app

    怎样使用html网页和本地app进行传递数据呢?经过研究.发现还是有方法的,总结了一下,大致有一下几种方式 一.通过html页面打开Android本地的app 1.首先在编写一个简单的html页面 & ...

  2. java调试工具jdb

    Finds and fixes bugs in Java platform programs. Synopsis jdb [options] [classname] [arguments] optio ...

  3. 转：RC复位电路的原理及其复位时间的计算

    RC复位电路的原理及其复位时间的计算   低电平有效复位电路如下 此复位电路是针对低电平有效复位而言的,其中二极管是起着在断电的情况下能够很快的将电容两端的电压释放掉,为下次上电复位准备. 假设电容两 ...

  4. Lua学习五----------Lua循环

    © 版权声明:本文为博主原创文章,转载请注明出处 1.循环类型 1.1 while循环 - 语法:while(condition) do ...<执行语句> end - 解析:判断cond ...

  5. netty 对 http 的实现

    netty的http协议栈无论是性能还是可靠性,都表现优异,非常适合在非web容器场景 下应用,相比于tomcat.jetty等web容器,它更轻量.小巧.灵活性和定制性也好: 总结:只要实现了htt ...

  6. Enumerate Combination C(k, n) in a bitset

    Suppose n<=32, we can enumerate C(k, n), with bits representing absence or presence, in the follo ...

  7. 杂谈：HTML 5的消息通知机制

    译文来源:http://www.ido321.com/1130.html 原文:HTML 5 Notification 译文:HTML 5 的消息通知机制 译者:dwqs watermark/2/te ...

  8. 请实现一个函数用来匹配包括'.'和'*'的正则表达式。模式中的字符'.'表示任意一个字符，而'*'表示它前面的字符可以出现任意次（包含0次）。 在本题中，匹配是指字符串的所有字符匹配整个模式。例如，字符串"aaa"与模式"a.a"和"ab*ac*a"匹配，但是与"aa.a"和"ab*a"均不匹配

    // test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  9. POJ 1840 Eqs(hash)

    题意  输入a1,a2,a3,a4,a5  求有多少种不同的x1,x2,x3,x4,x5序列使得等式成立   a,x取值在-50到50之间 直接暴力的话肯定会超时的   100的五次方  10e了都 ...

  10. 【BZOJ1786】[Ahoi2008]Pair 配对 DP

    [BZOJ1786][Ahoi2008]Pair 配对 Description Input Output Sample Input 5 4 4 2 -1 -1 3 Sample Output 4 题解 ...