直接上代码了，大家如果发现问题了，记得提醒我哦，谢谢啦，嘻嘻

　　　

 <!DOCTYPE html>   <!-- 不区分大小写 -->

 <html lang="en">   <!-- 指定语言 -->

 <head>

     <meta charset="UTF-8">   <!-- 指定字符集 -->

     <title>Document</title>

     <style>

     /* 样式化结构元素 */

         header,footer,nav,article,aside,section{

             display: block;

         }

         body{

             padding-top:80px;

         }

         a{

             text-decoration: none;

         }

         header{

             height: auto;

             position: fixed;

             top: 0px;

             left: 0px;

             width: 100%;

             height: 80px;

             padding: 0px 30px;

             background: gray;

         }

         header>h1{

             display: inline-block;

         }

         header>nav{

             float: right;

             margin-top: 20px;

             margin-right: 50px;

         }

         nav>ul>li{

             list-style: none;

             float: left;

             display: inline-block;

             margin: 0px 10px;

         }

         article{

             float: right;

             width: 60%;

             margin: 50px 0px;

             background: #E0EEE0;

         }

         aside{

             width: 30%;

             float: left;

             background: #B0E2FF;

         }

         footer{

             position: fixed;

             bottom: 0px;

             left: 0px;

             text-align: center;

             display: block;

             width: 100%;

             background: #C1CDCD;

         }

     </style>

 </head>

 <body>

     <!-- 样式需要自己添加 -->

     <header>

         <h1>

             <abbr title="Hypertext Markup Language">HTML</abbr>5,for Fun &amp; Profit

         </h1>

         <nav>

             <ul>

                 <li><a href="/Archive">Archive</a></li>

                 <li><a href="/About">About</a></li>

             </ul>

         </nav>

     </header>

     <article>

         <h2>

             <code>nav</code> Isn't for <em>All</em> Links

         </h2>

         <p>

             Though the <code>nav</code> element often contains links, that doesn't mean that
　　　　　　　　　 <em>all</em> links on a site need <code> nav</code>.

         </p>

     </article>

     <article>

         <h2>

             You've Got the <code>DOCTYPE</code>. Now What?

         </h2>

         <p>

             HTML5 isn't an all or nothing proposition. You can pick and choose what works best for you. So once you have the
　　　　　　　　 <code>DOCTYPE</code> in place, you should explore.

         </p>

     </article>

     <aside>

         <h2>HTML5 Elsewhere</h2>

         <p>Feed your HTML5 fix with resourses from our partners:</p>

         <ul>

             <li>

                 <a href="http://lovinghtml5.com">Loving HTML5</a>

             </li>

             <li>

                 <a href="http://semanticsally.com">Semantic Sally</a>

             </li>

         </ul>

     </aside>

     <footer>

         <p>

             Copyright &copy; 2011 <a href="http://html5funprofit.com">HTML5, for Fun &amp; Profit</a>. All rights reserved.

         </p>

     </footer>

     <script>

         //IE9之前的IE版本，必须添加一些JS，使得IE识别这些元素，并允许对它们进行样式化

         document.createElement('header');

         document.createElement('footer');

         document.createElement('nav');

         document.createElement('article');

         document.createElement('aside');

         document.createElement('section');

         //然而，好像IE9以下没有用啊，是我写错了吗？

     </script>

 </body>

 </html>

HTML5经典案例学习-----新元素添加文档结构的更多相关文章

  1. HTML5的文档结构和新增标签

    一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...

  2. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  3. 10LaTeX学习系列之---Latex的文档结构

    目录 目录 前言 (一)对于Ctex宏包中的文档结构 1.说明 2.源代码 3.输出效果 4.技巧 (二)对于ctexart的文档结构 1.说明 2.源代码 3.输出效果 (三)对于ctexbook的 ...

  4. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  5. Solr添加文档（XML)

    在上一章中,我们学习解释了如何向Solr中添加JSON和.CSV文件格式的数据.在本章中,将演示如何使用XML文档格式在Apache Solr索引中添加数据. 示例数据 假设我们需要使用XML文件格式 ...

  6. MongoDB学习笔记：文档Crud Shell

    MongoDB学习笔记:文档Crud Shell   文档插入 一.插入语法 db.collection.insertOne() 将单个文档插入到集合中.db.collection.insertMan ...

  7. MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...

  8. HTML5的文档结构

    HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性     1. header 元素     <header> 标签定义文档或者文档 ...

  9. Eclipse中添加文档注释快捷键

    该博客仅记录自己添加文档注释时的操作,由于参考文档地址忘了,因此如果与其他文档重复,请见谅 以下是我的操作过程: 例如: /**   * @param     * @return   */ 快捷键为: ...

随机推荐

  1. C#事件の事件访问器

    在真实的项目中,有的对象有相当多的事件,例如一个窗体就有好多种事件.默认情况下,当声明事件时,编译器将内存分配给一个事件字段,一存储事件信息.如果类中有好多事件未使用,则他们会不必要的占用内存. 这种 ...

  2. 如何用chrome扩展将网页变成黑底白字，用以保护视力

    不知道有没有科学依据,自己感觉黑底白字对视力好些,于是动手加个chrome扩展: 第一步:建个文件夹,名称比如叫changeColor; 第二步:在changeColor文件夹中建三个文件:manif ...

  3. BZOJ2521:[SHOI2010]最小生成树(最小割)

    Description Secsa最近对最小生成树问题特别感兴趣.他已经知道如果要去求出一个n个点.m条边的无向图的最小生成树有一个Krustal算法和另一个Prim的算法.另外,他还知道,某一个图可 ...

  4. 谈谈ISCSI\NAS\SAN及SAS之间的区别及优缺点--待补充

    在中国市场,中小企业存储的需求主要有以下三点:软件及硬件设备简便易用,使非IT专业人士也能进行部署和管理:满足基本业务的存储需求,并可进行灵活扩展:价格合理,不会使企业由于成本问题而耽误关键业务数据的 ...

  5. P2689 东南西北

    题目描述 给出起点和终点的坐标及接下来T个时刻的风向(东南西北),每次可以选择顺风偏移1个单位或者停在原地.求到达终点的最少时间. 如果无法偏移至终点,输出“-1”. 输入输出格式 输入格式: 第一行 ...

  6. 【转】联普多WAN口路由器是否可以设置叠加带宽

    TP-link联普是全球领先的通讯供应厂商之一,那么你是否知道联普多WAN口路由器可以设置叠加带宽吗?下面是学习啦小编整理的一些关于联普多WAN口路由器是否可以设置叠加带宽的相关资料,供你参考. 联普 ...

  7. 微信接入arduino

    https://blog.csdn.net/liudongdong19/article/details/81072857 一.准备工作.      1.微信公众号,个人的就可以了,不用企业号什么的.  ...

  8. String，StringBuffer，StringBuilder的区别与共同点

    1. String与StringBuffer,StringBuilder的区别: String为什么不可变:String存储数据是有final修饰的字符数组private final char val ...

  9. Linux内核入门到放弃-进程虚拟内存-《深入Linux内核架构》笔记

    进程地址空间的布局 <mm_types.h> <mm_types.h> struct mm_struct { ... unsigned long (*get_unmapped_ ...

  10. Spark笔记-gz压缩存储到HDFS【转】

    参考:http://blog.csdn.net/u010454030/article/details/69291663 mergedRDD.saveAsTextFile(outputPath, cla ...