下一个WEB时代将是HTML5的?它是一场WEB的革命，因为改写了WEB的历史?
呃，关于HTML5我只使用，不说话……
HTML5被浏览器支持了有很长一段时间了，而由于我的惰性，因此只知道其中的一些标签可以用来做什么，而一直没有去实践过如何去做。
也曾经一时兴起的用dreamweaver新建一个html文档兴致勃勃的一边查阅W3C教程一边在dw里编写HTML5代码。可是当我在chrome下浏览的时候却发现页面呈现的效果简直狗屁不是!于是我怀疑chrome所说的支持HTML5会不会是一个谎言？
后来的后来我才知道，原来是我的声明有问题！这些最基础的东西竟然被我忽略掉了，惭愧的说其实之前对于文档声明我从来都是被DW默认习惯了，因此从没有去关注过……
<!DOCTYPE HTML><!--HTML5声明就是这么简单-->
在HTML5中增加了很多更符合语义化的标签，应用这些标签能让你在尽可能不单独定义class的情况下呈现你的布局与样式。并且需要着重再强调一次的是它更加符合语义化。如果您想了解更多关于HTML5的知识，您可以访问W3C网站的HTML5教程:http://www.w3school.com.cn/html5/
废话少说，以下是我结合简单的HTML5标签来制作的个人简历（您需要在chrome、safari、opera、Firefox下才能正常浏览）
在这份简历中，用到的HTML5标签有
1 2 3 4 5 6 7 | <header></header> <aside></aside> <article></article> <address></address> <fieldset> <legend></legend> </fieldset> |
需要提醒一下的是，开始我用header标签在chrome下能正常显示布局，而在firefox和opera下不能正常显示，后来才知道原来在firefox和opera下默认的header标签是行内元素而不是我期望的块级元素，于是，我们在使用之前，仍需要重置css样式。下面是我在网上找到的HTML5的css重置代码：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; } nav ul { list-style: none; } ol { list-style: decimal; } ul { list-style: disc; } ul ul { list-style: circle; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } ins { text-decoration: underline; } del { text-decoration: line-through; } mark { background: none; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input[type="submit"], input[type="button"], button { padding: 0 !important; margin: 0 !important; } input, select, a img { vertical-align: middle; }
简历HTML部分
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>刘铭森的个人简历</title> </head> <body> <fieldset class="mt10 mb10"> <legend>个人简历</legend> <header class="clearfix"> <aside><img src="http://www.pivotcode.com/wp-content/uploads/2010/07/mingsenliu.jpg"></aside> <h1>刘铭森</h1> <h2>- 前端开发 <a href="http://www.pivotcode.com" target="_blank" title="前端开发技术博客">http://www.pivotcode.com</a></h2> <h2>- 摄影 <a href="http://photo.mingsenliu.com" target="_blank" title="摄影博客">http://photo.mingsenliu.com</a></h2> <div class="clear"></div> </header> <article> <fieldset> <legend>职能</legend> <ol> <li>精练使用<abbr title="EXtensible HyperText Markup Language">xHTML</abbr>、<abbr title="Cascading Style Sheets">CSS</abbr>规范代码，兼容主流浏览器（包括IE6）</li> <li>熟用javascript动态<abbr title="Dynamic Hypertext Marked Language">DHTML</abbr>效果实现,兼容主流浏览器</li> <li>有学习与实践 <abbr title="HyperText Markup Language">HTML5</abbr> 与 <abbr title="Cascading Style Sheets">CSS3</abbr> 前沿技术经验</li> <li>熟用jQuery代码库，了解YUI,Ajax</li> <li>精练Photoshop切图与效果实现，会用flash制作简单动画，对ActionScript有所了解</li> <li>对php,sql的后台实现有所了解，对php代码有所研究，会应用前端技术嵌套PHP代码制作Wordpress模板</li> <li>翻唱某些歌不走调，而且唱得还可以</li> <li>会用单反相机拍摄点不影响对方形象的照片</li> </ol> </fieldset> <fieldset> <legend>工作能力</legend> <ol> <li>懂得如何协作和怎样协作才可以以同样的时间获得更高的效率</li> <li>编写代码的质量和效率高</li> <li>懂得如何优化网站性能与<abbr title="search engine optimization">SEO</abbr></li> <li>接触过很多项目，有丰富的web2.0网站前端开发经验</li> <li>对用户体验和产品交互有自己的认识，同时也了解用户的使用习惯</li> <li>学习能力能适应开发和业务需求，需要什么就能学什么并且学会学好</li> <li>不会吸烟，不污染办公室环境</li> </ol> </fieldset> <fieldset> <legend>工作经验</legend> <dl> <dt>2009.11--今 <a href="http://www.yeeyan.org" target="_blank">北京译言协力传媒科技有限公司</a></dt> <dd>·<abbr title="Cascading Style Sheets">CSS</abbr>与<abbr title="EXtensible HyperText Markup Language">xHTML</abbr>页面重构与体验优化</dd> <dd>·Javascript动态效果实现(结合jQuery)</dd> <dd>·兼部分页面设计与广告Banner设计</dd> <dt>2009.3--今(兼职) <a href="http://www.internetsolutionz.com" target="_blank">Internet Solutionz Inc.</a></dt> <dd>·公司网站设计与切图</dd> <dd>·公司的网页重构项目参与（<abbr title="Cascading Style Sheets">CSS</abbr> & <abbr title="EXtensible HyperText Markup Language">xHTML</abbr>）</dd> <dd>·公司项目Javascript动态效果实现(结合jQuery)</dd> <dd>·公司宣传Banner与VI设计</dd> <dt>2008.10--2009.3 <a href="http://www.liaoru.com" target="_blank">北京了如科技有限公司</a></dt> <dd>·负责旗下品牌房友圈网站的页面重构（<abbr title="Cascading Style Sheets">CSS</abbr> & <abbr title="EXtensible HyperText Markup Language">xHTML</abbr>）</dd> <dd>·负责部分页面与企业VI设计</dd> <dt>参与网站项目 <a href="http://www.joboto.com" target="_blank">周伯通互动招聘社区</a></dt> <dd>·<abbr title="Cascading Style Sheets">CSS</abbr>与<abbr title="EXtensible HyperText Markup Language">xHTML</abbr>页面重构</dd> <dd>·Javascript动态效果实现(结合jQuery)</dd> </dl> </fieldset> <fieldset> <legend>您可能还想知道的</legend> <dl> <dt>习惯的开发环境</dt> <dd>·<abbr title="windows Apache MySql PHP">WAMP</abbr> & Aptana & FireBug</dd> <dd>·<abbr title="windows Apache MySql PHP">WAMP</abbr> & Dreamweaver & FireBug</dd> <dd>·<abbr title="windows Apache MySql PHP">WAMP</abbr> & EditPlus & FireBug</dd> <dt>习惯的测试环境</dt> <dd>Windows 7 + FireFox & Chrome & & Opera & IE8 & IE Tester</dd> <dt>学历</dt> <dd>·6年级开始学画画，高中开始不好好学习，现在开始后悔</dd> <dd>·故目前学历只有中专（天津精通学院计算机专业）</dd> <dt>语言能力</dt> <dd>·一口掺杂着河北保定方言的汉语普通话</dd> <dd>·一般的英语读写能力（在不断学习和积累的路上）</dd> <dd>·看不懂和听不懂的其他语言能力</dd> <dt>我在读的书</dt> <dd><script type="text/javascript" src="http://www.douban.com/service/badge/mingsenliu/?show=dolist&n=20&columns=10&hideself=yes&cat=book" ></script></dd> <dt>我读过的书（不完全统计）</dt> <dd><script type="text/javascript" src="http://www.douban.com/service/badge/mingsenliu/?show=collection&n=20&columns=10&hideself=yes&cat=book" ></script></dd> </dl> </fieldset> <fieldset> <legend>如果以上信息没让您失望</legend> <address> <ul> <li>手机：<span>15101123812</span></li> <li>E-mail & Gtalk : <span>mingsenliu@gmail.com</span></li> <li>QQ & MSN : <span>mingsenliu@msn.com</span></li> <li>个人网站：<span><a href="http://www.pivotcode.com" target="_blank">http://www.pivotcode.com</a></span></li> <li>现住址：<span>北京市朝阳区水锥子社区5号楼209室</span></li> </ul> </address> </fieldset> </article> </fieldset> </body> </html>
简历CSS部分
fieldset{width:880px;margin:0 auto;-webkit-box-shadow:3px 3px 0px #E0E7F1;box-shadow:3px 3px 0px #E0E7F1;-moz-box-shadow:3px 3px 0px #E0E7F1} fieldset fieldset{width:auto;margin-bottom:20px;padding:10px;} legend{font-weight:bold;text-align:center} fieldset fieldset legend{text-align:left} header{width:840px;padding:20px;background:#E0E7F1;margin-bottom:10px;} header h1{font-size:26px;color:#036;margin-bottom:10px;} header h2{font-size:14px;color:#36C;line-height:25px;} header aside{width:60px;height:60px;padding:1px;float:right;background:#fff;border:1px solid #ccc} header aside img{width:60px;height:60px;} article h2{line-height:30px;margin-bottom:10px;} article ol{margin-left:30px;list-style:decimal;font-size:12px;} article ol li{line-height:30px;} article dl{margin-left:5px;font-size:12px;line-height:30px;} article dl dt{font-weight:bold} article dl dd{line-height:20px;} address ul{list-style:square;font-size:12px;margin-left:20px;font-family:Georgia,"simhei","Times New Roman", Times, serif} address ul li{line-height:30px;} address ul li span{color:#06C;font-style:normal;font-size:14px;}
由简历的源代码可见，结构完全摆脱掉了class样式的依赖。对于HTML5你心动了吗？
“结构完全摆脱掉了class样式的依赖。”
不过这样感觉不够语义化。
谢谢
crossyou兄所言极是，html5标签虽然更符合语义化了，但是它总是比不上我们自定义的标签来的好。
然而如果换个角度讲的话，这样能让代码减少很多，从而让我们在开发时即可以减少代码使用，又可以提升网站性能。
但是总会有矛盾的，好比一方面是语义化，一方面是html5对代码与性能的提升，但是我觉得具体要看自己项目的需求吧，需要什么就用什么，况且html5也并没有舍弃对选择器的支持，所以可以熊掌鲍鱼兼得的去灵活运用，这才是最好的办法吧！
哇 不错啊
谢谢wordpress.la。你的网站我经常去，也学了不少东西，呵呵
Thank you, much appreciated!
不错 学以致用
Great article. Waiting for more.