10件开发者和老板都要知道的HTML5的那些事
jopen 13年前
<div id="article_content" class="article_content"> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;"><img title="1343319649_7762.jpg" border="0" alt="1343319649_7762.jpg" src="https://simg.open-open.com/show/7116ce0eb9dba75e99e357983191d75a.jpg" width="200" height="200" /></strong></p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">1. HTML5 标签没什么大不了的.</strong></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">理解这句话你需要先了解HTML 5。它仅仅是一个html4.01的一个</span></span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">升级版本</span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">？或者是它是完全不同的新版本(无处不在的大肆宣传可能会让你有这种感觉）？答案是两种理解都有部分正确。HTML 5包括许多简化和附加的网页标记，所以称它为升级版本也是公平的（虽然也有一些大的补充标签，如视频<video>和画布< canvas>）。但是，HTML 5也可以被认为是一个技术组合，包括一整套和HTML 5标签交互的API。还有CSS 3，为HTML 5带来了一些强大的新风格和动画效果。</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">如果你已经很熟悉html 4，那大多数新的标签会很容易使用。</span></span></p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">2. HTML 5的力量源泉是JavaScript.</strong></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">虽然我们都听到的总是“HTML 5″, 但真正的无名英雄是JavaScript和一套新的API。这些API包括获取地理位置(Geolocation)，图形</span></span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">绘制</span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">(a drawable canvas)，个性化的视频体验(custom video experiences)，拖放，大量的本地存储(local storage)，甚至多线程（更像是当前的应用程序）。这只是已经命名的一些API而已。</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">过去几年，Javascript的名声可不好，其实它是一个复杂和强大的语言。现在，它也是一个快速的语言，在过去十年里，速度得到近似100倍的改善（还会得到更多的改善）。当然，它仍然有它的内伤，但通过了解它们就可以有避免的方法。如果你知道他们。它也很容易入门。</span></span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">所以，如果你想运用HTML 5，你就要JavaScript。</span></span></p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">3. 标准来自哪里并不重要(It’s not which standards document an API comes from that is important).</strong></p> <p>当我们写"Head First HTML5 Programming"时，常听到"Geolocation并不是HTML5正式规格的一部分!" 是的. 但它是W3C的正式标准之一，而且事实上这并不重要。重要的是多少现在的浏览器已经支持Geolocation 了？我们更在意这个。</p> <p><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">当然，这里有一个时间的问题。但当我们写代码时，重要的是“用户需要它吗？(Will it be there for my users)“</span></span></p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">4. 怎么知道该不该上HTML5了(How to know if you should embrace HTML5 now).</strong></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">如果你的用户使用移动设备，你就应该考虑使用HTML 5。HTML 5浏览器是在大量的智能手机和平板上很普遍了。</span></span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">如果你的用户主要在桌面电脑上使用，你也应该去好好研究一下HTML 5。但是如果他们使用的是旧版本的浏览器，那就需认真评估一下了。</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">无论何时，你想要了解浏览对HTML 5支持的情况，都可以借助下面这些很棒的资源来了解。包括：</span></span></p> <ul> <li style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><a style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#00b7f3;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958186269869097639">http://caniuse.com/</a>.</li> <li style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><a style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#00b7f3;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958349339978962242">http://www.findmebyip.com/</a>.</li> <li style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><a style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#00b7f3;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958185649759945135">http://html5test.com/</a>.</li> <li style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;">Wikipedia’s <a style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#00b7f3;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958349341533073875">Comparison of Web Browsers</a> page and <a style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#00b7f3;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958349342329845860">Comparison of Layout Engines</a> page.</li> <li style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;">WHATWG’s <a style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#00b7f3;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958349343131313484">Implementations in Web Browsers</a> wiki page.</li> </ul> <p>当然，你也要尽量在各个浏览器上测试一下你的应用程序或网页。</p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">5. 进退自如: 优雅降级和功能检查(graceful degradation and feature detection).</strong></p> <p>通过JavaScript有许多方法可以用来检测HTML5的支持能力。通过创建一个对象，通过检查属性，通过使用自定义方法如<video>的canPlayType方法，这些都可以。</p> <p>不用说，如果用户的浏览器不支持新特性，你需要提供备用方案。(比如，使用图片或flash来代替HTML5的video和canva, 或者显示一段信息告诉用户为什么没看到预期的效果。). 有没有更好的方法呢?</p> <p>有的.<span> </span> <a style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#00b7f3;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958193856985135572">Modernizr JavaScript library</a> 是一个开源库，可以很方便的检查HTML5和CSS3的支持情况，并加载相似的资源, 如不同的JavaScript脚本, CSS文件, 图片等等，取决于支持的程度.</p> <p> </p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">6. <video>标签很简单; 可是编码呢?</strong></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">通过增加一个<video>元素到您的网页,就可以轻松地在网页上播放视频，并且不需要其它插件。但说到视频格式，不幸的是，支持的协议很少。今天，支持三个不同的格式:WebM，MP4，以及Ogg，而至于是哪一个，和取决于你使用的浏览器。如果你的用户集中在某个平台，相对比较容易。比如，针对iPad用户，你只需要提供MP4格式就可以了。如果你想支持所有流行的浏览器，那么你就要提供所有三种格式的内容。</span></span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">怎么做？你可以使用<video>和<source>同时提供三种视频文件。如果都不支持，你当然还要提供一个备案。</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">所以，将视频放到网页很容易了，但如何让用户得到可以真正播放的视频仍然有些麻烦。</span></span></p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">7. <canvas>标签并不只是为了绘图.</strong></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;"><canvas>为HTML添加了一个二维的绘图区域。乍一看，<canvas>适于创建一个简单的绘图程序，可以使用线，弧，和矩形。</span></span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">事实上，如果看一下演示<canvas>的网站，你会看到它被用于任何基础绘图、交互式绘图应用、制作动画、游戏，甚至渲染三维场景。</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">一个有趣的应用是视频处理。你可以从player取得帧数据(frame data)并加以处理，而后写入到一个<canvas>上显示出来。同样的，你可以在游戏中使用一个canvas提供图像的双缓冲。</span></span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">所以，不要小瞧了<canvas>，它是</span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">HTML 5</span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">一个强大的新功能，可以用于各种图形应用, 在现代的浏览器中的JavaScrip的性能提升也足以应付图像和视频处理需求。</span></p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">8. CSS3支持通常由JavaScript提供的动画效果.</strong></p> <p>通过CSS3，我们可以轻松实现以前只能通过JavaScript实现的网页效果。</p> <p><span style="background-color:transparent;display:inline !important;">例如，当鼠标划过时，需要组件可以淡入淡出，以前必须写复杂的JavaScript代码或者使用一个UI库(jQuery,scriptaculous)。而通过CSS3,你就不再需要写代码了。</span></p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">Transition(过渡)</strong> 和 <strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">transform(转换)</strong> 是CSS3中的新特性，你能通过它们创造有趣的效果和动画。比如你可以使用元件不透明性(opacity)的过渡(transition)实现淡化的效果。还可以通过转换(transform)函数实现多个元件的旋转和缩放。组合起来就可以创造出很酷的动画效果。</p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">9. JSON主导新的内容格式.</strong></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">2004年XML就努力统治世界，然而到现在还没有达成。</span></span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">目前很多开发商正使用JSON取代XML。JSON可以使用与代码相同的格式和序列化(serialized)的对象。当得到远程的JSON数据，可以从浏览器本身得到快速的解析。每一个浏览器都内置了JSON的对象和两个方法：stringify (字串化):用来从一个对象生成JSON数据字串，parser(解析): 用来从字串创建一个对象。</span></span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">今天JSON被广泛应用在网络服务应用程序，如非死book和推ter。而且，由于XHR有跨域的限制，许多网络服务的都实现了JSONP(JSON with Padding)。它本身是一个简单的概念，但非常实用。</span></p> <p><strong style="padding-bottom:0px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;color:#1c1c1c;vertical-align:baseline;border-left-width:0px;font-weight:bold;padding-top:0px;">10. XHTML已死，却又永生(XHTML is dead, long live XHTML).</strong></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">随着XHTML 2的逝去和HTML 5的崛起，</span><span style="background-color:transparent;display:inline-block;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">XHTML早已失去了</span></span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">网络语言的</span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">领先地位。</span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">但并不意味着你不能使用XHTML,事实上，我们叫它XHTML5。</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-family:'Droid Sans',Arial,sans-serif;color:#48423f;"><span style="line-height:24px;font-size:12px;">记住，XHTML和HTML</span></span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">之间的差异是</span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">XHTML使用严格的语法。受益的是它是可扩展的（因为它是XML）, 缺点是XHTML过于严格，发挥的没有其他语言那么好（如CSS和JavaScript）， 也并不是为构建Web应用而设计的。</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">所以，现在写XHTML5，添加命名空间(namespace)和使用规范的语法就可以了。</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">(see the</span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;"> </span><a style="padding-bottom:0px;line-height:24px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;font-family:'Droid Sans',Arial,sans-serif;border-top-width:0px;border-bottom-width:0px;color:#00b7f3;font-size:12px;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="/misc/goto?guid=4958349344675914026">presentation</a><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;"> (Webcast) </span><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;font-size:12px;">for more details).</span></p> <p style="padding-bottom:10px;border-right-width:0px;background-color:transparent;margin:0px;padding-left:0px;outline-width:0px;padding-right:0px;border-top-width:0px;border-bottom-width:0px;vertical-align:baseline;border-left-width:0px;padding-top:0px;"><span style="font-size:10px;"><span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;">原文地址:http://wickedlysmart.com/2011/ten-things-every-developer-and-manager-should-know-about-html5/</span><br /> <span style="line-height:24px;background-color:transparent;display:inline !important;font-family:'Droid Sans',Arial,sans-serif;color:#48423f;">转载请注明出处:http://blog.csdn.net/horkychen</span></span></p> </div>