html中用作文档分节的元素

107 阅读 0 评论 71 点赞

我是靠谱客的博主美丽刺猬，这篇文章主要介绍html中用作文档分节的元素，现在分享给大家，希望可以做个参考。

h1~h6——表示标题；

hgroup——表示一组标题，其中只有第一个可出现在文档大纲中（html5）；

section——表示一个重要的主题或概念（html5,目前Opera和Safari的支持还不够好）；

header——表示首部（html5）；

footer——表示尾部（html5）；

nav——表示导航元素集合（html5）;

article——表示可独立发布的重要主题或概念（html5）；

aside——表示周边内容的一些沾边话题（html5）；

address——表示文档或文章的联系信息（html5）；

details及summary——生成一个区域，用户可将其展开以了解更多细节（html5,只有chrome支持）；

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<base href="http://www.shydzc.com/" target="_blank"></base>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>

<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<script src="simple.js"></script>
<noscript>
<h1>需要javascript脚本!</h1>

</noscript>
<style type="text/css">
h1,h2,h3{background: grey;color:white;}
body > header *,footer > *{background: transparent;color: black;}
body>section,body>section>section{
margin-left: 10px;
}
body>header,body>footer{
border:medium solid black;
padding-left: 5px;
margin: 10px 0 10px 0;
}
article{
border: thin black solid;
padding:10px;
margin-bottom: 5px;
}
aside{
width:40%;
background: white;
float: right;
border: thin solid black;
margin-left: 5px;
}
details{border: solid thin black;padding:5px}
details > summary{
font-weight: bold;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>近几年</h1>
<h2>伴随居民投资意识的迅速增长</h2>
</hgroup>
<address>有问题？<a href="mailto:jason@163.com">Email me</a></address>
<nav>
<h1>Contents</h1>
<ul>
<li>
<a href="#">主页</a>
</li>
<ul>
<li>
<a href="#">服务领域</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
</ul>
</ul>
</nav>
</header>
财富保值增值的需求愈加旺盛。
<h2>在带动传统金融机构理财业务规模的爆发的同时</h2>
也造就了第三方理财等行业的快速发展。
<h3>但是纵观中国第三方理财市场并不尽如人意</h3>
<section>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<section>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<h2>含有隐藏风险等</h2>
</section>
</section>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<h2>含有隐藏风险等</h2>
岁末年初，中国经济网记者做了一期关于“第三方理财”的专题策划。
<h3>从五个不同方面盘点国内第三方理财的“林林总总”</h3>
为你详细解读国内第三方理财。希望借此为你奉上一道“理财盛宴”。
<article>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<h2>含有隐藏风险等</h2>
岁末年初，中国经济网记者做了一期关于“第三方理财”的专题策划。
<h3>从五个不同方面盘点国内第三方理财的“林林总总”</h3>
为你详细解读国内第三方理财。希望借此为你奉上一道“理财盛宴”。
</article>
<article>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<h2>含有隐藏风险等</h2>
岁末年初，中国经济网记者做了一期关于“第三方理财”的专题策划。
<aside>
第三方理财势头猛进的发展并未换来市场反应的一路高歌。
有业内人士指出，第三方理财机构进入门槛低，
既没有监管，注册也不需要牌照，经营还处于法律空白中。
</aside>
<h3>从五个不同方面盘点国内第三方理财的“林林总总”</h3>
为你详细解读国内第三方理财。希望借此为你奉上一道“理财盛宴”。
</article>
<details>
<summary>Kinds of Triathlon</summary>
There are different kinds of triathlon - sprint,Olympic and son on.
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>
<footer>
©2015,上海远地资产管理有限公司。
</footer>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<base href="http://www.shydzc.com/" target="_blank"/>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
<!--另一种声明html页面所用字符编码的方法
<meta http-equiv="content-type" content="text/html charset=utf-8"/>
-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<script src="simple.js"></script>
<noscript>
<h1>需要javascript脚本!</h1>
<!--或者导到另一网站
<meta http-equiv="refresh" content="0;http://www.shydzc.com"/>
-->
</noscript>
<style type="text/css">
h1,h2,h3{background: grey;color:white;}
body > header *,footer > *{background: transparent;color: black;}
body>section,body>section>section{
margin-left: 10px;
}
body>header,body>footer{
border:medium solid black;
padding-left: 5px;
margin: 10px 0 10px 0;
}
article{
border: thin black solid;
padding:10px;
margin-bottom: 5px;
}
aside{
width:40%;
background: white;
float: right;
border: thin solid black;
margin-left: 5px;
}
details{border: solid thin black;padding:5px}
details > summary{
font-weight: bold;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>近几年</h1>
<h2>伴随居民投资意识的迅速增长</h2>
</hgroup>
<address>有问题？<a href="mailto:jason@163.com">Email me</a></address>
<nav>
<h1>Contents</h1>
<ul>
<li>
<a href="#">主页</a>
</li>
<ul>
<li>
<a href="#">服务领域</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
</ul>
</ul>
</nav>
</header>
财富保值增值的需求愈加旺盛。
<h2>在带动传统金融机构理财业务规模的爆发的同时</h2>
也造就了第三方理财等行业的快速发展。
<h3>但是纵观中国第三方理财市场并不尽如人意</h3>
<section>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<section>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<h2>含有隐藏风险等</h2>
</section>
</section>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<h2>含有隐藏风险等</h2>
岁末年初，中国经济网记者做了一期关于“第三方理财”的专题策划。
<h3>从五个不同方面盘点国内第三方理财的“林林总总”</h3>
为你详细解读国内第三方理财。希望借此为你奉上一道“理财盛宴”。
<article>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<h2>含有隐藏风险等</h2>
岁末年初，中国经济网记者做了一期关于“第三方理财”的专题策划。
<h3>从五个不同方面盘点国内第三方理财的“林林总总”</h3>
为你详细解读国内第三方理财。希望借此为你奉上一道“理财盛宴”。
</article>
<article>
<h1>理财机构鱼龙混杂</h1>
盈利模式单一。
<h2>含有隐藏风险等</h2>
岁末年初，中国经济网记者做了一期关于“第三方理财”的专题策划。
<aside>
第三方理财势头猛进的发展并未换来市场反应的一路高歌。
有业内人士指出，第三方理财机构进入门槛低，
既没有监管，注册也不需要牌照，经营还处于法律空白中。
</aside>
<h3>从五个不同方面盘点国内第三方理财的“林林总总”</h3>
为你详细解读国内第三方理财。希望借此为你奉上一道“理财盛宴”。
</article>
<details>
<summary>Kinds of Triathlon</summary>
There are different kinds of triathlon - sprint,Olympic and son on.
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>
<footer>
&copy2015,上海远地资产管理有限公司。
</footer>
</body>
</html>