HTML5经典案例学习-----新元素添加文档结构
直接上代码了，大家如果发现问题了，记得提醒我哦，谢谢啦，嘻嘻
<!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 & 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 © 2011 <a href="http://html5funprofit.com">HTML5, for Fun & 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经典案例学习-----新元素添加文档结构的更多相关文章
- HTML5的文档结构和新增标签
一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...
- 4. svg学习笔记-文档结构元素和样式的使用
svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...
- 10LaTeX学习系列之---Latex的文档结构
目录 目录 前言 (一)对于Ctex宏包中的文档结构 1.说明 2.源代码 3.输出效果 4.技巧 (二)对于ctexart的文档结构 1.说明 2.源代码 3.输出效果 (三)对于ctexbook的 ...
- HTML5实战与剖析之跨文档消息传递(iframe传递信息)
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...
- Solr添加文档（XML)
在上一章中,我们学习解释了如何向Solr中添加JSON和.CSV文件格式的数据.在本章中,将演示如何使用XML文档格式在Apache Solr索引中添加数据. 示例数据 假设我们需要使用XML文件格式 ...
- MongoDB学习笔记：文档Crud Shell
MongoDB学习笔记:文档Crud Shell 文档插入 一.插入语法 db.collection.insertOne() 将单个文档插入到集合中.db.collection.insertMan ...
- MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系
MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...
- HTML5的文档结构
HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性 1. header 元素 <header> 标签定义文档或者文档 ...
- Eclipse中添加文档注释快捷键
该博客仅记录自己添加文档注释时的操作,由于参考文档地址忘了,因此如果与其他文档重复,请见谅 以下是我的操作过程: 例如: /** * @param * @return */ 快捷键为: ...
随机推荐
- 7.02-bs4_btc
import requests from bs4 import BeautifulSoup from lxml import etree import json class BtcSpider(obj ...
- 【转】wamp出现You don’t have permission to access/on this server提示
本地搭建wamp,输入http://127.0.0.1访问正常,当输入http://localhost/,apache出现You don't have permission to access/on ...
- 爬取伯乐在线文章（二）通过xpath提取源文件中需要的内容
爬取说明 以单个页面为例,如:http://blog.jobbole.com/110287/ 我们可以提取标题.日期.多少个评论.正文内容等 Xpath介绍 1. xpath简介 (1) xpath使 ...
- .NET中使用Redis 转发
.NET中使用Redis Redis是一个用的比较广泛的Key/Value的内存数据库,新浪微博.Github.StackOverflow 等大型应用中都用其作为缓存,Redis的官网为http: ...
- 【转载】理解本真的REST架构风格
本文将带您领略REST架构的起源.与Web的关系.REST架构的本质及特性,以及REST架构与其他架构风格之间的比较. 引子 在移动互联网.云计算迅猛发展的今天,作为一名Web开发者,如果您还没听说过 ...
- Linux进程管理 (1)进程的诞生
专题:Linux进程管理专题 目录: Linux进程管理 (1)进程的诞生 Linux进程管理 (2)CFS调度器 Linux进程管理 (3)SMP负载均衡 Linux进程管理 (4)HMP调度器 L ...
- Docker镜像构建
一.简介 在构建容器化应用时,相当重要的步骤莫过于镜像制作,本文将介绍镜像制作方法以及镜像制作的建议.通常镜像的制作有两种方式: 使用现有的容器使用docker commit 生成镜像 使用Docke ...
- 记一次项目上线后Log4j2不输出日志的坑
公司项目采用了Log4j2来输出日志,在开发环境和测试环境下均可以输出日志,但在生成环境就没有日志输出.开始毫无头绪,后来通过不断的排查,终于解决了这个问题.在此记录下该问题的解决过程,便于后 ...
- 详解JSOUP的Select选择器语法
本文参考:JSOUP中文文档 问题 你想使用类似于CSS或jQuery的语法来查找和操作元素. 方法 可以使用Element.select(String selector) 和 Elements.se ...
- 性能调优9：根据WaitType诊断性能
SQL Server数据库接收到查询请求,从生成计划到执行计划的过程,等待次数和等待时间在一定程度上揭示了系统性能的压力,如果资源严重不足,就会成为性能的瓶颈.因此,对等待的监控非常有助于对系统性能进 ...