日期:2014-05-17  浏览次数:20845 次

【html5】五分钟学会HTML5!(一)
语义标签和页面布局

我们首先讲一个关于一所大学的经典故事。这所大学在建设校园草地时,没有开辟任何步行小道,他们把整个空地种上草,然后等待。
一年以后,人们经常走过的地方,草都被踩光了。于是,这所大学就将这些地方铺设为真正的人行道。

棒极了!这些人行道是人们真正“走”出来的。

HTML5新语义元素的诞生正是基于同样的逻辑。(关于这一点,可以参看W3C设计指南中的“Pave the Cowpaths”。)

语义元素清晰地向浏览器和开发人员表明了它们的涵义和用途,要理解这一点,可以将它们与< div>标签进行对比。在HTML文件内,< div>标签能定义出一个分区或者一个小节,但是它无法告诉我们分区里的内容,不能传达任何清晰的涵义。

开发人员通常会将ID或者类名与< div>标签配合使用,这会向程序员传达更多的涵义。但遗憾的是,这并不能帮助浏览器领会那种标签的用途。< div id="header">

在HTML5中,有不少新的富含语义的元素,可以向浏览器和开发人员传达元素的用途。< header>

W3C挖掘了数亿个的Web页面,找出开发人员一直在使用的ID和类名。一旦开发人员抛出div1、div2这些无意义标签,他们就得到了一个描述非常细致的已经在使用的元素的列表,并让其成为W3C的标准设置。

下面是HTML5的一部分新的语义元素: