HTML5 中国:hp://www.html5cn.org
细谈 HTML 5 新增的元素
对于 HTML 的渲染,浏览器一直停留在 1999 年的水平。为此,HTML 5 是一
个实用主义方案,这样不仅可以继续处理这么多年来散落在世界各个角落的
HTML,也可以让浏览器厂商更容易添加新特性。这就叫 degrade
gracefully(优雅降级)。让我们来看看 HTML 5 增加的一些新元素。
HTML 5 结构元素
这真是大快人心。目前,我们定义结构只能通过一个“万能”的 div, 试图通过设
置它的特性 id 的值如 header, footer, sidebar 等来分别表达头部,底部或者
侧栏等。有了它们,代码编写者不再需要为 id 的命名费尽心思,对于手机、阅
读器等设备更有语义的好处。HTML 5 增加了新的结构元素来表达这些最常用
的结构:
◆section: 这可以表达书本的一部分或一章,或者一章内的一节
◆header: 页面主体上的头部。并非 head 元素
◆footer: 页面的底部(页脚),可以是一封邮件签名的所在
◆nav: 到其他页面的链接集合
◆article: 诸如 blog, 杂志,纲要等之中的一条独立记录。
举个例子,一个 blog 的首页,用 HTML 5 写的话,可以是这样(有省略):
1. <<!DOCTYPE'HTML>'<HTML>'''<head>'''''<title
>realazy</title>'''</head>'
2. <body>'
3. <header>'
4. '''''<h1>Realazy</h1></header>'
5. <section>''''' '
6. <article>''''' '
7. <h2><a'href="http://realazy.org/blog"'mce_href="http://
realazy.org/blog">标题</a></h2>'
8. '<p>内容在此...(省略 n 字)</p>'''''</article>'''''<article>''''
'<h2><a'href="http://realazy.org/blog"'mce_href="http://
realazy.org/blog">标题 2</a></h2>'''''<p>内容 2 在此...(省略
n 字)</p>'''''</article>'''''...'''''</section>' '
9. <footer>'nav>'''''<ul>' '
10. ''<li><a'href="http://realazy/blog"'mce_href="http://
realazy/blog">导航 1</a></li>'''''''<li><a'href="http://
评论2