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

　　　

 <!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. Spring Cloud构建微服务架构：服务网关（路由配置）【Dalston版】

    转载:http://blog.didispace.com/spring-cloud-starter-dalston-6-2/ 原创  2017-08-26  翟永超  Spring Cloud 被围观 ...

  2. 使用Eclipse打jar包 包含依赖jar包

    1.在项目根目录新建MANIFEST.MF文件 //版本号 Manifest-Version: 1.0 //依赖jar包路径 多个用空格隔开 Class-Path: lib/commons-loggi ...

  3. Nginx代理与负载均衡

    序言 Nginx的代理功能与负载均衡功能是最常被用到的,关于nginx的基本语法常识与配置已在上篇文章中有说明,这篇就开门见山,先描述一些关于代理功能的配置,再说明负载均衡详细. Nginx代理服务的 ...

  4. Zookeeper系列一：Zookeeper介绍、Zookeeper安装配置、ZK Shell的使用

    https://www.cnblogs.com/leeSmall/p/9563547.html 一.Zookeeper介绍 1. 介绍Zookeeper之前先来介绍一下分布式 1.1 分布式主要是下面 ...

  5. Linux：Day6(下) vim编辑器

    vim编辑器 简介: vi:Visual Interface,文本编辑器 文本:ASCII,Unicode 文本编辑种类: 行编辑器:sed 全屏编辑器:nano,vi VIM - Vi IMprov ...

  6. conda install 出错

    在下载包时出现下面的错误: userdeMBP:pytorch user$ conda install -n deeplearning matplotlib Solving environment: ...

  7. java 1.5 自动拆箱和装箱的注意事项

    背景 java1.5后引入了自动装箱和自动拆箱的概念 自动拆箱:将引用类型转化为基本数据类型 自动装箱:将基本数据类型装为引用类型 但是实际使用中,什么情况自动拆箱什么情况自动装箱呢? 自动装箱 In ...

  8. 摒弃FORM表单上传图片，异步批量上传照片

    之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...

  9. WebBench压力测试工具（详细源码注释+分析）

    本文适合人群:对WebBench实现感兴趣的人 WebBench原理: Linux下使用的服务器压力测试工具,利用fork建立多个子进程,每个子进程在测试时间内不断发送请求报文,建立多个连接,然后由父 ...

  10. ESP8266开发综合篇第一节(LUA)-下载和刷固件

    本节视频:  https://v.youku.com/v_show/id_XNDAwMTI2OTg2MA==.html?spm=a2h3j.8428770.3416059.1 一,整版测试 刷入测试固 ...