1.html5结构标签
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title>HTML5结构标签</title>
<style type="text/css">
header,nav,article,aside,section,footer{
border:solid 1px red;
padding:10px;
margin:6px;
}
header { width:800px; }
nav {width: 800px;}
article {
float:left;
width:580px;
height:100px;}
section{
height:50px;}
aside {
width:186px;
float:left;
height:100px;}
footer {
clear:both;
width:800px;}
</style>
</head>
<body>
<header>页眉</header>
<nav>导航栏</nav>
<article>文章
<section>文章的内容</section>
</article>
<aside>侧边栏</aside>
<footer>页脚</footer>
</body>
</html>
2.nav标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!--
1.nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。
2.nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。
-->
<nav>
<ul>
<li><a href="#">公司介绍</a></li>
<li><a href="#">产品推荐</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</body>
</html>
3.ruby标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ruby标签</title>
</head>
<!--<ruby> 标签定义 ruby 注释(中文注音或字符)。在东亚使用，显示的是东亚字符的发音。与<ruby>以及<rt>标签一同使用。
ruby元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的rt元素组成，还包括可选的rp元素，定义当浏览器不支持"ruby"元素时显示的内容。-->
<body>
<ruby>
我 爱 你
<rt>wo ai ni</rt>
</ruby>
</body>
</html>
4.mark标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p>23222<mark>1111111111111111111</mark>2222</p>
</body
</html>
5.cite标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!--<cite>标签
<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。用
<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊等等。 -->
<p>111111111</p>
<cite>2222222222</cite>
</body>
</html>
6.section标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!--
1.<section>标签用于对网页的内容进行分区、分块，定义文档中的节。
比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由标题和内容组成。
2.<section>标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。
3.根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。
4.当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用 div标签而非section。
-->
<section>
<h1>1111111</h1>
<p>2222222</p>
<article>
3333333
<p>44444</p>
</article>
</section>
</body>
</html>
7.article标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!--
1.<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。
2.Article标签会有标题部分，通常可以包含header，有时也会包含footer。
3.article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。
-->
<article>
<header>
<h1>标题信息</h1>
<h2>二级标题</h2>
<p>报道的时间信息等</p>
</header>
<p>文章报道的详细信息</p>
<footer>
供稿人：张三等
</foooter>
</article>
</body>
</html>
