html5 contenteditable="true"
html5内容可编辑属性
html5 hgroup
hgroup字面意思是头部的组，可以将其分拆为h和group来理解。在html5中的作用是用于对网页和区块的标题进行组合。（网页是一个最大的区块，所以可以认为hgroup是区块的标题的组合）
前面的文章有提到header元素，貌似这个元素跟hgroup有非常相似的功能，那么它们之间有什么不同呢？
继续从hgroup的定义来看，它是对“标题"的组合，html中的标题有h1,h2,h3,h4,h5,h6。hgroup只能是对这六种h的组合，不能包含其他元素，这就是跟header的区别，header可以包含其他元素，而且header可以包含hgroup。
下面是hgroup的一些示例：
情景一
|
1
2
3
4
5
6
7
8
9
10
|
<!doctype html><title>html5 hgroup 示例一 html5zhan.com</title>
<section>
<hgroup>
<h1>我爱我母亲</h1>
<h2>给全世界母亲的一封信</h2>
</hgroup>
<p>又到了5月的第二个星期天.....</p>
</section>
|
情景二
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!doctype html><title>html5 hgroup 示例二 html5zhan.com</title>
<section>
<header>
<hgroup>
<h1>我爱我母亲</h1>
<h2>给全世界母亲的一封信</h2>
</hgroup>
<p>添加时间：2012-5-10</p>
</header>
<p>又到了5月的第二个星期天.....</p>
</section>
|
注
除非有两个或者以上的h标签，否则请不要使用hgroup。
html5 section
section 字面上理解为“块”，“部分”。在html5网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。
页面分块示例
可直接查看html5zhan.com的首页，主要由六部分组成，html5新元素，html5新api，html5最新动态，html5文章导航，html5最新文章以及html5作品。
这些内容彼此都是一个独立的模块，这个时候就可以使用section包裹他们。
文章分段示例
这里直接给出一个介绍文章分段的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!doctype html><article>
<h1>Web编程语言比较</h1>
<p>web编程语言常用的有asp,asp.net,php,jsp...</p>
<section>
<h2>asp</h2>
<p>asp全称Active Server Page</p>
</section>
<section>
<h2>asp.net</h2>
<p>asp的颠覆版本</p>
</section>
<section>
<h2>php</h2>
<p>草根动态语言，免费，强大</p>
</section>
</article>
|
article与section的异同
section和article可以互相嵌套，也就是说他们没有上下级关系，section可以包含article，article也可以包含section。
感觉上使用都差不多，都可以有h1,h2,h3,都有一个主体，那应该怎么来区分它们的不同？其实很简单，只要从字面上理解它们就可以足够了：
1、article是文章，文章就是一段完整的独立的内容。
2、section就是块，某种意义上可以理解为div，但是比div的意思更加明确一点。
section和div的异同
1、section和div都可以对内容进行分块，但是section是进行有意义的分块，无意义的分块应该由div来做，例如用作设置样式的页面容器。
2、section内部必须有标题，标题也代表了section的意义所在。
其他说明
1、section做为"块"，理论上可以用于很多地方，例如一个同字型的网页，可以用于包裹两边的内容，但是实际上，html5中定义了更加有意义的aside标记，完全可以用aside来替代section，因此在使用的时候应尽量使用更有意义的标记。
2、html5与css3权威指南中提到一个检查轮廓的工具，这里提供一下：http://gsnedders.html5.org/outliner/
html5 article
article 字面意思为“文章”。在web页面中表现为独立的内容，如一篇新闻，一篇评论，一段名言，一段联系方式。这其中包括两方面，一为整个页面的主旨内容，另外就是一些辅助内容。
article可以嵌套，即article里面还可以包含article，此时内article应该跟外article有一定的关联性，如同情景二，其中主内容的评论。
|
1
2
3
4
|
<article
id="demo">
<h1>内容标题（选用）</h1>
<p>内容</p>
</article>
|
article既然是独立的内容，那么内容的主题是必不可少，标题则为选用内容。
情景一
整个页面的主旨内容
|
1
2
3
4
5
6
7
8
9
10
11
|
<!doctype html><title>html5站案例</title>
<body>
<article>
<h1></h1>
<p>主内容</p>
</article>
<aside>
侧边内容
</aside>
</body>
|
情景二
内容的评论
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html><title>html5站案例</title>
<body>
<article>
主内容省略....
<section>
<h1>评论</h1>
<ul>
<li>
<article>评论1</article>
</li>
<li>
<article>评论2</article>
</li>
</ul>
</section>
</article>
<aside>
侧边内容
</aside>
</body>
|
情景三
辅助内容
|
1
2
3
4
5
6
7
8
9
10
11
|
<!doctype html><title>html5站案例</title>
<body>
主内容省略...
<aside>
<article>
<p>作者：kspig</p>
<p>文章编写时间：2012年4月</p>
</article>
</aside>
</body>
|
html5 address
address字面理解为“地址”，在html5中，它用于文档或者文章作者或拥有者的联系信息。注意，这里放的不是字面上理解的“地址”，而是指“联系信息”，可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。
address一般放在footer中，有时也放在header中，视情况而定。
情景
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!doctype html><title>html5 address 示例 html5zhan.com</title>
<header><h1>html5 address 示例 html5zhan.com</h1></header>
<p>这里是主体...</p>
<footer>
作者：html5zhan
<address>
<ul>
<li>QQ：10000</li>
<li>邮件：web@daojia100.com</li>
</ul>
</address>
</footer>
|