Html
- <!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>??
Css
- 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;?}??
HTML5 结构元素
原文地址：https://www.cnblogs.com/songdongdong6/p/10074226.html