<!DOCTYPE?html>??
<html>??
????<head>??
????????<meta?charset="utf-8"><!--?声明编码格式?-->??
????????<title>HTML5?结构元素</title><!--?标题?-->??
????????<link?rel="stylesheet"?href="html5.css"/><!--?link?引入样式表??rel?规定当前文档与被链接文档之间的关系。?href?规定被链接文档的位置。?-->??
????</head>??
????<body>??
????????<header><!--?标记头部区域的内容，用于整个界面或者界面中的某个区域?-->??
????????????<h1>网页标题</h1>??
????????????<h2>次级标题</h2>??
????????????<h4>提示信息</h4>??
????????</header>??
????????<div?id=‘container‘>??
????????????<nav><!--?导航类辅助内容?-->??
????????????????<h3>导航</h3>??
????????????????<a?href="#">链接1</a>??
????????????????<a?href="#">链接2</a>??
????????????????<a?href="#">链接3</a>??
????????????</nav>??
????????????<section><!--?标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。?-->??
????????????????<article><!--?标签定义外部的内容。?-->??
????????????????????<header>??
????????????????????????<h1>文章标题</h1>??
????????????????????</header>??
????????????????????<p>文章内容。。。。。</p>??
????????????????????<footer><!--?标签定义文档或节的页脚。?-->??
????????????????????????<h2>文章的注脚</h2>??
????????????????????</footer>??
????????????????</article>??
????????????</section>??
????????????<aside><!--?相关内容或者引文?-->??
????????????????<h3>相关内容</h3>??
????????????????<p>相关辅助信息或者服务。。。。</p>??
????????????</aside>??
????????????<footer><!--?标记脚部区域的内容?-->??
????????????????<h2>页脚</h2>??
????????????</footer>??
????????</div>??
????</body>??
</html>??
body?{?background-color:#CCCCCC;?font-family:Geneva,?Arial,?Helvetica,?sans-serif;?margin:?0px?auto;?max-width:900px;?border:solid;?border-color:#FFFFFF;?}??
header?{?background-color:?#F47D31;?display:block;?color:#FFFFFF;?text-align:center;?}??
header?h2?{?margin:?0px;?}??
h1?{?font-size:?72px;?margin:?0px;?}??
h2?{?font-size:?24px;?margin:?0px;?text-align:center;?color:?#F47D31;?}??
h3?{?font-size:?18px;?margin:?0px;?text-align:center;?color:?#F47D31;?}??
h4?{?color:?#F47D31;?background-color:?#fff;?-webkit-box-shadow:?2px?2px?20px?#888;?-webkit-transform:?rotate(-45deg);?-moz-box-shadow:?2px?2px?20px?#888;?-moz-transform:?rotate(-45deg);?position:?absolute;?padding:?0px?150px;?top:?50px;?left:?-120px;?text-align:center;?}??
nav?{?display:block;?width:25%;?float:left;?}??
nav?a:link,?nav?a:visited?{?display:?block;?border-bottom:?3px?solid?#fff;?padding:?10px;?text-decoration:?none;?font-weight:?bold;?margin:?5px;?}??
nav?a:hover?{?color:?white;?background-color:?#F47D31;?}??
nav?h3?{?margin:?15px;?color:?white;?}??
#container?{?background-color:?#888;?}??
section?{?display:block;?width:50%;?float:left;?}??
article?{?background-color:?#eee;?display:block;?margin:?10px;?padding:?10px;?-webkit-border-radius:?10px;?-moz-border-radius:?10px;?border-radius:?10px;?-webkit-box-shadow:?2px?2px?20px?#888;?-webkit-transform:?rotate(-10deg);?-moz-box-shadow:?2px?2px?20px?#888;?-moz-transform:?rotate(-10deg);?}??
article?header?{?-webkit-border-radius:?10px;?-moz-border-radius:?10px;?border-radius:?10px;?padding:?5px;?}??
article?footer?{?-webkit-border-radius:?10px;?-moz-border-radius:?10px;?border-radius:?10px;?padding:?5px;?}??
article?h1?{?font-size:?18px;?}??
aside?{?display:block;?width:25%;?float:left;?}??
aside?h3?{?margin:?15px;?color:?white;?}??
aside?p?{?margin:?15px;?color:?white;?font-weight:?bold;?font-style:?italic;?}??
footer?{?clear:?both;?display:?block;?background-color:?#F47D31;?color:#FFFFFF;?text-align:center;?padding:?15px;?}??
footer?h2?{?font-size:?14px;?color:?white;?}??
/*?links?*/??
a?{?color:?#F47D31;?}??
a:hover?{?text-decoration:?underline;?}??
