WEB开发前沿_7技术.docxVIP

7项Web开发者需要了解的新技术 2011-09-20 09:29?|?3863次阅读?|?来源：catswhocode? HYPERLINK /a304652.html /a304652.html Web开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在Web开发领域混并混得还不错的话。下面将为你展示7项新的Web开发技术，作为一个Web开发人员，你需要了解、熟悉并学会的技术。 1.CSS3 media queries 目前，大量的智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对Web开发带来了前所未有的挑战，如何让Web页面能适应各种尺寸的屏幕让很多Web开发人员相当的纠结。幸运的是CSS3规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的CSS样式。 例如，下面的代码只在屏幕显示区域大小为767px的时候才有效： @media?screen?and?(max-width:767px){ ? ????#container{ ? ????????width:320px; ? ????}? ? ? ????header?h1#logo?a{ ? ????????width:320px; ? ????????height:44px; ? ????????background:url(image-small.jpg)?no-repeat?0?0; ? ????}??????????????????????????? ? ? }? 更详细的信息请阅读：? HYPERLINK /blog/create-an-adaptable-website-layout-with-css3-media-queries Create an adaptable website layout with CSS3 media queries 2.Font resizing with REMs CSS3引入新的字体尺寸单位 rem (root rm) em单位是相对于父节点的font-size，会有一些组合的问题，而rem是相对于根节点（或者是html节点），意思就是说你可以在html节点定义一个单独的字体大小，然后所有其他元素使用rem相对于这个字体的百分比进行设置。 html?{?font-size:?62.5%;?} ? body?{?font-size:?1.4rem;?}?/*?=14px?*/ ? h1???{?font-size:?2.4rem;?}?/*?=24px?*/? 更多关于rem的内容请看： HYPERLINK http://snook.ca/archives/html_and_css/font-size-with-rem Font resizing with REMs 3.Cache pages for offline usage HTML5引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。 要缓存页面非常简单，首先在你网站的.htaccess文件中添加如下一行： AddType?text/cache-manifest?.manifest? 然后你可创建一个文件如offline.manifest，包含如下内容： CACHE?MANIFEST ? ? CACHE ? index.html ? style.css ? image.jpg? 最后，在html节点中增加： html?manifest=/offline.manifest? 就这么多。 更多信息请阅读：? HYPERLINK /blog/how-to-create-offline-html5-web-apps-in-5-easy-steps How to create offline HTML5 web apps in 5 easy steps 4.Server-side JavaScript JavaScript现在已经是非常流行的Web客户端编程语言了，但JavaScript也越来越多的出现在服务器端了，通过强大的JavaScript服务器端环境：Jaxer, Node.js and Narwhal. 下面代码显示如何用Node.js创建一个简单的Hello World程序 var?sys?=?require(sys); ? sys.puts(Hello?World!); ? ? 更详细内容请阅读： HYPERLINK /tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/ Learning Server-Side JavaScript