您所在的位置:开发 > Web > 热点推荐 > HTML 5学前热身 实用技巧及应用详解(1)

HTML 5学前热身 实用技巧及应用详解(1)

2010-09-01 10:16 Jeffrey 张鑫旭的空间 字号:T | T
一键收藏,随时查看,分享好友!

本文作为您开始了解HTML 5前的热身,包括了28个HTML 5的主要变化,可能只是触及到HTML5的皮毛,全当抛砖引玉,希望能对您的学习有所帮助!

AD:

虽然HTML 5标准现在仍然是个草案,但其重要的部分已经被许多现代的浏览器实现了。在《现在如何在你的站点上使用HTML 5》一文中我们介绍了如何使用HTML 5,本文将总结出HTML 5在功能上的主要变化及使用实例。

51CTO推荐专题:HTML 5 下一代Web开发标准详解

一、新的Doctype

你还在使用麻烦的,不可能记得住的XHTML文档类型吗?

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

如果是,为什么还在用呢?使用新的HTML 5文档类型代替吧。

  1. <!DOCTYPEhtml> 

我就琢磨着,为了HTML5搞个这厮代码,您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心,如今这是可行的,只有老的浏览器需要一个特定的doctype(文档类型)。浏览器如果不知道doctype,就会很简单的以标准模式对包含的标签进行渲染。所以,妹妹你大胆的向前冲,把小心谨慎都抛到九霄云外,去拥抱新的HTML5文档类型吧。

二、图形元素(TheFigureElement)

看看下面给图片添加的标示:

  1. <imgsrcimgsrc="path/to/image"alt="Aboutimage"/><p>ImageofMars.</p> 

文字裹在P标签里,与IMG标签各行其道,很难让人联想到这就是标题。HTML 5通过采用元素对此进行了改正。当合元素组合使用时,我们就可以语义化地联想到这就是图片相对应的标题。

  1. <figure> 
  2. <imgsrcimgsrc="path/to/image"alt="Aboutimage"/> 
  3. <figcaption> 
  4. <p>Thisisanimageofsomethinginteresting.</p> 
  5. </figcaption></figure> 

三、重新定义

还在不久前,元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素,但是,现在,这种用法可能就不正确了。元素已经被重新定义了,指小字,因而更具可用性。试想下你网站底部的版权状态,根据对此元素新的HTML5定义,可以正确地包裹这些信息。

四、脚本(scripts)和链接(links)无需type

您可能现在仍在给link和script标签增加type属性。

  1. <linkrellinkrel="stylesheet"href="path/to/stylesheet.css"type="text/css"/> 
  2. <scripttypescripttype="text/javascript"src="path/to/script.js"></script> 

这意味着,这些标签都各自指向样式表和脚本。因此,我们可以把type属性一起干掉。

  1. <linkrellinkrel="stylesheet"href="path/to/stylesheet.css"/> 
  2. <scriptsrcscriptsrc="path/to/script.js"></script> 



分享到:

热点职位

更多>>

热点专题

更多>>

读书

信息安全风险评估
信息安全风险评估理论研究日趋成熟,相关资料比较充分,但有关评估实际工作的参考资料很少。本书以信息安全风险评估实践为基础,

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i