博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

千呼万唤 HTML 5 (2) - 区块元素

Posted on 2011-09-19 10:10  webabcd  阅读(4076)  评论(4编辑  收藏

[索引页]
[源码下载] 


千呼万唤 HTML 5 (2) - 区块元素



作者:webabcd


介绍
HTML 5: 区块元素

  • 区块元素 - body, article, section, header, footer, h1, h2, h3, h4, h5, h6, hgroup, aside, nav, address



示例
1、body - 用于定义文档的主体
element/section/body.html

<!doctype html>
<html>
<head>
<title>body</title>
</head>

<!--
body - 用于定义文档的主体。其相关事件处理属性如下
-->
<body>
<script type="text/javascript" defer>
var body = document.body;

body.onafterprint
= function () { alert("onafterprint"); };
body.onbeforeprint
= function () { alert("onbeforeprint"); };
body.onbeforeunload
= function () { alert("onbeforeunload"); };
body.onblur
= function () { alert("onblur"); };
body.onerror
= function () { alert("onerror"); };
body.onfocus
= function () { alert("onfocus"); };
body.onhashchange
= function () { alert("onhashchange"); };
body.onload
= function () { alert("onload"); };
body.onmessage
= function () { alert("onmessage"); };
body.onoffline
= function () { alert("onoffline"); };
body.ononline
= function () { alert("ononline"); };
body.onpagehide
= function () { alert("onpagehide"); };
body.onpageshow
= function () { alert("onpageshow"); };
body.onpopstate
= function () { alert("onpopstate"); };
body.onresize
= function () { alert("onresize"); };
body.onscroll
= function () { alert("onscroll"); };
body.onstorage
= function () { alert("onstorage"); };
body.onunload
= function () { alert("onunload"); };
</script>
</body>
</html>

 

2、article - 用于定义一段完整且独立的内容
element/section/article.html

<!doctype html>
<html>
<head>
<title>article</title>
</head>
<body>
<!--
article - 用于定义一段完整且独立的内容
-->
<article>
我是一段完整且独立的内容
</article>
</body>
</html>

 

3、section - 用于定义文档内容中的某一部分
element/section/
section.html

<!doctype html>
<html>
<head>
<title>section</title>
</head>
<body>
<article>
<!--
section - 用于定义文档内容中的某一部分
-->
<section>我要学习 html5</section>
<section>我要学习 flash</section>
<section>我要学习 silverlight</section>
</article>
</body>
</html>

 

4、header - 定义文档的页眉
element/section/header.html

<!doctype html>
<html>
<head>
<title>header</title>
</head>
<body>
<article>
<!--
header - 定义文档的页眉
-->
<header>学什么呢?</header>
<section>我要学习 html5</section>
<section>我要学习 flash</section>
<section>我要学习 silverlight</section>
</article>
</body>
</html>

 

5、footer - 定义文档的页脚
element/section/footer.html

<!doctype html>
<html>
<head>
<title>footer</title>
</head>
<body>
<article>
<header>学什么呢?</header>
<section>我要学习 html5</section>
<section>我要学习 flash</section>
<section>我要学习 silverlight</section>
<!--
footer - 定义文档的页脚
-->
<footer>作者:webabcd</footer>
</article>
</body>
</html>

 

6、h1 h2 h3 h4 h5 h6 - 用于定义 6 种不同级别的标题,h1 为最大标题,h6 为最小标题
element/section/h1_h2_h3_h4_h5_h6.html

<!doctype html>
<html>
<head>
<title>h1 h2 h3 h4 h5 h6</title>
</head>
<body>
<article>
<header>
<!--
h1 h2 h3 h4 h5 h6 - 用于定义 6 种不同级别的标题,h1 为最大标题,h6 为最小标题
-->
<h6>学什么呢?</h6>
</header>
<section>我要学习 html5</section>
<section>我要学习 flash</section>
<section>我要学习 silverlight</section>
<footer>作者:webabcd</footer>
</article>
</body>
</html>

 

7、hgroup - 用于对文档某段内容的标题进行组合,使用 h1 h2 h3 h4 h5 h6 来标记标题的级别
element/section/
hgroup.html

<!doctype html>
<html>
<head>
<title>hgroup</title>
</head>
<body>
<article>
<header>
<h6>
学什么呢?
</h6>
</header>
<!--
hgroup - 用于对文档某段内容的标题进行组合,使用 h1 h2 h3 h4 h5 h6 来标记标题的级别
-->
<hgroup>
<h1>webabcd 文章</h1>
<h2>谈谈学习</h2>
</hgroup>
<section>我要学习 html5</section>
<section>我要学习 flash</section>
<section>我要学习 silverlight</section>
<footer>作者:webabcd</footer>
</article>
</body>
</html>

 

8、aside - 用于定义文档以外的,但却与文档相关的内容
element/section/aside.html

<!doctype html>
<html>
<head>
<title>aside</title>
</head>
<body>
<article>
<header>
<h6>
学什么呢?
</h6>
</header>
<hgroup>
<h1>webabcd 文章</h1>
<h2>谈谈学习</h2>
</hgroup>
<section>我要学习 html5</section>
<section>我要学习 flash</section>
<section>我要学习 silverlight</section>
<footer>作者:webabcd</footer>
<!--
aside - 用于定义文档以外的,但却与文档相关的内容
-->
<aside>
我还写了好多其他文章
</aside>
</article>
</body>
</html>

 

9、nav - 用于定义导航链接(nav 是 navigation 的缩写)
element/section/nav.html

<!doctype html>
<html>
<head>
<title>nav</title>
</head>
<body>
<article>
<header>
<h6>
学什么呢?
</h6>
</header>
<hgroup>
<h1>webabcd 文章</h1>
<h2>谈谈学习</h2>
</hgroup>
<section>我要学习 html5</section>
<section>我要学习 flash</section>
<section>我要学习 silverlight</section>
<footer>作者:webabcd</footer>
<aside>
<!--
nav - 用于定义导航链接(nav 是 navigation 的缩写)
-->
<nav><a href="http://webabcd.cnblogs.com/" target="_blank">我还写了好多其他文章,单击这里查看</a></nav>
</aside>
</article>
</body>
</html>

 

10、address - 定义文档作者的联系信息
element/section/address.html

<!doctype html>
<html>
<head>
<title>address</title>
</head>
<body>
<article>
<header>
<h6>
学什么呢?
</h6>
</header>
<hgroup>
<h1>webabcd 文章</h1>
<h2>谈谈学习</h2>
</hgroup>
<section>我要学习 html5</section>
<section>我要学习 flash</section>
<section>我要学习 silverlight</section>
<footer>
<!--
address - 定义文档作者的联系信息
-->
<address>
作者:webabcd,我的电话:911
</address>
</footer>
<aside>
<nav><a href="http://webabcd.cnblogs.com/" target="_blank">我还写了好多其他文章,单击这里查看</a></nav>
</aside>
</article>
</body>
</html>

 


OK
[源码下载]