<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CSS3 | 酷 壳 - CoolShell</title>
	<atom:link href="https://coolshell.cn/tag/css3/feed" rel="self" type="application/rss+xml" />
	<link>https://coolshell.cn</link>
	<description>享受编程和技术所带来的快乐 - Coding Your Ambition</description>
	<lastBuildDate>Mon, 06 Jun 2011 05:19:54 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.2</generator>
	<item>
		<title>开源中最好的Web开发的资源</title>
		<link>https://coolshell.cn/articles/4795.html</link>
					<comments>https://coolshell.cn/articles/4795.html#comments</comments>
		
		<dc:creator><![CDATA[陈皓]]></dc:creator>
		<pubDate>Wed, 08 Jun 2011 00:28:52 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[杂项资源]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[Database]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web]]></category>
		<guid isPermaLink="false">http://coolshell.cn/?p=4795</guid>

					<description><![CDATA[<p>文章来源：Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。 学习HTML...</p>
<p class="read-more"><a class="btn btn-default" href="https://coolshell.cn/articles/4795.html"> Read More<span class="screen-reader-text">  Read More</span></a></p>
The post <a href="https://coolshell.cn/articles/4795.html">开源中最好的Web开发的资源</a> first appeared on <a href="https://coolshell.cn">酷 壳 - CoolShell</a>.]]></description>
										<content:encoded><![CDATA[<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415450859608158"
     crossorigin="anonymous"></script>文章来源：<a title="Best “must know” open sources to build the new Web" href="http://www.b2bweb.fr/molokoloco/best-must-know-ressources-for-building-the-new-web-%E2%98%85/" target="_blank">Best “must know” open sources to build the new Web</a>。个人感觉这个收集贴收集成相当的全。</p>
<h4>学习HTML 5编程和设计</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="wallOfWonder" src="http://www.b2bweb.fr/wp-content/uploads/wallOfWonder.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://www.html5rocks.com/" target="_blank"><strong>HTML5 Rocks</strong></a> : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). <a href="http://code.google.com/p/html5rocks/" target="_blank">源码</a></li>
<li>很不错的 <a href="https://mozillademos.org/demos/dashboard/demo.html" target="_blank"><strong>HTML5 Dashboard</strong></a> &#8211; Mozilla，效果很炫。</li>
<li><a href="http://developers.whatwg.org/" target="_blank"><strong>WhatWG Developers</strong></a>, 一个清楚的 HTML5 技术规格说明书。</li>
<li>★ <a href="http://stackoverflow.com/" target="_blank"><strong>StackOverflow</strong></a> : 大名鼎鼎的技术问答式论坛。</li>
<li>★ <a href="http://addyosmani.com/blog/" target="_blank"><strong>Addyosmani</strong></a>, jQuery 和 JavaScript 文章教程</li>
<li><a href="http://www.sohtanaka.com/web-design-tutorials/" target="_blank"><strong>Sohtanaka</strong></a>, jQuery 和 JavaScript 文章和教程</li>
<li>★ <a href="http://net.tutsplus.com/category/tutorials/" target="_blank"><strong>Nettuts+</strong></a> 是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖 HTML, CSS, Javascript, CMS’s, PHP 和 Ruby on Rails.</li>
<li><a href="http://tympanus.net/codrops/" target="_blank"><strong>Codrops</strong></a>, 教程和 web 资源</li>
<li><a href="http://www.webappers.com/" target="_blank"><strong>WebAppers</strong></a>, 最好的开源资源</li>
<li><a href="http://tutorialzine.com/" target="_blank"><strong>Tutorialzine</strong></a> – PHP MySQL jQuery CSS 教程, 资源和赠品</li>
<li><strong><a href="https://developer.mozilla.org/en/JavaScript/Guide" target="_blank">Mozilla JavaScript guide</a></strong></li>
<li> <a href="http://code.google.com/p/molokoloco-coding-project/" target="_blank"><strong>codes snippets</strong></a>, 作者自己收集的一些代码片段</li>
</ul>
<p><span id="more-4795"></span></p>
<h4>服务器端的软件</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="nodeJs" src="http://www.b2bweb.fr/wp-content/uploads/nodeJs.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://nodejs.org/" target="_blank"><strong>Node.js</strong></a> 是服务器端的 JavaScript 环境，其使用了异步事件驱动模式。其让Node.js在很多互联网应用体系结构下获得非常不错的性能。 <a href="https://github.com/joyent/node/" target="_blank">源码</a> 和 <a href="http://jsapp.us/" target="_blank">实时演示</a>。</li>
<li><a href="http://www.phantomjs.org/" target="_blank"><strong>PhantomJS</strong></a> 也是一个服务器端的 JavaScript API的WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG</li>
<li><strong><a href="http://www.lighttpd.net/" target="_blank">Lighttpd</a></strong> 一个轻量级的开源Web服务器。新闻，文档，benchmarks, bugs, 和 download. Lighttpd 支撑了几个非常著名的 Web 2.0 网站，如：YouTube, wikipedia 和 meebo.</li>
<li><strong><a href="http://nginx.net/" target="_blank">NGinx</a></strong>, 性能巨高无比的轻量级的Web服务器。比Apache高多了。花了6年的时间，终于走到了1.0版。</li>
<li><strong><a href="http://httpd.apache.org/" target="_blank">Apache HTTP Server</a></strong> 是一个很流行的并支持多个流行的操作系统的Web服务器。</li>
<li>★ <strong><a href="http://nodejs.org/" target="_blank"></a><a href="http://www.php.net/" target="_blank">PHP</a></strong> 可能是最流行的服务器端的Web脚本动态处理语言。</li>
<li>当然，还有 <strong><a href="http://www.ruby-lang.org/fr/" target="_blank">Ruby</a></strong>, <strong><a href="http://www.python.org/" target="_blank">Python</a></strong>, <strong><a href="http://www.erlang.org/" target="_blank">Erlang</a></strong>, <strong><a href="http://www.perl.org/" target="_blank">Perl</a></strong>, <strong><a href="http://www.java.com/fr/" target="_blank">Java</a></strong>, <strong><a href="http://www.microsoft.com/net/" target="_blank">.NET</a></strong>, <strong><a href="http://www.android.com/" target="_blank">Android</a></strong>, <strong><a href="http://cpp.developpez.com/" target="_blank">C++</a></strong>, <strong><a href="http://golang.org/" target="_blank">Go</a></strong>,<a href="https://github.com/pmcelhaney/Mustache.cfc"></a><strong><a href="http://fantom.org/" target="_blank"> Fantom</a></strong>,<strong><a href="http://jashkenas.github.com/coffee-script/" target="_blank">CoffeeScript</a></strong>, <strong><a href="http://www.digitalmars.com/" target="_blank">D</a></strong>, …</li>
</ul>
<h4>PHP 框架和工具</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="drupal" src="http://www.b2bweb.fr/wp-content/uploads/drupal.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://wordpress.org/download/" target="_blank"><strong>WordPress</strong></a> 是一个基于博客系统的开源软件。参看《<a title="WordPress是怎么赢的？" href="https://coolshell.cn/articles/3716.html" target="_blank">WordPress是怎么赢的？</a>》</li>
<li><strong><a href="http://drupal.org/" target="_blank">Drupal</a></strong> 是一个内容管理系统 (CMS).</li>
<li><a href="http://www.centurion-project.org/" target="_blank"><strong>Centurion</strong></a> 是一个新出现的开源 CMS ，一个灵然的 PHP5 Content Management Framework. 使用 Zend Framework, 其组件坚持通用，简单，清楚和可重用的设计原则。</li>
<li><strong><a href="http://www.phpbb.com/" target="_blank">phpBB</a></strong> 一个开源的论坛（国内的Discuz！更多）</li>
<li><strong>★ <a href="http://simplepie.org/" target="_blank">SimplePie</a></strong> : 超快的，易用的,  RSS  和 Atom feed PHP解析。</li>
<li><strong>★ <a href="http://phpthumb.gxdlabs.com/" target="_blank">PHPthumb</a></strong>, PHP 图片处理库</li>
<li><strong>★ <a href="http://phpmailer.worxware.com/" target="_blank">PHPMailer</a></strong> 强大的全功能的PHP邮件库</li>
<li><strong><a href="http://code.google.com/p/pubsubhubbub/" target="_blank">PubSubHubbub</a></strong>协议，一个简单，开放， server-to-server 的 pubsub (publish/subscribe) 协议——Atom and RSS的扩展。</li>
<li>更多的请参看 &#8211; <a title="20 你应该知道的PHP库" href="https://coolshell.cn/articles/200.html" target="_blank">20个你应该知道PHP库</a> 和 <a title="9个强大免费的PHP库" href="https://coolshell.cn/articles/455.html" target="_blank">9个强大免费的PHP库</a></li>
</ul>
<h4>数据库</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="sqldesigner" src="http://www.b2bweb.fr/wp-content/uploads/sqldesigner.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://couchdb.apache.org/" target="_blank"><strong>Apache CouchDB</strong></a> 是一个面向文档的数据库管理系统。它提供以JSON 作为数据格式的REST 接口来对其进行操作，并可以通过视图来操纵文档的组织和呈现。.<a href="https://github.com/apache/couchdb" target="_blank">源码</a>.</li>
<li><a href="http://code.google.com/p/monoql/" target="_blank"><strong>MonoQL</strong></a> 是一个采用PHP+ExtJS开发的MySQL数据库管理工具。界面极像一个桌面应用程序，支持大部分常用的功能包括：表格设计，数据浏览/编辑，数据导入/导出和高级查询等。</li>
<li><strong> </strong><a href="http://mariadb.org/"><strong>MariaDB</strong></a> 是<a title="MySQL" href="http://www.mysql.com/" target="_blank">MySQL</a>的一个分支，由MySQL 创始人Monty Widenius 所开发。GPL，用来对抗Oracle所有的MySQL的license的不测。自Oracle收购SUN以来，整个社区对于MySQL前途的担忧就没有停止过。</li>
<li>★ <a href="http://www.sqlite.org/" target="_blank"><strong>SQLite</strong></a> 不像常见的客户端/服务器结构范例，SQLite引擎不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库（定义、表、索引和数据本身）都在宿主主机上存储在一个单一的文件中。它的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。库实现了多数的SQL-92标准，包括事务，就是代表原子性、一致性、隔离性和持久性的（ACID），触发器和多数的复杂查询。不进行类型检查。你可以把字符串插入到整数列中。某些用户发现这是使数据库更加有用的创新，特别是与无类型的脚本语言一起使用的时候。其他用户认为这是主要的缺点。</li>
<li><strong><a href="http://ondras.zarovi.cz/sql/demo/" target="_blank">SQL 在线设计编辑器</a></strong>，这一节的那个图片就是这个在线编辑器的样子了。一个画数据库图表的在线工具。很强大。</li>
</ul>
<h4>API 和 在线数据</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="yql" src="http://www.b2bweb.fr/wp-content/uploads/yql.png" alt="" width="600" height="238" /></p>
<ul>
<li><a href="http://www.programmableweb.com/apis/directory" target="_blank"><strong>ProgrammableWeb</strong></a>, 最流行的Web Services 和 API 目录大全。</li>
<li><strong><a href="http://code.google.com/intl/fr/apis/gdata/docs/directory.html" target="_blank">Google Data Protocol</a></strong> 一组Google服务的数据服务API。</li>
<li><a href="http://developer.yahoo.com/everything.html" target="_blank"><strong>Yahoo! Developer Network</strong></a> – APIs 和 Tools</li>
<li><a href="http://pipes.yahoo.com/" target="_blank"><strong>Yahoo! Pipes</strong></a> 可视化在线编程工具，它是一个用于过滤、转换和聚合网页内容的服务。</li>
<li>★ The <a href="http://developer.yahoo.com/yql/console/" target="_blank"><strong>Yahoo! Query Language</strong></a> 一个很像 SQL的网页查询工具。</li>
</ul>
<h4>在线代码和媒体编辑器</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="jsfiddle" src="http://www.b2bweb.fr/wp-content/uploads/jsfiddle.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://www.coderun.com/" target="_blank"><strong>CodeRun Studio</strong></a>一个基于JavaScript语言开发的跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。（参看《<a rel="bookmark" href="https://coolshell.cn/articles/1883.html" target="_blank">Coderun.com 在线开发IDE</a>》）</li>
<li><a href="https://github.com/ajaxorg/cloud9" target="_blank"><strong>Cloud9 IDE</strong></a> – 一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。</li>
<li>★ <a href="http://jsfiddle.net/" target="_blank"><strong>jsFiddle</strong></a> – Javascript的在线运行展示框架，这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果，其简单而强大 (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)</li>
<li><strong><a href="http://www.akshell.com/" target="_blank">Akshell</a>，</strong>一种云服务，它使用服务端的JavaScript和在线的IDE帮助开发者进行快速应用程序开发。 它还提供云托管，所以部署是即时的。</li>
<li><a href="http://braincast.nl/samples/jsoneditor/" target="_blank"><strong>JSONeditor</strong></a>, 一个好用的JSON 编辑器</li>
<li>★ <a href="http://tinymce.moxiecode.com/wiki.php/TinyMCE" target="_blank"><strong>TinyMCE</strong></a> 一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。</li>
<li><a href="http://www.sencha.com/products/designer/" target="_blank"><strong>Ext Designer</strong></a> 是一个桌面应用工具，帮助你快速开发基于ExtJS 的用户界面。</li>
<li>★  <strong><a href="http://www.lucidchart.com/" target="_blank">LucidChart</a></strong>，一款基于最新的html5技术的在线图表绘制软件，功能强大，速度快捷，运行此软件需要支持html5的浏览器。</li>
<li><a href="http://balsamiq.com/products/mockups" target="_blank"><strong>Balsamiq Mockups</strong></a>, 产品设计师绘制线框图或产品原型界面的利器。</li>
<li><a href="http://colorschemedesigner.com/" target="_blank"><strong>Color Scheme Designer</strong></a> 3 &#8211; 一个免费的线上调色工具</li>
<li>★ <a href="http://pixlr.com/editor/" target="_blank"><strong>Pixlr</strong></a>, 是一个来自瑞典基于Flash的免费在线图片处理网站。除了操作介面和功能接近Photoshop，还是多语言版本，支持简体中文。（以前<a title="在线作图编辑服务" href="https://coolshell.cn/articles/3244.html" target="_blank">酷壳介绍过</a>）</li>
<li><a href="http://www.aviary.com/" target="_blank"><strong>Aviary</strong></a>, 是一个基于HTML5 的在线图片处理工具，可以很容易的对图片进行后期处理。 <a href="http://developers.aviary.com/" target="_blank">Aviary API</a></li>
<li><strong><a href="http://www.degraeve.com/favicon/" target="_blank">Favicon Generator</a>, </strong>线上favicon(16&#215;16)制作工具。</li>
</ul>
<h4>代码资源和版本控制</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="github" src="http://www.b2bweb.fr/wp-content/uploads/github.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="https://github.com/" target="_blank"><strong>GitHub</strong></a> 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务。</li>
<li><a href="http://code.google.com/p/msysgit/" target="_blank"><strong>Git</strong></a> 是一个由Linus为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。其巨快无比，高效，采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。</li>
<li><a href="http://code.google.com/" target="_blank"><strong>Google Code</strong></a> 谷歌公司官方的开发者网站，包含各种开发技术的API、开发工具、以及开发技术参考资料。</li>
<li><strong><a href="http://code.google.com/intl/zh-CN/apis/libraries/" target="_blank">Google Libraries API</a></strong> Google 将优秀的 JavaScript 框架部署在其 CDN 上，在我们的网站上使用 Google Libraries API 可以加速 JavaScript 框架的加载速度。</li>
<li><a href="http://snipplr.com/" target="_blank"><strong>Snipplr</strong></a> 一个开放的源代码技巧分享社区，号称Code 2.0。和一般的源码分享网站不同，它针对的并不是大型网站源码，而是一些编程的代码技巧。</li>
</ul>
<h4>JavaScript 桌面应用框架</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="jqueryUI" src="http://www.b2bweb.fr/wp-content/uploads/jqueryUI.jpg" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://jquery.com/" target="_blank"><strong>jQuery</strong></a> 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。  <a href="https://github.com/jquery/jquery" target="_blank">源码</a>, <a href="http://api.jquery.com/" target="_blank">API</a>, <a href="http://api.jquery.com/browser/" target="_blank">API浏览</a>, <a href="http://interface.eyecon.ro/docs/animate" target="_blank">很不错的文档</a>.</li>
<li>★ 官方的 <a href="http://jqueryui.com/" target="_blank"><strong>jQuery User Interface (UI) library</strong></a> (演示和文档). <a href="https://github.com/jquery/jquery-ui%20" target="_blank">源码</a>,<a href="http://jqueryui.com/themeroller/" target="_blank">Themes Roller</a>, <a href="http://jqueryui.com/download" target="_blank">Download</a>.</li>
<li><a href="http://developer.yahoo.com/yui/2/" target="_blank"><strong>YUI 2</strong></a> — Yahoo! User Interface Library</li>
<li><a href="http://mootools.net/" target="_blank"><strong>Mootools</strong></a>, 一个超级轻量级的 web2.0 JavaScript framework</li>
<li><a href="http://www.prototypejs.org/" target="_blank"><strong>Prototype</strong></a> 提供面向对象的Javascript和AJAX</li>
<li><a href="http://dojotoolkit.org/" target="_blank"><strong>Dojo</strong></a> The Dojo Toolkit，一个强大的无法被打败的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。</li>
<li>★ <a href="http://dev.sencha.com/deploy/ext-4.0.0/docs/" target="_blank"><strong>Ext JS 4</strong></a>, 业内最强大的 JavaScript framework。</li>
<li><a href="http://phpjs.org/functions/index" target="_blank"><strong>PHP.js</strong></a>, 一个开源的JavaScript 库，它尝试在JavaScript 中实现PHP 函数。在你的项目中导入<em>PHP.JS</em> 库，可以在静态页面使用你喜欢的PHP 函数。</li>
</ul>
<h4>JavaScript 移动和触摸框架</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="senchatouch" src="http://www.b2bweb.fr/wp-content/uploads/senchatouch.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://jquerymobile.com/" target="_blank"><strong>jQuery Mobile</strong></a> : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。 <a href="https://github.com/jquery/jquery-mobile" target="_blank">Sources</a>.</li>
<li><a href="http://zeptojs.com/" target="_blank"><strong>Zepto.js</strong></a> Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 <a href="https://github.com/madrobby/zepto" target="_blank">Sources</a>.</li>
<li><a href="http://microjs.com/" target="_blank"><strong>MicroJS</strong></a> : Microjs网站应用列出了很多轻量的Javascript类库和框架，它们都很小，大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。</li>
<li>★ <a href="http://phonegap.com/" target="_blank"><strong>PhoneGap</strong></a> :是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 <a href="https://github.com/phonegap/phonegap" target="_blank">Sources</a>.</li>
<li>★ <a href="http://www.sencha.com/products/touch/" target="_blank"><strong>Sencha Touch</strong></a> Sencha Touch 是一个支持多种智能手机平台（iPhone, Android, 和BlackBerry）的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。</li>
<li><a href="http://jqtouch.com/" target="_blank"><strong>JQtouch</strong></a>, 是一个jQuery 的插件，主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。 <a href="http://github.com/senchalabs/jQTouch" target="_blank">Sources</a>.</li>
<li><a href="http://www.dhtmlx.com/touch/" target="_blank"><strong>DHTMLX Touch</strong></a> 针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。</li>
</ul>
<h4>jQuery 插件</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="flexiGrid" src="http://www.b2bweb.fr/wp-content/uploads/flexiGrid.jpg" alt="" width="600" height="238" /></p>
<ul>
<li><a href="http://imakewebthings.github.com/jquery-waypoints/" target="_blank"><strong>Waypoints</strong></a> 是一个jQuery 用来实现捕获各种滚动事件的插件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等等。支持主流浏览器版本。</li>
<li><strong><a href="http://plugins.jquery.com/project/lazy" target="_blank">Lazy loader</a> </strong>插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。</li>
<li><a href="https://github.com/gskinner/TweenJS" target="_blank"><strong>TweenJS</strong></a> : 一个简单和强大的 tweening / animation 的Javascript库。</li>
<li><a href="http://janne.aukia.com/easie/" target="_blank"> <strong>Easings</strong></a> 类Css3的jQuery 动画插件</li>
<li><a href="http://www.spritely.net/" target="_blank"><strong>Spritely</strong></a> 这个插件可以创建出如flash一样的动画效果，比如：在页面上有一只飞动的小鸟，一个动态滚动的背景等。</li>
<li><strong><a href="https://github.com/blueimp/jQuery-File-Upload/" target="_blank">File Upload</a>, </strong>jQuery 文件上传插件4.4.1</li>
<li><a href="http://www.agilecarousel.com/" target="_blank"><strong>Slideshow/Carousel</strong></a> 插件. <a href="https://github.com/edtalmadge/Agile-Carousel" target="_blank">Sources</a>.</li>
<li><a href="http://www.buildinternet.com/project/supersized/" target="_blank"><strong>Supersized</strong></a> – 全屏式的背景/幻灯片插件</li>
<li><a href="http://desandro.com/resources/jquery-masonry" target="_blank"><strong>Masonry</strong></a> i一款非常酷的自动排版插件，这款jQuery工具可以根据网格来自动排列水平和垂直元素，超越原来的css. <a href="https://github.com/desandro/masonry" target="_blank">Sources</a>.</li>
<li>jQuery 简单 <a href="http://layout.jquery-dev.net/demos.cfm" target="_blank"><strong>Layout</strong></a> 演示，管理各种边栏式，可改变大小式的布局。</li>
<li><a href="http://www.flexigrid.info/" target="_blank"><strong>Flexigrid</strong></a> – jQuery <a href="http://www.flexigrid.info/" target="_blank"><strong></strong></a>数据表插件</li>
<li><a href="http://isotope.metafizzy.co/" target="_blank"><strong>Isotope</strong></a>绝对是一个令人难以置信的<em>jQuery</em>插件，你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。</li>
<li><a href="http://www.evanbyrne.com/article/super-gestures-jquery-plugin" target="_blank"><strong>Super Gestures</strong></a> jQuery 插件可以实现鼠标手势的功能。</li>
<li><a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank"><strong>MouseWheel</strong></a> 是由Brandon Aaron开发的<em>jQuery</em>插件，用于添加跨浏览器的鼠标滚轮支持。</li>
<li><a href="http://code.drewwilson.com/entry/autosuggest-jquery-plugin" target="_blank"><strong>AutoSuggest</strong></a> jQuery 插件可以让你添加一些自动完成的功能。</li>
<li><a href="http://craigsworks.com/projects/qtip/" target="_blank"><strong>qTip</strong></a> 一个漂亮的<em>jQuery</em> 的工具提示插件，这个插件功能相当强大。</li>
<li>jQuery <a href="http://www.highcharts.com/demo/" target="_blank"><strong>Charts and graphic</strong></a> 用来制作图表。</li>
<li>jQuery Tools– The <a href="http://flowplayer.org/tools/demos/" target="_blank"><strong>missing UI library</strong></a></li>
</ul>
<h4>其它 jQuery 资源</h4>
<ul>
<li><a href="http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins" target="_blank">http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins</a></li>
<li><a href="http://webdesigneraid.com/weekly-html5-news-and-inspirations-%E2%80%93-tutorials-tools-resources-and-freebies-v-2/" target="_blank">http://webdesigneraid.com/weekly-html5-news-and-inspirations-%E2%80%93-tutorials-tools-resources-and-freebies-v-2/</a></li>
<li><a href="http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207" target="_blank">http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207</a></li>
<li><a href="http://www.julien-verkest.fr/22/11/2007/240-plugins-jquery" target="_blank">http://www.julien-verkest.fr/22/11/2007/240-plugins-jquery</a></li>
<li><a href="http://www.hotscripts.com/blog/10-great-html5-experiments-apps/" target="_blank">http://www.hotscripts.com/blog/10-great-html5-experiments-apps/</a></li>
<li><a href="http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html" target="_blank">http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html</a></li>
<li><a href="http://www.noupe.com/php/20-useful-php-jquery-tutorials.html" target="_blank">http://www.noupe.com/php/20-useful-php-jquery-tutorials.html</a></li>
<li><a href="http://aext.net/2010/04/excellent-jquery-plugins-resources-for-data-presentation-and-grid-layout/" target="_blank">http://aext.net/2010/04/excellent-jquery-plugins-resources-for-data-presentation-and-grid-layout/</a></li>
<li><a href="http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/" target="_blank">http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/</a></li>
<li><a href="http://gestureworks.com/features/open-source-gestures/" target="_blank">http://gestureworks.com/features/open-source-gestures/</a></li>
<li><a href="http://edtechdev.wordpress.com/2011/01/14/some-exciting-new-html5javascript-projects/" target="_blank">http://edtechdev.wordpress.com/2011/01/14/some-exciting-new-html5javascript-projects/</a></li>
<li><a href="http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/" target="_blank">http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/</a></li>
</ul>
<h4>HTML5 视频播放器</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="leanBackPlayer" src="http://www.b2bweb.fr/wp-content/uploads/leanBackPlayer.jpg" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="https://github.com/webmademovies/popcorn-js" target="_blank"><strong>Popcorn.js</strong></a> 是一个HTML5 Video框架，它提供了易于使用的API来同步交互式内容，让操作HTML5 Video元素的属性，方法和事件变得简单易用。 (来自Mozilla)</li>
<li><a href="http://dev.mennerich.name/showroom/html5_video/" target="_blank"><strong>LeanBack Player</strong></a> HTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放，音量控制，在同一个页面中播放多个视频。 (来自Google)</li>
<li><a href="http://m.vid.ly/user/" target="_blank"><strong>Vid.ly</strong></a> 为你上传的视频提供转换功能，并且为转换后的视频创建一个短网址。通过Vid.ly，让你的视频可以在14种不同的浏览器和设备上播放，不需要再去考虑将要浏览视频的人使用什么设备了，以避免各各软件巨头之间的利益之争带来了不兼容，给用户带来了巨大的困扰，短网址让你可以通过Twitter、Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB，免费帐户也没有播放或浏览限制。</li>
</ul>
<h4>JavaScript 音频处理与可视化效果</h4>
<p><img decoding="async" loading="lazy" title="soundmanager" src="http://www.b2bweb.fr/wp-content/uploads/soundmanager.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ 使用HTML5 和 Flash, <a href="http://www.schillmania.com/projects/soundmanager2/" target="_blank"><strong>SoundManager V2</strong></a> 只用单一API的提供了可靠，简单和强大的跨平台的音频处理。</li>
<li><a href="https://github.com/corbanbrook/dsp.js/" target="_blank"><strong>DSP</strong></a>, JavaScript的声音Digital Signal Processing</li>
<li>The Radiolab <a href="http://yoyodyne.cc/radiolab/" target="_blank"><strong>Hyper Audio Player</strong></a> v1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat</li>
<li><a href="http://jplayer.org/" target="_blank"><strong>jPlayer</strong></a>, 一个 jQuery HTML5 音频/ 视频库，功能齐全的API</li>
</ul>
<h4>JavaScript 图形 和 3D</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="processing" src="http://www.b2bweb.fr/wp-content/uploads/processing.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://processingjs.org/" target="_blank"><strong>Processing.js</strong></a>是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。</li>
<li>★ Javascript 3D 引擎: <a href="https://github.com/mrdoob/three.js" target="_blank"><strong>ThreeJS</strong></a> 由 Mr Doob 开发，一个轻量级的 3D 引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用&lt;canvas&gt;, &lt;svg&gt; 和 WebGL.</li>
<li><a href="http://www.iquilezles.org/apps/shadertoy/" target="_blank"><strong>Shader Toy</strong></a>, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.</li>
<li><a href="http://senchalabs.github.com/philogl/" target="_blank"><strong>PhiloGL</strong></a>, Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构建WebGL应用。Sencha创建了几个演示，来描述框架交互式3D虚拟化的能力，比如<a href="http://senchalabs.github.com/philogl/PhiloGL/examples/temperatureAnomalies/">3D view of global temperature changes</a>。</li>
<li><a href="http://benvanik.github.com/WebGL-Inspector/" target="_blank"><strong>WebGL Inspector</strong></a> 你就Firebug等Web调试工具一样，这个是 WebGL的调试工具。</li>
<li><a href="http://www.khronos.org/webgl/wiki_1_15/" target="_blank"><strong>WebGL frameworks</strong></a> 由 Khronos Group 收集的一个WebGL框架列表。</li>
<li><a href="http://easeljs.com/" target="_blank"><strong>EaselJS</strong></a>, 一个使用html5的canvas的 JavaScript 库. <a href="https://github.com/gskinner/EaselJS" target="_blank">Sources</a>.</li>
<li><a href="http://www.webresourcesdepot.com/free-javascript-game-frameworks-to-create-a-web-based-fun/" target="_blank"><strong>JavaScript Game Frameworks</strong></a> 免费的JS游戏框架列表。另，可参看 <a title="JS游戏引擎列表" href="https://coolshell.cn/articles/3516.html" target="_blank">JS游戏框架列表</a>。</li>
<li><a href="http://raphaeljs.com/" target="_blank"><strong>Raphaël</strong></a>是一个小型的JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看<a title="Javascript向量图Lib–Raphaël" href="https://coolshell.cn/articles/3107.html" target="_blank">Javascript向量图Lib–Raphaël</a></li>
<li><a href="http://keith-wood.name/svgRef.html" target="_blank"><strong>jQuery SVG</strong></a> 插件让你可以了 SVG canvas 进行交互。</li>
<li><a href="http://code.google.com/intl/fr/apis/chart/" target="_blank"><strong>Google chart tools</strong></a> &#8211;  参看本站的<a href="https://coolshell.cn/articles/582.html" target="_blank">使用Google API做统计图</a></li>
<li><a href="https://coolshell.cn/articles/582.html" target="_blank"></a><a href="http://arborjs.org/" target="_blank"><strong>Arbor.js</strong></a>, 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。</li>
</ul>
<h4>JavaScript 浏览器接口 (HTML5)</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="amplify" src="http://www.b2bweb.fr/wp-content/uploads/amplify.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://www.modernizr.com/" target="_blank"><strong>Modernizr</strong></a> – 是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.<a href="https://github.com/Modernizr/Modernizr" target="_blank">Sources</a>. 一个有用的列表 <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills" target="_blank">cross-browser Polyfills</a></li>
<li><a href="http://code.google.com/p/html5shiv/" target="_blank"><strong>HTML5Shiv</strong></a> : 该项目的目的是为了让IE 能识别HTML5 的元素。</li>
<li><a href="https://github.com/remy/polyfills" target="_blank"><strong>Polyfills</strong></a> : 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。</li>
<li><a href="http://yepnopejs.com/" target="_blank"><strong>YepNopeJS</strong></a> : 一个异步的条件式的加载器。<a href="https://github.com/SlexAxton/yepnope.js" target="_blank">Sources</a>.</li>
<li>jQuery <a href="https://github.com/codler/jQuery-Css3-Finalize/" target="_blank"><strong>CSS3 Finalise</strong></a> : 是否厌倦了为每一个浏览器的CSS3属性加前缀？</li>
<li>★ <a href="http://amplifyjs.com/" target="_blank"><strong>Amplify.js</strong></a> :一套用于web应用数据管理和应用程序通讯的<strong> jQuery 组件库</strong>。提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用localStorage 和 sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify&#8217;为jQuery的ajax方法request增加了一些额外的特性。 <a href="https://github.com/appendto/amplify" target="_blank">Sources</a>.</li>
<li><a href="https://github.com/balupton/history.js" target="_blank"><strong>History.js</strong></a> 优美地支持了HTML5 History/State APIs</li>
<li><a href="http://socket.io/" target="_blank"><strong>Socket.IO</strong></a> Web的socket编程。</li>
</ul>
<h4>JavaScript 工具</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="headJs" src="http://www.b2bweb.fr/wp-content/uploads/headJs.png" alt="" width="600" height="238" /></p>
<ul>
<li>★  {{<a href="http://mustache.github.com/" target="_blank"><strong>mustaches</strong></a>}} 小型的 JavaScript 模板引擎。</li>
<li><a href="http://jsonselect.org/" target="_blank"><strong>json:select()</strong></a>, CSS式的JSON选择器</li>
<li><a href="http://headjs.com/" target="_blank"><strong>HeadJS</strong></a>, 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。</li>
<li><a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank"><strong>JsDoc Toolkit</strong></a>是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。</li>
<li><a href="https://github.com/filamentgroup/Responsive-Images" target="_blank"><strong>Responsive image</strong></a>, 一个试验性的项目，用来处理<a href="http://www.alistapart.com/articles/responsive-web-design/">responsive layouts</a> 式的图片。</li>
<li><a href="http://marijnhaverbeke.nl/uglifyjs" target="_blank"><strong>UglifyJS</strong></a>是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。</li>
<li><a href="http://www.dhteumeuleu.com/" target="_blank"><strong>Dhteumeuleu</strong></a>, 交互式的 DOM 脚本和DHTML 的开源演示。</li>
<li><a href="https://github.com/documentcloud/backbone/" target="_blank"><strong>Backbone</strong></a>是一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。</li>
</ul>
<h4>客户端和模拟器</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="firebug" src="http://www.b2bweb.fr/wp-content/uploads/firebug.png" alt="" width="600" height="238" /></p>
<ul>
<li><a href="http://browsershots.org/" target="_blank"><strong>BrowserShot</strong></a>, 检查浏览器的兼容性，跨浏览器平器的测试</li>
<li><strong><a href="http://tester.jonasjohn.de/" target="_blank">Test everything</a></strong>… 输入一个你想要测试的URL……</li>
<li><a href="http://tmobile.modeaondemand.com/htc/g1/" target="_blank"><strong>Android browser</strong></a> 模拟器</li>
<li><a href="http://iphonetester.com/" target="_blank"><strong>iPhone browser</strong></a> 模拟器</li>
<li><a href="http://www.opera.com/mobile/demo/" target="_blank"><strong>Opera browser</strong></a> 模拟器</li>
<li>★ <a href="http://getfirebug.com/whatisfirebug" target="_blank"><strong>Firebug</strong></a> 与 <strong><a href="http://www.mozilla.com/fr/firefox/" target="_blank">Firefox</a></strong> 集成，可以查看和调试你的Web页面。</li>
</ul>
<h3>CSS3 和 字库</h3>
<p><img decoding="async" loading="lazy" class="aligncenter" title="patternTap" src="http://www.b2bweb.fr/wp-content/uploads/patternTap.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://www.css3maker.com/" target="_blank"><strong>CSS3 Maker</strong></a> CCS3的生成器</li>
<li>容易地创建 <strong><a href="http://www.sencha.com/products/animator/" target="_blank">CSS3 animations</a>。</strong> Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。</li>
<li><a href="http://csswarp.eleqtriq.com/" target="_blank"><strong>CSSwarp</strong></a> – CSS 文本扭曲生成器</li>
<li><a href="http://www.colorzilla.com/gradient-editor/" target="_blank"><strong>Gradient Editor</strong></a>, 一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla</li>
<li>★ <a href="http://www.google.com/webfonts" target="_blank"><strong>Google Web Fonts</strong></a> 通过Google Web Fonts API 可以浏览所有的字体</li>
<li><a href="http://www.fontsquirrel.com/fontface/generator" target="_blank"><strong>@font-face Kit Generator</strong></a>, 为Web转换字体</li>
<li><a href="http://www.typetester.org/" target="_blank"><strong>Typetester</strong></a>, 比较字体。</li>
<li><a href="http://mediaqueri.es/" target="_blank"><strong>Media Queries</strong></a>. 一组 responsive web 设计。</li>
<li><a href="http://patterntap.com/" target="_blank"><strong>Pattern TAP</strong></a>, UI组件。</li>
</ul>
<h4>Website (FULL) 模板</h4>
<p><img decoding="async" loading="lazy" class="aligncenter" title="boilerplate" src="http://www.b2bweb.fr/wp-content/uploads/boilerplate1.png" alt="" width="600" height="238" /></p>
<ul>
<li>★ <a href="http://html5boilerplate.com/" target="_blank"><strong>HTML5 Boilerplate</strong></a> 是一个<a href="http://www.mhtml5.com/">HTML5 </a>/ CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 <a href="https://github.com/paulirish/html5-boilerplate" target="_blank">Sources</a>.</li>
<li><a href="http://sickdesigner.com/resources/HTML5-starter-pack/" target="_blank"><strong>HTML5 starter pack</strong></a> 是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。</li>
<li>★ <a href="http://initializr.com/" target="_blank"><strong>Initializr</strong></a> 是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。</li>
<li><a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank"><strong>Animated Portfolio Gallery</strong></a> （<a href="http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/" target="_blank">教程</a>）</li>
<li> <a href="http://tutorialzine.com/2010/07/making-slick-mobileapp-website-jquery-css/" target="_blank"><strong>Slick MobileApp Website</strong></a> 如果通过 jQuery 和 CSS 制作一个手机应用的网站。</li>
<li> <a href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/" target="_blank"><strong>RSS Reader</strong></a> 如果通过 jQuery Mobile 创建一个RSS Reader</li>
<li>★ <a href="http://addyosmani.com/blog/building-spas-jquerys-best-friends/" target="_blank"><strong>Single Page Applications</strong></a> 使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。</li>
<li><a href="http://code.google.com/p/gtv-resources/" target="_blank"><strong>Google TV Optimized Templates</strong></a>, 传统电视已经开始和网路融合，但现阶段产业仍然正在摸索之中，为此将来的网页亦会有结构上的改变。<a href="http://code.google.com/p/gtv-resources/">Google TV Optimized Templates</a>是一个用HTML/JavaScript制成的开源软体，一如其名是一个对Google TV作出了最佳化的的网页范本，其特色是以遥控器作为操作的前提，令使用者无需输入任何文字就可以进行控制。未来除了会有专用遥控器外，还会采用智能手机透过W-iFi控制Google TV的方法。Optimized Templates的界面中左方会展示分类，右方会显示该分类下的影片截图，影片播放、切换、全画面表示都可透过键盘上的方向键、Backspace或Enter等键完成，方便今后的网站开发人员借镜。HTML5 版的模板使用了 <a href="http://code.google.com/p/gtv-ui-lib" target="_blank">Google TV UI library</a>, jQuery  和 Closure 。</li>
</ul>
<p>（全文完）<!--



<p align="center"><a href= target=_blank><img decoding="async" src=""></a></p>





<p align="center"><img decoding="async" src="https://coolshell.cn/wp-content/uploads/2020/03/coolshell.weixin.jpg"> <img decoding="async" loading="lazy" src="https://coolshell.cn/wp-content/uploads/2020/03/coolshell.mini_.jpg" width="300" height="300"> <br />关注CoolShell微信公众账号和微信小程序</p>

 

--></p>
<div style="margin-top: 15px; font-size: 16px;color: #cc0000;">
<p align="center"><strong>（转载本站文章请注明作者和出处 <a href="https://coolshell.cn/">酷 壳 &#8211; CoolShell</a> ，请勿用于任何商业用途）</strong></p>
</div>

<div class="wp_rp_wrap  wp_rp_vertical_m" id="wp_rp_first"><div class="wp_rp_content"><h3 class="related_post_title">相关文章</h3><ul class="related_post wp_rp"><li ><a href="https://coolshell.cn/articles/3684.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2011/02/1128-150x150.jpg" alt="Web开发人员速查卡" width="150" height="150" /></a><a href="https://coolshell.cn/articles/3684.html" class="wp_rp_title">Web开发人员速查卡</a></li><li ><a href="https://coolshell.cn/articles/9666.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2013/05/Render-Process-150x150.jpg" alt="浏览器的渲染原理简介" width="150" height="150" /></a><a href="https://coolshell.cn/articles/9666.html" class="wp_rp_title">浏览器的渲染原理简介</a></li><li ><a href="https://coolshell.cn/articles/5537.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2011/11/stackparts.com_-150x150.png" alt="一些文章资源和趣闻" width="150" height="150" /></a><a href="https://coolshell.cn/articles/5537.html" class="wp_rp_title">一些文章资源和趣闻</a></li><li ><a href="https://coolshell.cn/articles/5224.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2011/09/image008-150x150.jpg" alt="一些文章和各种资源" width="150" height="150" /></a><a href="https://coolshell.cn/articles/5224.html" class="wp_rp_title">一些文章和各种资源</a></li><li ><a href="https://coolshell.cn/articles/3903.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/14.jpg" alt="一些有意思的贴子和工具" width="150" height="150" /></a><a href="https://coolshell.cn/articles/3903.html" class="wp_rp_title">一些有意思的贴子和工具</a></li><li ><a href="https://coolshell.cn/articles/1949.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/16.jpg" alt="Web中的省略号" width="150" height="150" /></a><a href="https://coolshell.cn/articles/1949.html" class="wp_rp_title">Web中的省略号</a></li></ul></div></div>The post <a href="https://coolshell.cn/articles/4795.html">开源中最好的Web开发的资源</a> first appeared on <a href="https://coolshell.cn">酷 壳 - CoolShell</a>.]]></content:encoded>
					
					<wfw:commentRss>https://coolshell.cn/articles/4795.html/feed</wfw:commentRss>
			<slash:comments>124</slash:comments>
		
		
			</item>
		<item>
		<title>一些有意思的贴子和工具</title>
		<link>https://coolshell.cn/articles/3903.html</link>
					<comments>https://coolshell.cn/articles/3903.html#comments</comments>
		
		<dc:creator><![CDATA[陈皓]]></dc:creator>
		<pubDate>Fri, 04 Mar 2011 00:25:39 +0000</pubDate>
				<category><![CDATA[杂项资源]]></category>
		<category><![CDATA[Algorithm]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[ebook]]></category>
		<category><![CDATA[Game]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Web]]></category>
		<guid isPermaLink="false">http://coolshell.cn/?p=3903</guid>

					<description><![CDATA[<p>又到了介绍各种杂项的时候了，正如以前的这三篇（这篇，这篇，和这篇）文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。 先说找工作吧，电影《...</p>
<p class="read-more"><a class="btn btn-default" href="https://coolshell.cn/articles/3903.html"> Read More<span class="screen-reader-text">  Read More</span></a></p>
The post <a href="https://coolshell.cn/articles/3903.html">一些有意思的贴子和工具</a> first appeared on <a href="https://coolshell.cn">酷 壳 - CoolShell</a>.]]></description>
										<content:encoded><![CDATA[<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415450859608158"
     crossorigin="anonymous"></script>又到了介绍各种杂项的时候了，正如以前的这三篇（<a title="一些非常有意思的杂项资源" href="https://coolshell.cn/articles/3013.html" target="_blank">这篇</a>，<a title="一些杂项资源" href="https://coolshell.cn/articles/3437.html" target="_blank">这篇</a>，和<a title="一些有意思的网站和贴子" href="https://coolshell.cn/articles/3480.html" target="_blank">这篇</a>）文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。</p>
<p>先说找工作吧，电影《<a title="社交网络（豆瓣）" href="http://movie.douban.com/subject/3205624/" target="_blank">该页无法显示</a>》里的那个<a href="http://www.facebook.com" target="_blank">facebook</a>主页上的<strong><a title="FaceBook的招聘题" href="http://www.facebook.com/careers/puzzles.php" target="_blank">招聘网页</a></strong>上是列了一堆问题，你可以去看看，你可以使用c/c++，Erlang，Haskell，Java，Perl，Python，PHP，Ruby来解题，不过只接受Unix/Linux下的版本， 不接受Windows的版本。无独有偶，<a href="http://www.dropbox.com/" target="_blank">DropBox</a>的<strong><a title="DropBox的招聘题 " href="http://www.dropbox.com/jobs/challenges" target="_blank">招聘网页</a></strong>上也是些算法题，大家可以过去看看，不过需要翻墙。（现在，对于美国互联网企业来说，如果你没有被<a title="中国的C2C模式" href="https://coolshell.cn/articles/3820.html" target="_blank">C2C</a>，说明你根本不存在，如果你没有被墙，说明你还不算成功）</p>
<p>接下来给大家介绍一些文档和教程吧，都是英文的。</p>
<ul>
<li><strong><a href="http://www.harding.edu/fmccown/java_csharp_comparison.html" target="_blank">Java和C#的完整比较</a></strong>。这是一个相当完整的比较Java和C#语言的网页。很有意思，有助于你了解Java和C#的各种特性和不同。</li>
</ul>
<ul>
<li><strong><a href="http://use-the-index-luke.com/" target="_blank">SQL 性能调优</a></strong>。这个文档覆盖了<em>IBM DB2</em>, <em>MySQL</em>, <em>Oracle</em>,<em>PostgreSQL</em> 和 <em>Microsoft SQL Server</em>。不过这个电子书还没有写完，你可以使用其<a href="http://use-the-index-luke.com/blog/feed" target="_blank">RSS</a>, <a href="http://twitter.com/MarkusWinand">twitter</a> 或 <a title="Like on Facebook" href="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Use-The-Index-Luke/157726730906717?ref%3Dts&amp;layout=standard&amp;show_faces=true&amp;width=250&amp;action=like&amp;colorscheme=light&amp;height=80">Facebook</a> 来跟踪其进度。</li>
</ul>
<ul>
<li><strong><a href="http://www.cleveralgorithms.com/" target="_blank">Clever Algorithms</a></strong>。这个电子书也是免费的。其主要面向一些AI和面向自然的算法，一共45个。其包括概率随机算法，迭代进化算法，物理算法，可能性算法，蚂蚁蜜蜂式算法，免疫算法，神经算法等。里面大量的高等数学公式对我来说我已经看不懂了。不过，我相信这个电子书非常适合搞理论研究的人，或是需要抄袭一篇论文以顺利毕业的人使用。</li>
</ul>
<ul>
<li><strong><a href="http://blog.gingertech.net/wp-content/uploads/2011/01/LCA_MM_AVProc2011/#slide1" target="_blank">HTML5 Audio &amp; Video 处理</a></strong>。这是一组在线的幻灯片，请使用键盘光标键翻页。这是一组带着各种演示的幻灯片，对于你要学习HTML5的声音和视频相关的知识很有帮助。</li>
</ul>
<ul>
<li><strong><a href="http://www.mikeash.com/pyblog/friday-qa-2010-12-31-c-macro-tips-and-tricks.html" target="_blank">C 语言的宏</a></strong>。你想知道C语的宏有哪些有些意思的用法吗？这篇文档不会让你失望的。其由浅入深地向你介绍了宏的各种用法。</li>
</ul>
<ul>
<li><strong><a href="http://stringoftheseus.com/blog/2011/01/10/api-sorting-algorithms/" target="_blank">各种语言的排序算法</a></strong>。你想知道各种语言其默认的排序算法用的是<a title="一个排序算法比较的网站" href="https://coolshell.cn/articles/399.html" target="_blank">哪种排序算法</a>吗？看看这篇文章吧。</li>
</ul>
<ul>
<li><strong><a href="http://fixplz.blourp.com/blog/=phys" target="_blank">物理模拟F#教程</a></strong>。相信你一定玩过那种游戏，画一个任意形状的石头，其会从天上落下以砸下面的一个东西，这个教程用.NET的F#向大家说明了这种东西怎么去做。（<a href="http://fixplz.blourp.com/blog/img/fsphys.rar" target="_blank">演示程序</a>）</li>
</ul>
<p><span id="more-3903"></span></p>
<ul>
<li><strong><a href="http://www.helixsoft.nl/articles/circle/sincos.htm" target="_blank">Sin &amp; Cos游戏教程</a></strong>。这篇文章向你介绍了一些游戏编程的技术。</li>
</ul>
<ul>
<li><strong><a href="http://damienradtke.org/unofficial-introduction-to-gnome-application-dev/" target="_blank">GNOME开发介绍</a></strong>。这是一个非官方的介绍GNOME应用开发的教程，简单清楚，很适合初学者。</li>
</ul>
<ul>
<li><strong><a href="http://www.korokithakis.net/tutorials/python" target="_blank">10分钟学会Python</a></strong>。是的，也许你和我一样，很恨这样几天就学好一门语言的书，比如：<a title="“21天教你学会C++”" href="https://coolshell.cn/articles/2250.html" target="_blank">21天学好C++</a>。这个更夸张，10分钟。TNND。不过，当我看了一下后，我觉得其很适合初学者对Python有一个感性的认识。</li>
</ul>
<ul>
<li><strong><a href="http://nicolasgallagher.com/css-drop-shadows-without-images/" target="_blank">CSS阴影教程</a></strong>。这是一篇教你种CSS做出种式样式的阴影效果的教程，这里是<a href="http://nicolasgallagher.com/css-drop-shadows-without-images/demo/" target="_blank">演示</a>。</li>
</ul>
<ul>
<li><strong><a href="http://gergo.erdi.hu/blog/2011-02-13-developing_iphone_applications_in_haskell___a_tutorial/" target="_blank">用Haskell开发iPhone应用</a></strong>。这是一个教程序，告诉你如何用Haskell开发iOS的应用程序。</li>
</ul>
<p>下面，再让我给你介绍一些和Web开发相关的开源的库。</p>
<ul>
<li><strong><a href="http://www.photon-project.com/" target="_blank">Photon</a></strong>。这是一个号称高性能的轻量级的PHP应用服务器框架。号称比Zend，Symfony和mod_php快3-10倍。</li>
</ul>
<ul>
<li><strong><a href="http://web.chemdoodle.com/" target="_blank">ChemDoodle</a></strong>。这是一个用来画一些化学分子式的基于HTML5的类库和API，支持2D/3D，很强大。兼容于所有产商的支持HTML5的浏览器。</li>
</ul>
<ul>
<li><strong><a href="http://www.limejs.com/" target="_blank">LimeJS</a></strong>。这个JS库可以让你方便得制作一些触摸屏的小游戏。<a href="http://www.limejs.com/static/roundball/index.html" target="_blank">演示一</a>，<a href="http://www.limejs.com/static/zlizer/index.html" target="_blank">演示二</a>。（<a title="JS游戏引擎列表" href="https://coolshell.cn/articles/3516.html" target="_blank">一些游戏相关的JS</a>）</li>
</ul>
<ul>
<li><strong><a href="https://github.com/ruidlopes/spellcheckthejs" target="_blank">拼写检查</a></strong>。这是一个英文拼写检查的JS。</li>
</ul>
<ul>
<li><strong><a href="http://www.clips.ua.ac.be/pages/pattern" target="_blank">Pattern</a></strong>。这是东东很强大，用于做Web挖掘，其有一组工具用来从Google, Twitter, Wikipedia，Web爬虫，HTML上获得数据，并进行文本分析和数据图形化显示。你可以上这里看看<a href="http://www.clips.ua.ac.be/demos" target="_blank">相关演示</a>。</li>
</ul>
<ul>
<li><strong><a href="http://www.appcelerator.com/products/titanium-mobile-application-development/">Titanium Mobile</a></strong>。你想让你的代码同时支持iPhone和Android吗？这是一个跨平台的开发工具。这里有<a href="http://agiliq.com/blog/2011/02/iphoneandroid-application-development-using-titani/" target="_blank">一个教程</a>。</li>
</ul>
<ul>
<li><strong><a href="http://css3buttons.michaelhenriksen.dk/" target="_blank">CSS3的按钮</a></strong>。这里可以去下载一个CSS3的库，里面有N多的按钮风格，感觉都很酷。</li>
</ul>
<p>接下来，介绍一些小工具。</p>
<ul>
<li><strong><a href="http://caniuse.com/" target="_blank">Web兼容性表</a></strong>。你想看看各种浏览器对HTML5，CSS3，SVG的支持吗？这个网站可以让你看到所有的主流浏览器的兼容表。</li>
</ul>
<ul>
<li><strong><a href="http://www.qgrep.com/" target="_blank">qgrep</a></strong>。嫌grep不够快吗？试试qgrep吧，支持OSX,  Linux 和 Windows。</li>
</ul>
<ul>
<li><strong><a href="http://www.cam.hi-ho.ne.jp/oishi/indexen.html" target="_blank">XKeymacs</a></strong>。你有Emacs情结吗？如果有的话，试试这个工具吧，在windows里到处c-x c-c, c-x c-s, c-p, c-n什么什么的。挺有意思的。好吧，不是有意思，是BT。</li>
</ul>
<ul>
<li><strong><a href="http://www.sublimetext.com/blog/articles/sublime-text-2-public-alpha" target="_blank">Sublime Text 2</a></strong>。虽然目前只是Alpha版本，但是这个看上去真的很不错。尤其是用来查看代码。支持Windows, Linux和OSX。</li>
</ul>
<ul>
<li><strong><a href="http://code.google.com/p/vs-android/" target="_blank">VS-Android</a></strong>。这个项目让你可以在Visual Studio 2010的IDE下开发Android NDK C/C++的程序。</li>
</ul>
<p>其它东西。</p>
<ul>
<li><strong><a href="http://rigaux.org/language-study/scripting-language/" target="_blank">脚本语言排名</a></strong>。这个网页不但对所有的脚本语言进行了排名，还对一些操作进行了比较。</li>
</ul>
<ul>
<li>HTML5的3D演示，这里有几个HTML5的3D演示，你可以看看，<a title="sketch/" href="http://hakim.se/experiments/html5/sketch/#1966de71" target="_blank">演示一</a>，<a title="蛋白质分子式" href="http://jolecule.appspot.com/pdb/1mbo#view:4mfct8" target="_blank">演示二</a>，<a title="立方体" href="http://dl.dropbox.com/u/59304/labs/cubeStable.html" target="_blank">演示三</a>，<a title="坦克游戏" href="http://dl.dropbox.com/u/59304/labs/tankGame.html" target="_blank">演示四</a>。</li>
</ul>
<ul>
<li>说到Web上的3D，你可能需要看看Adobe的<a title="Molehill APIs" href="http://labs.adobe.com/technologies/flashplatformruntimes/incubator/features/molehill.html" target="_blank">Molehill (3D GPU accelerated) APIs</a>，这里有一篇<a href="http://www.bytearray.org/?p=2810" target="_blank">介绍文章</a>。</li>
</ul>
<ul>
<li>还记得那个<a title="流体力学的演示" href="https://coolshell.cn/articles/3421.html" target="_blank">流体力学的演示</a>吗？现在有人把其做到了<a href="http://www.infi.nl/blog/view/id/98/Liquid_on_iPhone_and_iPad" target="_blank">iPhone/iPad上</a>。</li>
</ul>
<p>就这么多吧，也许没什么意思，那也请你见谅了。</p>
<p>（全文完）<!--



<p align="center"><a href= target=_blank><img decoding="async" src=""></a></p>





<p align="center"><img decoding="async" src="https://coolshell.cn/wp-content/uploads/2020/03/coolshell.weixin.jpg"> <img decoding="async" loading="lazy" src="https://coolshell.cn/wp-content/uploads/2020/03/coolshell.mini_.jpg" width="300" height="300"> <br />关注CoolShell微信公众账号和微信小程序</p>

 

--></p>
<div style="margin-top: 15px; font-size: 16px;color: #cc0000;">
<p align="center"><strong>（转载本站文章请注明作者和出处 <a href="https://coolshell.cn/">酷 壳 &#8211; CoolShell</a> ，请勿用于任何商业用途）</strong></p>
</div>

<div class="wp_rp_wrap  wp_rp_vertical_m" ><div class="wp_rp_content"><h3 class="related_post_title">相关文章</h3><ul class="related_post wp_rp"><li ><a href="https://coolshell.cn/articles/3013.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2010/09/biolab-150x150.jpg" alt="一些非常有意思的杂项资源" width="150" height="150" /></a><a href="https://coolshell.cn/articles/3013.html" class="wp_rp_title">一些非常有意思的杂项资源</a></li><li ><a href="https://coolshell.cn/articles/9666.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2013/05/Render-Process-150x150.jpg" alt="浏览器的渲染原理简介" width="150" height="150" /></a><a href="https://coolshell.cn/articles/9666.html" class="wp_rp_title">浏览器的渲染原理简介</a></li><li ><a href="https://coolshell.cn/articles/6840.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2012/03/css-layouts-150x150.gif" alt="CSS 布局:40个教程、技巧、例子和最佳实践" width="150" height="150" /></a><a href="https://coolshell.cn/articles/6840.html" class="wp_rp_title">CSS 布局:40个教程、技巧、例子和最佳实践</a></li><li ><a href="https://coolshell.cn/articles/5537.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2011/11/stackparts.com_-150x150.png" alt="一些文章资源和趣闻" width="150" height="150" /></a><a href="https://coolshell.cn/articles/5537.html" class="wp_rp_title">一些文章资源和趣闻</a></li><li ><a href="https://coolshell.cn/articles/4795.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/7.jpg" alt="开源中最好的Web开发的资源" width="150" height="150" /></a><a href="https://coolshell.cn/articles/4795.html" class="wp_rp_title">开源中最好的Web开发的资源</a></li><li ><a href="https://coolshell.cn/articles/3684.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2011/02/1128-150x150.jpg" alt="Web开发人员速查卡" width="150" height="150" /></a><a href="https://coolshell.cn/articles/3684.html" class="wp_rp_title">Web开发人员速查卡</a></li></ul></div></div>The post <a href="https://coolshell.cn/articles/3903.html">一些有意思的贴子和工具</a> first appeared on <a href="https://coolshell.cn">酷 壳 - CoolShell</a>.]]></content:encoded>
					
					<wfw:commentRss>https://coolshell.cn/articles/3903.html/feed</wfw:commentRss>
			<slash:comments>24</slash:comments>
		
		
			</item>
		<item>
		<title>十个Web开发文章和教程</title>
		<link>https://coolshell.cn/articles/1387.html</link>
					<comments>https://coolshell.cn/articles/1387.html#respond</comments>
		
		<dc:creator><![CDATA[陈皓]]></dc:creator>
		<pubDate>Mon, 31 Aug 2009 09:18:41 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[技术读物]]></category>
		<category><![CDATA[杂项资源]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[正则表达式]]></category>
		<guid isPermaLink="false">http://coolshell.cn/?p=1387</guid>

					<description><![CDATA[<p>下面是十个在2009年8月份里出现的十个非常不错的Web开发方面的文章和教程。推荐给大家，当然，都是英文啦。如果你愿意，欢迎翻译后提交给酷壳。 1）一个简单的L...</p>
<p class="read-more"><a class="btn btn-default" href="https://coolshell.cn/articles/1387.html"> Read More<span class="screen-reader-text">  Read More</span></a></p>
The post <a href="https://coolshell.cn/articles/1387.html">十个Web开发文章和教程</a> first appeared on <a href="https://coolshell.cn">酷 壳 - CoolShell</a>.]]></description>
										<content:encoded><![CDATA[<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415450859608158"
     crossorigin="anonymous"></script>下面是十个在2009年8月份里出现的十个非常不错的Web开发方面的文章和教程。推荐给大家，当然，都是英文啦。如果你愿意，欢迎翻译后提交给<a href="https://coolshell.cn" target="_blank">酷壳</a>。</p>
<p>1）<a href="http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery" target="_blank">一个简单的Lava 灯式的菜单</a>（使用jQuery完成）</p>
<p>2）<a href="http://www.jankoatwarpspeed.com/post/2009/08/20/Table-of-contents-using-jQuery.aspx" target="_blank">使用jQuery自动生成文章内容的目录</a>。就像是使用Word一样，设置一下标题，然后可以自动生成文章的目录。</p>
<p>3）<a href="http://www.queness.com/post/484/create-a-thumbnail-gallery-with-slick-heading-and-caption-effect-with-jquery" target="_blank">使用jQuery为图片创建图片标题和描述</a>。这是一个超Cool的效果，当你的鼠标移到图片上的时候，图片的上下会出现遮覆，上面是标题，下面是描述，相当不错的用户体验，当鼠标移开后，遮覆消失。</p>
<p><span id="more-1387"></span></p>
<p>4）<a href="http://net.tutsplus.com/videos/screencasts/a-crash-course-in-advanced-css3-effects/" target="_blank">CSS3速成教程</a>。主要讨论了CSS3的这些特性：旋转和改变大小，动画，Photoshop风格的遮罩，图片倒影，色彩渐变，转换等。有一个不错的flash视频。</p>
<p>5）<a href="http://www.hongkiat.com/blog/30-new-useful-wordpress-tricks-hacks/" target="_blank">30+相当有用的Wordpress的巧门</a>。相当相当不错的一些和Wordpress相关的插件和小巧门，非常非常地实用。</p>
<p>6）<a href="http://www.noupe.com/php/htaccess-techniques.html" target="_blank">htaccess技术的权威性指南</a>。本文给出了12个非常有用的apache的设置，可以让你更容易设置你的站点，在这篇文章的最后，还列出了一些经验上的东西。另外，你可以参考本站的《<a rel="bookmark" href="https://coolshell.cn/articles/1035.html">16个简单实用的.htaccess小贴示</a>》。</p>
<p>7）<a href="http://www.noupe.com/php/php-regular-expressions.html" target="_blank">PHP正则表达式入门</a>。一个相当不错的入门教程，写得简单易懂。</p>
<p>8）<a href="http://net.tutsplus.com/tutorials/other/8-regular-expressions-you-should-know/" target="_blank">你需要知道的8个正则表达式</a>。正则表达式很有用，但是它具体用在什么地方呢？这篇文章给你了一票非常实用的示例。相当的不错。浏览这篇文章时别忘了看一下大家的回复，那里面也有很多不错的资源。</p>
<p>9）<a href="http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/" target="_blank">20个可以改进表单的jQuery插件</a>。都是相当实用的插件，可以让你的Web表单相当的成熟和有很好的用户体验。</p>
<p>10）<a href="http://css-tricks.com/inapproprite-uses/" target="_blank">数据库，HTML，CSS，JS不适应的用法</a>。很不错的文章，你需要记住下面的这个表格。</p>
<div style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; OVERFLOW: hidden; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid">
<div style="display: block; float: left; width: 200px; text-align: right;">Database</div>
<div><em style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0pt; PADDING-TOP: 0pt">is for</em>content</div>
</div>
<div style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; OVERFLOW: hidden; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid">
<div style="display: block; float: left; width: 200px; text-align: right;">HTML</div>
<div><em style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0pt; PADDING-TOP: 0pt">is for</em>describing and displaying content</div>
</div>
<div style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; OVERFLOW: hidden; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid">
<div style="display: block; float: left; width: 200px; text-align: right;">CSS</div>
<div><em style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0pt; PADDING-TOP: 0pt">is for</em>design</div>
</div>
<div style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; OVERFLOW: hidden; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid">
<div style="display: block; float: left; width: 200px; text-align: right;">JavaScript</div>
<div><em style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0pt; PADDING-TOP: 0pt">is for</em>functionality</div>
</div>
<p>（全文完）<!--



<p align="center"><a href= target=_blank><img decoding="async" src=""></a></p>





<p align="center"><img decoding="async" src="https://coolshell.cn/wp-content/uploads/2020/03/coolshell.weixin.jpg"> <img decoding="async" loading="lazy" src="https://coolshell.cn/wp-content/uploads/2020/03/coolshell.mini_.jpg" width="300" height="300"> <br />关注CoolShell微信公众账号和微信小程序</p>

 

--></p>
<div style="margin-top: 15px; font-size: 16px;color: #cc0000;">
<p align="center"><strong>（转载本站文章请注明作者和出处 <a href="https://coolshell.cn/">酷 壳 &#8211; CoolShell</a> ，请勿用于任何商业用途）</strong></p>
</div>

<div class="wp_rp_wrap  wp_rp_vertical_m" ><div class="wp_rp_content"><h3 class="related_post_title">相关文章</h3><ul class="related_post wp_rp"><li ><a href="https://coolshell.cn/articles/4795.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/7.jpg" alt="开源中最好的Web开发的资源" width="150" height="150" /></a><a href="https://coolshell.cn/articles/4795.html" class="wp_rp_title">开源中最好的Web开发的资源</a></li><li ><a href="https://coolshell.cn/articles/3684.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2011/02/1128-150x150.jpg" alt="Web开发人员速查卡" width="150" height="150" /></a><a href="https://coolshell.cn/articles/3684.html" class="wp_rp_title">Web开发人员速查卡</a></li><li ><a href="https://coolshell.cn/articles/8170.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2012/08/ajax_error-150x150.jpg" alt="一次Ajax查错的经历" width="150" height="150" /></a><a href="https://coolshell.cn/articles/8170.html" class="wp_rp_title">一次Ajax查错的经历</a></li><li ><a href="https://coolshell.cn/articles/7886.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2012/07/muxnt-150x150.jpg" alt="代码执行的效率" width="150" height="150" /></a><a href="https://coolshell.cn/articles/7886.html" class="wp_rp_title">代码执行的效率</a></li><li ><a href="https://coolshell.cn/articles/5224.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2011/09/image008-150x150.jpg" alt="一些文章和各种资源" width="150" height="150" /></a><a href="https://coolshell.cn/articles/5224.html" class="wp_rp_title">一些文章和各种资源</a></li><li ><a href="https://coolshell.cn/articles/5160.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2011/08/Pagination-e1312791884744-150x150.jpg" alt="PHP分页技术的代码和示例" width="150" height="150" /></a><a href="https://coolshell.cn/articles/5160.html" class="wp_rp_title">PHP分页技术的代码和示例</a></li></ul></div></div>The post <a href="https://coolshell.cn/articles/1387.html">十个Web开发文章和教程</a> first appeared on <a href="https://coolshell.cn">酷 壳 - CoolShell</a>.]]></content:encoded>
					
					<wfw:commentRss>https://coolshell.cn/articles/1387.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>如何检测浏览器是否支持CSS3</title>
		<link>https://coolshell.cn/articles/1186.html</link>
					<comments>https://coolshell.cn/articles/1186.html#comments</comments>
		
		<dc:creator><![CDATA[陈皓]]></dc:creator>
		<pubDate>Fri, 24 Jul 2009 07:00:02 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[编程语言]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<guid isPermaLink="false">http://coolshell.cn/?p=1186</guid>

					<description><![CDATA[<p>如何检测用户的浏览器是否支持CSS3，我们需要使用HTML，CSS和JavaScript来完成这件事情。下面是步骤。 1）先制作下面的HTML &#60;span...</p>
<p class="read-more"><a class="btn btn-default" href="https://coolshell.cn/articles/1186.html"> Read More<span class="screen-reader-text">  Read More</span></a></p>
The post <a href="https://coolshell.cn/articles/1186.html">如何检测浏览器是否支持CSS3</a> first appeared on <a href="https://coolshell.cn">酷 壳 - CoolShell</a>.]]></description>
										<content:encoded><![CDATA[<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415450859608158"
     crossorigin="anonymous"></script>如何检测用户的浏览器是否支持CSS3，我们需要使用HTML，CSS和JavaScript来完成这件事情。下面是步骤。</p>
<p><strong>1）先制作下面的HTML</strong></p>
<pre data-enlighter-language="html" class="EnlighterJSRAW">
&lt;span id=&quot;check&quot; rel=&quot;Detect&quot;&gt;&lt;/span&gt;
</pre>
<p><strong>2）然后书写下面的CSS</strong></p>
<pre data-enlighter-language="html" class="EnlighterJSRAW">
#check {
  display: none;
  width: 0;
  height: 0;
}
#check[rel^=&quot;D&quot;] {
  display: block;
  width: 0;
  height: 0;
}
</pre>
<p><span id="more-1186"></span><br />
<strong>3）下面是JavaScripts的检测脚本</strong></p>
<p>请确保下面的代码放在HTML文件头。</p>
<p>[javascript]<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
var obj = document.getElementById(&quot;check&quot;);<br />
var file=&quot;special.css&quot;;<br />
if (window.getComputedStyle)<br />
    var stat = window.getComputedStyle(obj,null).getPropertyValue(&quot;display&quot;);<br />
else if (obj.currentStyle)<br />
    var stat = obj.currentStyle.display;<br />
var css3 = (stat == &quot;block&quot;);<br />
if (css3) alert(&quot;CSS3 Supported.&quot;);<br />
else alert(&quot;CSS3 not supported.&quot;);<br />
&lt;/script&gt;</p>
<p>[/javascript]</p>
<p>文章：<a href="http://www.geocities.com/seanmhall2003/css3/detect.html" target="_self">来源</a><!--



<p align="center"><a href= target=_blank><img decoding="async" src=""></a></p>





<p align="center"><img decoding="async" src="https://coolshell.cn/wp-content/uploads/2020/03/coolshell.weixin.jpg"> <img decoding="async" loading="lazy" src="https://coolshell.cn/wp-content/uploads/2020/03/coolshell.mini_.jpg" width="300" height="300"> <br />关注CoolShell微信公众账号和微信小程序</p>

 

--></p>
<div style="margin-top: 15px; font-size: 16px;color: #cc0000;">
<p align="center"><strong>（转载本站文章请注明作者和出处 <a href="https://coolshell.cn/">酷 壳 &#8211; CoolShell</a> ，请勿用于任何商业用途）</strong></p>
</div>

<div class="wp_rp_wrap  wp_rp_vertical_m" ><div class="wp_rp_content"><h3 class="related_post_title">相关文章</h3><ul class="related_post wp_rp"><li ><a href="https://coolshell.cn/articles/3903.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/14.jpg" alt="一些有意思的贴子和工具" width="150" height="150" /></a><a href="https://coolshell.cn/articles/3903.html" class="wp_rp_title">一些有意思的贴子和工具</a></li><li ><a href="https://coolshell.cn/articles/17634.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2017/01/pretty-code-150x150.gif" alt="Chrome开发者工具的小技巧" width="150" height="150" /></a><a href="https://coolshell.cn/articles/17634.html" class="wp_rp_title">Chrome开发者工具的小技巧</a></li><li ><a href="https://coolshell.cn/articles/9666.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2013/05/Render-Process-150x150.jpg" alt="浏览器的渲染原理简介" width="150" height="150" /></a><a href="https://coolshell.cn/articles/9666.html" class="wp_rp_title">浏览器的渲染原理简介</a></li><li ><a href="https://coolshell.cn/articles/6913.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/10.jpg" alt="神奇的CSS形状 " width="150" height="150" /></a><a href="https://coolshell.cn/articles/6913.html" class="wp_rp_title">神奇的CSS形状 </a></li><li ><a href="https://coolshell.cn/articles/6840.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/uploads/2012/03/css-layouts-150x150.gif" alt="CSS 布局:40个教程、技巧、例子和最佳实践" width="150" height="150" /></a><a href="https://coolshell.cn/articles/6840.html" class="wp_rp_title">CSS 布局:40个教程、技巧、例子和最佳实践</a></li><li ><a href="https://coolshell.cn/articles/6043.html" class="wp_rp_thumbnail"><img src="https://coolshell.cn/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/30.jpg" alt="Web开发中需要了解的东西" width="150" height="150" /></a><a href="https://coolshell.cn/articles/6043.html" class="wp_rp_title">Web开发中需要了解的东西</a></li></ul></div></div>The post <a href="https://coolshell.cn/articles/1186.html">如何检测浏览器是否支持CSS3</a> first appeared on <a href="https://coolshell.cn">酷 壳 - CoolShell</a>.]]></content:encoded>
					
					<wfw:commentRss>https://coolshell.cn/articles/1186.html/feed</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
