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

　　　

 <!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. python 代码检测工具

    对于我这种习惯了 Java 这种编译型语言,在使用 Python 这种动态语言的时候,发现错误经常只能在执行的时候发现,总感觉有点不放心. 而且有一些错误由于隐藏的比较深,只有特定逻辑才会触发,往往导 ...

  2. content-box和border-box

    理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型. 如果不做特殊说明,我们日常所用的div都是正常盒子模型. 正常盒子模型 正常盒子模型,是 ...

  3. 【转】解决在Android设备播放音频与其他应用重音的问题，并监听耳机的控制按钮

    概述 在安卓开发中免不了需要播放一点音乐了,音频了.但是这时候有别的应用正在播放,这时候就会出现重音的现象,完全影响用户体验,我们的项目就遇上了这样的尴尬,然后查找了一些文档,记录一下: 管理音频焦点 ...

  4. windows server 2012 安装 VC14(VC2015) 安装失败解决方案

    原文地址:https://www.cnblogs.com/huoniao/articles/6186021.html 系统环境如下:cmd命令行-输入 systeminfo 如下图 - The VC1 ...

  5. Linux：Day8(下) RAID

    RAID:Redudant Arrays of Inexpensive(Independent) Disks    廉价(独立)冗余磁盘阵列 提高IO能力:磁盘并行读写: 提高耐用性:磁盘冗余来实现: ...

  6. QT socket网络通信

    https://blog.csdn.net/u013007900/article/details/50411796 里主要讲解如何实现TCP和UDP的简单通信. socket简介在LINUX下进行网络 ...

  7. PyCharm 中使用 Pylint 控制代码质量

    1) Pylint安装 - Windows下: 直接在 cmd 下使用 pip install pylint 即可(如果 pip 不可用,首先安装最新版 Python,会默认安装 pip,或者找到 p ...

  8. NameValueCollection类读取配置信息

    C#中的NameValueCollection类读取配置信息,大家可以参考下.   我首先介绍配置文件中的写法: 1.在VS2015中的工程下建立一个控制台应用程序,其config文件默认名称为App ...

  9. Java多线程（二）——常用的实现多线程的两种方式

    一.继承Thread类创建线程类 Java使用Thread类代表线程,所有的线程对象都必须是Thread类或其子类的实例.每个线程的作用是完成一定的任务,实际上就是执行一段程序流即一段顺序执行的代码. ...

  10. log4net配置文件

    <?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...