HTML 5学前热身 实用技巧及应用详解(1) - 51CTO.COM

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

• http://developer.51cto.com  2010-09-01 10:16  Jeffrey  张鑫旭的空间  我要评论(1)

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

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

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

一、新的Doctype

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

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

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

<!DOCTYPEhtml>

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

二、图形元素(TheFigureElement)

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

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

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

<figure>
<imgsrcimgsrc="path/to/image"alt="Aboutimage"/>
<figcaption>
<p>Thisisanimageofsomethinginteresting.</p>
</figcaption></figure>

三、重新定义

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

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

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

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

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

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




【内容导航】  第 1 页：新的Doctype及图形元素  第 2 页：内容输入及占位符  第 3 页：本地存储及HTML5表单特征  第 4 页：Autofocus属性以及Audio、Video支持  第 5 页：视频预载及正则表达式  第 6 页：使用区域input创建滑块

 

原文：HTML 5学前热身 实用技巧及应用详解

标 签：  HTML 5

上一篇： 全屏模式下处理Silverlight控件的两种方式 下一篇： 没有了

网友评论

查看所有评论（1）