html中用作文档分节的元素

原创 2015年07月08日 17:04:33

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

【HTML学习】新的结构化元素

3.4 标题:、、~以及 :用于分节元素的内容介绍和导航。 :用于表现内容的附加信息。像一样,它也不能再包含和元素。 :这是的一种特殊形式,它只能包含~元素,用于对带有副标题的标题进行组合。 ...

HTML5权威指南笔记:10-文档分节

1 添加基本的标题(h1元素) h1 ~ h6元素 元素类型 流 允许具有的父元素 hgroup元素或其他任何可以包含流元素的元素。这些元素不能是addre...

html5 文档元素 布局

布局效果: 代码: 表格元素 这里是大标题 这里是一个副标题 这里是一个导航 header这里存放网页的标头部...
  • a716121
  • a716121
  • 2016年08月02日 12:36
  • 167

MDN Web技术文档 - HTML 元素

MDN Web技术文档 HTML 元素元素 HTML元素A B C D E F G H I J K L M N O P Q R S T U V W X Y Z (快速链接 HTML Category)...
  • sleks
  • sleks
  • 2014年08月12日 06:16
  • 1206

Dom解析Html文档中的元素

Dom解析Html文档中的元素一、理论Dom我们并不陌生,之前我写过一篇XML的解析方法,里面有一种解析方法叫Dom4j,其实Dom4j和Dom的区别就是版本高了点、功能更强了一点,其实本质是一样的,...

好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎片、table操作

欢迎技术交流。 QQ:138986722 getAttribute、setAttribute获取跟设置对象的属性: function documentTest(){ var oHtm...
  • hzw2312
  • hzw2312
  • 2011年12月27日 14:25
  • 2057

HTML5 文档元素(20160806-0006)

HTML5 文档元素与示例

DTD文档类型和HTML基础元素

一、什么是HTML?超文本标记语言 包含了头部(head)和主体(body)两大部分 head 主要是浏览器和搜索引擎看的 body 用户主要看到的内容都在这二、什么是DOCTYPE?它是文档类...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html中用作文档分节的元素
举报原因:
原因补充:

(最多只允许输入30个字)