html中用作文档分节的元素

来源：互联网发布：抢客软件编辑：程序博客网时间：2024/05/16 18:48

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"/>    <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>

使用html5新特性时，需考虑主流浏览器的支持情况，具体可参考http://caniuse.com

0 0