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

　　　

 <!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. Scrapy 框架 中间件 代理IP 提高效率

    中间件 拦截请求跟响应 进行ua(User-Agent ) 伪装 代理 IP 中间件位置: 引擎 和下载器 中间 的中间件 ( 下载中间件) 引擎 跟 spider 中间 的中间件 ( 爬虫中间件)( ...

  2. 绝版珍珍藏：web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  3. C#定时备份正在播放的幻灯片、word文档、excel电子表格,mht格式文档

    控制台应用, 代码如下: using System; using System.Collections.Generic; using System.IO; using System.Linq; usi ...

  4. CSAPP：信息的表和处理2

    CSAPP:信息的表和处理2 关键点:浮点数.浮点数运算. 二进制小数IEEE浮点数表示浮点数转换(单精度)参考 二进制小数   形如表示的二进制数,其中每个位的取值范围位0和1.这种表示方式的定义如 ...

  5. selenium之选项卡管理

    在使用selenium管理浏览器的时候遇到一些小问题,现将这些小问题作一下总结: (1)browser是什么? from selenium import webdriver browser = web ...

  6. 002_浅析python 中__name__ = '__main__' 的作用

    很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = ...

  7. 3-jsp 内置对象、转发与重定向

    1.request:请求常用api: getParameter("name"):获取页面表单单个元素的值 getParameterValues("name"): ...

  8. RS-485总线通信协议

    https://blog.csdn.net/ouyangxin95/article/details/78174145 RS-485总线技术只是规定了接口的电气标准,并没有规定RS-485接口的电缆,插 ...

  9. TextField

    TextFiled 是一个输入Widget,属性如下: this.controller,//这个是传输数据用的this.focusNode,this.decoration = const InputD ...

  10. DES对称加密算法详解和c++代码实现（带样例和详细的中间数据）

    特点: 1.DES是对称性加密算法,即加密和解密是对称的,用的是同一个密钥 2.DES只处理二进制数据,所以需要将明文转换成为2进制数据 3.DES每次处理64位的数据,所以应该将明文切割成64位的分 ...