拥抱未来:HTML5标准之魅力
细心的朋友已经发现，逐浪CMS官网的前端表现DTD定义已经有新变化，并悄然咨询其背后的意义。
没错，这就是HTML5！
首先要向大家汇报的是，Zoomla！逐浪CMS最新版本5的研发已经提上日程，同时我们将导入更加标准的HTML5标准设计，从而为构建全新坚强的WEB内核而大步向前。
目前国内以HTML5为标准进行网站设计的CMS，Zoomla！逐浪CMS走在了前面，而在商业网站应用上，国外谷歌大站不说，国内的百度，还有淘宝旗下的一些子站也开始尝试导入HTML5标准设计，足见大势之所趋。而Adobe公司最新发布的Adobe Dreamweaver CS5也已经开始支持HTML5标准，虽然有一些缺陷但已经是HTML5爱好者们的最佳设计工具所选。
在Zoomla！逐浪CMS的HTML5发展道路上，我们将分几步实施，首先是保证对其它浏览器的兼容性支持（目前已经对商业用户投递支持HTML5兼容歀签的版本）;其次是引入较现有3D和全景更加专业的高级设计;最后我们将在浏览器广泛支持HTML5的基础上引入高端的交互性设计。
逐步推进，稳妥扎实将是我们的基本定位。
下面是进入HTML5技术之精彩体验：
相比HTML4，HTML5的DTD定义更加简洁：
<！DOCTYPE HTML>
<html>
但其带来的变化绝不仅仅是这么简单，http： //directguo.com/html5/ 网上展示了HTML5的一些新变化，而http://html5gallery.com/上则展示了一些卓越的HTML5设计站点，如果您的电脑上安装了Firefox3.x或谷歌浏览器，则可以进行一番体验，而即使9月份布的IE9也将支持这些卓越性能！
HTML5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案已公布，预计将在2010年9月正式向公众推荐.WHATWG表示该规范是目前正在进行的工作，仍须多年的努力。
HTML 5是近十年来Web开发标准最大大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化
微软曾在5月份宣布将把HTML 5作为IE9的核心，并将全力投入HTML 5.想必微软一定知道HTML 5是未来发展趋势，而IE9必须顺应这个潮流，否则会使自己的产品面临困境。而市面上火狐（Firefox）的，谷歌浏览器早已支持HTML5，足见大势所趋。
在过去，网页设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于表格布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联<FONT>和结果，标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代，专有协议和那些充满闪动，滚动和闪烁的丑陋网页。
虽然我们现在已经普遍使用了HTML4和CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等待大家，下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧...
跟<DIV>说再见，欢迎语义化标签
曾经，设计师们经常会跟频繁使用基于表的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“<div> -soup”综合症。也许你很熟悉下面的代码：
<section> <section> <article> <header> < h1 > Div Soup Demonstration < / h1 > < p >发表于2009年7月11日< / p > < / header> <section> < p > Lorem ipsum text blah blah等等。< / p > < p > Lorem ipsum发短信等等等等。< / p > < p > Lorem ipsum发短信等等等等。< < / section> <footer> < p >标签：HMTL，代码，演示< / p > < / footer> < / article> <aside> <header> < h1 >切向信息< / h1 > < / header> <section > < p > Lorem ipsum发短信等等等等。< / p > < p > Lorem ipsum发短信等等等等。< > Lorem ipsum文本等等等等。< / p > < / section> <footer> < p >标签：HMTL，代码，演示< / p > < / footer> < / aside> < / section> < / section>
正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的<DIV>标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的类和ID属性。事实上，CSS3也是可以然通过我们忽略掉所有类和ID的。
跟阶级属性说再见，欢迎整洁的标签
结合了富有新的语义化标记的HTML5，CSS3为网络设计师们的网页提供了神一般的力量。有了HTML5的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！
即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾类和ID这类属性像以往的DIV布局，我们在CSS中可能要这样调用：
div #news { }
div .section { }
div .article { }
div .header { }
div。content { }
div .footer { }
div .aside { }我们再来看看基于HTML5的实例：
部分{ }
文章{ }
标题 { }
页脚 { }
旁边 { }这是个进步，但仍有一些问题需要解决。在<DIV>实例中，我们需要通过类或ID属性来调用页面中的元素。这种逻辑将允许我们将样式应用到文档中的任何一个元素上，无论是整体还是个体。例如在<div>实例中，.section和.content元素很容易定位。但是在HTML5实例中，实际文档中会有很多个部分元素。其实我们可以添加一些特定的属性选择器来调用那些不同的部分元素，不过谢天谢地，我没现在可以用少量的高级CSS选择器来定位不同的部分元素。
下图：据传将更佳支持HTML5的IE9内测泄露图：
不使用类和ID定位HTML-5元素
下面让我们来看看如何在不使用类和ID的情况下定位HTML5页面元素的一个实例，我们可以使用三种CSS选择器来定位和辨别实例中的元素如下：
后代选择器：[CSS 2.1]：E F.
兄弟选择器：[CSS 2.1]：E + F.
子元素选择器：[CSS 2.1]：E > F.
下面让我们来看看如何不使用类和ID而完成对文档中的那些部分元素的定位吧：
定位最外层的<节>元素
考虑到我们的例子并不是一套完整的HTML5代码，所以我们假定在<BODY>元素下有个<NAV>元素与<节>元素是兄弟元素。这样的话，我们就可以向下面代码那样定位最外层的<节>了：
1 | body nav + section { } |
定位下一个<节>元素
作为最外层<节>元素下的唯一直属子集元素，这个<节>元素也许可以这样定位：
1 | 部分>部分{ } |
定位<文章>元素
可以定位<文章>元素的方法有很多，不过最简单的方法当然就是后代选择器了：
1 | 部分文章{ } |
定位<标题>，<节>和<页脚>元素
这三个元素分别在两个地方都出现过，一是在<文章>元素中出现，另一是在<预留>元素中出现。这种差别能让我们轻松定位每个元素。
1 | 文章标题{ } |
或者一起定义：
1 | section section header { } |
到目前为止，我们已经使用CSS2.1选择器排除掉了所有的类和ID。那么我们为什么还需要使用CSS3呢？我很高兴你能这么问...
使用CSS3对HTML5元素进行高级定位
虽然我们已经使用CSS2.1选择器排除掉了所有的类和ID，显然还会有很多更复杂的情况需要CSS3的高级选择器来解决。让我们通过完成一下的实例来了解一下如何在不使用无用的类和ID属性的情况下利用CSS3定位页面元素。
使用一个唯一的日志（POST）ID定位所有日志
WordPress的提供给我们一种包含了ID的每篇日志的源代码输出。这种信息通常用于导航和/或了解资料的意图，不过CSS3可以利用这些。唯一的ID来定义这些日志的样式当然，你还可以像往常那样为每篇日志添加类=” POST”这样的属性，但这就与我们练习的意图相冲突了（再加上它没有一点乐趣所在）。使用”子字符串匹配选择器“，我们就可以像下面这样定位所有日志和它们的不同元素了。
1 | article [ id * = post- ] { } / *定位所有日志* / |
我们仍然可以使用同样的方式定位评论的元素和它们的子元素。
1 | article [ id * = comment- ] { } / *定位所有评论* / |
定位一些指定的区域（部分）或文章（文章）
有很多博客的日志量和评论量都相当大，HTML 5会将它们由<section>或<article>元素组成。为了定位哪些指定的<section>或<文章>元素，我们就要转而使用强大的“：第n个孩子”选择器了：
1 | section ：nth- child （1 ） { } / *选择第一个<section> * / |
同样，我们可以使用“：第n个最后的孩子”选择器定位反序的一些元素。
1 | section ：nth-last- child （1 ） { } / *选择最后一个<section> * / |
更多使用的方式选择指定元素
另一种选择HTML5中指定元素（如标题，段和页脚）的方法就是利用。”：仅-的型”选择器的优势由于这些HTML5元素通常会在很多地方出现不止一次，所以当我们想定位那种在父元素下仅出现过一次的标签时这种方法很方便。例如，我们要选择的是在某
1 | <section> |
我们可以仅使用以下一行选择器：
1 | section > section ：only-of-type { } |
再次唠叨，你可以固执的为每个元素添加ID属性，但你会失去代码的可扩展性，维护性和绝对简洁的结构与表现相分离.CSS3的确能让我们可快速更方便的定位几乎所有没有ID和类属性的页面元素。
那么，我们有没有办法让所有的浏览器支持HTML5呢？
自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素（如<article>）的途径是使用HTML5 shiv，感谢remy sharp为我们提供了解这个迷你脚本来解决IE支持HTML5的问题
.html5.js必须在页面头元素内调用（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。）
作者已经把js文件放在谷歌代码项目上并允许大家直接调用，当然，前提是你不在意调用额外的文件。
http://html5shiv.googlecode.com/svn/trunk/html5.js
你可以使用IE条件注释来调用这个JS文件，这样像的FireFox等非IE浏览器就会忽视这段代码，也就不会有无谓的HTTP请求了下面这段代码仅会在IE浏览器下运行：
1 | <！ - [if IE]> |
当然如果你不喜欢调用外网文件，你也可以下载下来上传到自己的服务器单独调用（作者允许）。
以下是JS文件中的代码：
1 | （function （）{ if （！/ * @ cc_on！@ * / 0 ）return ; var e = “abbr，article，aside，audio，canvas，datalist，details，dialog，eventsource，figure，footer，header，hgroup，标记，菜单表，资产净值，输出，进步，部分，时间，视频”。分裂（'' ），我=即长度;而（我- ）{。文件的createElement （ ë [我] ）} } ）（） |
热门文章
- 360021强强联手-Zoomla!逐浪CMS入驻阿里云
- 329252新春促销:国际域名只要48元
- 187693大未来-Zoomla!逐浪CMS6.0全面发布
- 1288847月1日:全新云主机助力逐浪CMS成长！
- 94115全新逐浪云主机全面上线
- 92256智者“断”代-华夏互联老牌IDC建站平
- 88137动力逐浪云端H5与微信创作平台内容监
- 86018Zoomla!逐浪CMS多语言版面世
- 84359智能全景应用体系打造一体化电子商务
- 804510[人物专访]严莎:行走在代码世界
