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

　　　

 <!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. No such property: FOR_RUNTIME for class: org.gradle.api.attributes.Usage

    自从Android studio升级到3.1版本,谷歌又折腾出让你意想不到的错误.... 从github上下了个项目用来学习,却出现了如下错误: No such property: FOR_RUNTI ...

  2. UVA1626-Brackets sequence（动态规划基础）

    Problem UVA1626-Brackets sequence Time Limit: 4500 mSec Problem Description Input The input begins w ...

  3. 010_vim和python整合开发

    一.vim-go使用经验总结 Official Webset: https://github.com/fatih/vim-go-tutorial :GoFmt #格式化golang代码 二. 1. 一 ...

  4. go第三方日志系统-seelog-使用文档

    参考:https://godoc.org/github.com/cihub/seelog 导入方式: import "github.com/cihub/seelog" 包seelo ...

  5. Spring Security（十四）：5.4 Authorize Requests

    Our examples have only required users to be authenticated and have done so for every URL in our appl ...

  6. BZOJ3309 DZY Loves Maths 莫比乌斯反演、线性筛

    传送门 推式子(默认\(N \leq M\)): \(\begin{align*} \sum\limits_{i=1}^N \sum\limits_{j=1}^Mf(gcd(i,j)) & = ...

  7. devops工具-Ansible基础

    一.Ansible介绍 简介     Ansible使用Python语言开发,是一个配置管理型工具,与之类似的工具还有Puppet.SaltStack.chef等,默认通过SSH协议进行远程命令执行或 ...

  8. Ext中 grid 设置行样式

    //设置样式   JS var SetRowClass = function(record, rowIndex, rowParams, store) { if (record.data.status ...

  9. UART、SPI和I2C详解

    做单片机开发时UART,SPI和I2C都是我们最经常使用到的硬件接口,我收集了相关的具体材料对这三种接口进行了详细的解释. UART UART是一种通用串行数据总线,用于异步通信.该总线双向通信,可以 ...

  10. Quartz.NET 任务调度新教程

    https://www.cnblogs.com/yscit/p/10393867.html