千呼万唤 HTML 5 (2) - 区块元素
千呼万唤 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
[源码下载]
