html5内容可编辑属性
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。
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 > |
section和article可以互相嵌套,也就是说他们没有上下级关系,section可以包含article,article也可以包含section。
感觉上使用都差不多,都可以有h1,h2,h3,都有一个主体,那应该怎么来区分它们的不同?其实很简单,只要从字面上理解它们就可以足够了:
1、article是文章,文章就是一段完整的独立的内容。
2、section就是块,某种意义上可以理解为div,但是比div的意思更加明确一点。
1、section和div都可以对内容进行分块,但是section是进行有意义的分块,无意义的分块应该由div来做,例如用作设置样式的页面容器。
2、section内部必须有标题,标题也代表了section的意义所在。
1、section做为"块",理论上可以用于很多地方,例如一个同字型的网页,可以用于包裹两边的内容,但是实际上,html5中定义了更加有意义的aside标记,完全可以用aside来替代section,因此在使用的时候应尽量使用更有意义的标记。
2、html5与css3权威指南中提到一个检查轮廓的工具,这里提供一下:http://gsnedders.html5.org/outliner/
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 >
|
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 > |
html5中的一些标签学习总结,布布扣,bubuko.com
原文地址:http://www.cnblogs.com/javawebstudy/p/3765416.html