<?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>志凡&#039;S BLOG</title>
	<atom:link href="http://www.coderhome.net/zifa/feed" rel="self" type="application/rss+xml" />
	<link>http://www.coderhome.net/zifa</link>
	<description>关注PHP，WEB开发，jquery ,PHP教程,程序优化,还有一些些互联网的乱七八糟的一些东西</description>
	<lastBuildDate>Sun, 08 Aug 2010 14:39:06 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>最近开发的微博应用“微博书签”</title>
		<link>http://www.coderhome.net/zifa/archives/746</link>
		<comments>http://www.coderhome.net/zifa/archives/746#comments</comments>
		<pubDate>Mon, 26 Jul 2010 12:12:07 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[IT挨踢]]></category>
		<category><![CDATA[微博]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=746</guid>
		<description><![CDATA[当然看到一条有用的微博时你会怎么办？微博书签是一个微博结合网络收藏夹的应用，可以帮助您收藏自己喜欢的微博和其它信息或网页，让您能够随时随地的管理和使用，并和朋友分享，方便你收集和分享网络资源。
怎么保存？
1.发微博,例如发布：“@微博书签,音乐 音乐专题2010无限星空音乐节 http://sinaurl.cn/GMGwI”
以@微博书签开头，音乐是分类标签，你也可以不设置分类标签，然后 音乐专题2010无限星空音乐节 http://sinaurl.cn/GMGwI 是你要保存的标签内容。     (看看大家怎么用)
2.转发微博：“@微博书签”。(看看大家怎么用)
3.登录应用后你可以从自已发布的，   收藏里的，好友最新发布的中添加有用的知识。
后面你可以分类浏览、搜索使用你的书签了。
应用地址：http://km.coderhome.net/
平台：新浪微博
相关文章有事没事微博一下http://t.sina.com.cn/zifa]]></description>
			<content:encoded><![CDATA[<p style="clear: both;">当然看到一条有用的微博时你会怎么办？微博书签是一个微博结合网络收藏夹的应用，可以帮助您收藏自己喜欢的微博和其它信息或网页，让您能够随时随地的管理和使用，并和朋友分享，方便你收集和分享网络资源。</p>
<p><strong>怎么保存？</strong></p>
<p>1.发微博,例如发布：“<span style="color: blue;">@微博书签,音乐 音乐专题2010无限星空音乐节 http://sinaurl.cn/GMGwI</span>”<br />
以<span style="color: blue;">@微博书签</span>开头，<span style="color: blue;">音乐</span>是分类标签，你也可以不设置分类标签，然后 <span style="color: blue;">音乐专题2010无限星空音乐节 http://sinaurl.cn/GMGwI</span> 是你要保存的标签内容。     (<a href="http://t.sina.com.cn/1662516050/3f4e2bdB1W" target="_blank">看看大家怎么用</a>)<br />
2.转发微博：“@微博书签”。(<a href="http://t.sina.com.cn/1662516050/3f4e2lxpZz" target="_blank">看看大家怎么用</a>)<br />
3.登录应用后你可以从自已发布的，   收藏里的，好友最新发布的中添加有用的知识。</p>
<p>后面你可以分类浏览、搜索使用你的书签了。</p>
<p>应用地址：<a href="http://km.coderhome.net/">http://km.coderhome.net/</a></p>
<p>平台：<a href="http://t.sina.com.cn/">新浪微博</a></p>
<h3  class="related_post_title">相关文章</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/552" title="有事没事微博一下http://t.sina.com.cn/zifa">有事没事微博一下http://t.sina.com.cn/zifa</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/746/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>php函数unserialize数据返回false问题分析</title>
		<link>http://www.coderhome.net/zifa/archives/741</link>
		<comments>http://www.coderhome.net/zifa/archives/741#comments</comments>
		<pubDate>Fri, 23 Jul 2010 09:53:55 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[PHP相关]]></category>
		<category><![CDATA[序列化]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=741</guid>
		<description><![CDATA[问题表现情况如下：
emlog缓存的保存方式是将php的数据对象（数组）序列化（serialize）后以文件的形式存放，读取缓存的时候直接反序列化 （unserialize）缓存字符串即可读取数据，关于序列化和反序列化的原理请看我先前的文章《php函数serialize() 与unserialize()不完全研究》
我从用户那里取到的缓存的序列化数据为：
a:1:{s:8:&#8221;kl_album&#8221;;a:4:{s:5:&#8221;title&#8221;;s:12:&#8221;精彩瞬   间&#8221;;s:3:&#8221;url&#8221;;s:41:&#8221;http://www.kaisay.cn/?plugin=kl_album&#8221;;s:8:&#8221;is_blank&#8221;;s:7:&#8221;_parent&#8221;;s:4:&#8221;hide&#8221;;s:1:&#8221;n&#8221;;}}
咋一看了解序列化的人都会说，这个数据很正常啊，没什么问题呢。可是直接把这段字符串进行unserialize，返回的值却是个False;
代码
var_dump(unserialize(&#8217;a:1:{s:8:&#8221;kl_album&#8221;;a:4:{s:5:&#8221;title&#8221;;s:12:&#8221;精彩瞬  间&#8221;;s:3:&#8221;url&#8221;;s:41:&#8221;http://www.kaisay.cn/?plugin=kl_album&#8221;;s:8:&#8221;is_blank&#8221;;s:7:&#8221;_parent&#8221;;s:4:&#8221;hide&#8221;;s:1:&#8221;n&#8221;;}}&#8217;));

运行结果

问题出在哪里呢？答案是 s:41:&#8221;http://www.kaisay.cn/?plugin=kl_album&#8221;
序列化字符串中标定该字符串http://www.kaisay.cn/?plugin=kl_album的长度是41，可是我们自己数一下却只有37个 字符。就是因为这个问题，导致php反序列化字符串失效。
如果将字符串长度改成37，那么程序就会顺利的反序列化
代码：
var_dump(unserialize(&#8217;a:1:{s:8:&#8221;kl_album&#8221;;a:4:{s:5:&#8221;title&#8221;;s:12:&#8221;精彩瞬    间&#8221;;s:3:&#8221;url&#8221;;s:37:&#8221;http://www.kaisay.cn/?plugin=kl_album&#8221;;s:8:&#8221;is_blank&#8221;;s:7:&#8221;_parent&#8221;;s:4:&#8221;hide&#8221;;s:1:&#8221;n&#8221;;}}&#8217;));

通过google后才发现，这个问题国外已经很多的网友遇到了，在官方 手册unserialize函数页面的评论中就有很多网友在讨论和研究这个问题的解决方案。
这种情况发生的原因有多种可能，最大的可能就是在序列化数据的时候的编码和反序列化时的编码不一样导致字符串的长度出现偏差。例如数据库编码latin1 和UTF-8字符长度是不一样的。
解决方案:
自己用php来纠正序列化字符串中字符串长度的问题，链接
&#60;?php
$unserialized = preg_replace('!s:(\d+):"(.*?)";!se', "'s:'.strlen('$2').':\"$2\";'", $unserialized );
?&#62;
另外一个网友提出一个在非utf-8情况下的BUG，链接
# ascii字符 "\0" 被解析成了  '\0' （\0在C中是字符串的结束符等于chr(0)，错误解析后算了2个字符）
// 这么写会出问题
$error = preg_replace('!s:(\d+):"(.*?)";!se', "'s:'.strlen('$2').':\"$2\";'", $unserialized );
// 这么写就没事
$works = preg_replace('!s:(\d+):"(.*?)";!se', '"s:".strlen("$2").":\"$2\";"', $unserialized );
// 根据上面的情况我写出的测试例子（注意代码必须用asc格式保存运行）
$test = &#8217;s:7:&#8221;hahaha&#8217;. chr(0) .&#8217;&#8221;;&#8217;;
echo preg_replace(&#8217;!s:(\d+):&#8221;(.*?)&#8221;;!se&#8217;,  &#8220;&#8217;s:&#8217;.strlen(&#8217;$2&#8242;).&#8217;:\&#8221;$2\&#8221;;&#8217;&#8221;, $test );
echo &#8216;&#60;br&#62;&#8217;;
echo preg_replace(&#8217;!s:(\d+):&#8221;(.*?)&#8221;;!se&#8217;,  &#8216;&#8221;s:&#8221;.strlen(&#8221;$2&#8243;).&#8221;:\&#8221;$2\&#8221;;&#8221;&#8216;, $test );
echo [...]]]></description>
			<content:encoded><![CDATA[<p>问题表现情况如下：</p>
<p>emlog缓存的保存方式是将php的数据对象（数组）序列化（serialize）后以文件的形式存放，读取缓存的时候直接反序列化 （unserialize）缓存字符串即可读取数据，关于序列化和反序列化的原理请看我先前的文章<a href="http://be-evil.org/post-62.html" target="_blank">《php函数serialize() 与unserialize()不完全研究》</a></p>
<p>我从用户那里取到的缓存的序列化数据为：</p>
<p>a:1:{s:8:&#8221;kl_album&#8221;;a:4:{s:5:&#8221;title&#8221;;s:12:&#8221;精彩瞬   间&#8221;;s:3:&#8221;url&#8221;;s:41:&#8221;http://www.kaisay.cn/?plugin=kl_album&#8221;;s:8:&#8221;is_blank&#8221;;s:7:&#8221;_parent&#8221;;s:4:&#8221;hide&#8221;;s:1:&#8221;n&#8221;;}}</p>
<p>咋一看了解序列化的人都会说，这个数据很正常啊，没什么问题呢。可是直接把这段字符串进行unserialize，返回的值却是个False;</p>
<p>代码</p>
<p>var_dump(unserialize(&#8217;a:1:{s:8:&#8221;kl_album&#8221;;a:4:{s:5:&#8221;title&#8221;;s:12:&#8221;精彩瞬  间&#8221;;s:3:&#8221;url&#8221;;s:41:&#8221;http://www.kaisay.cn/?plugin=kl_album&#8221;;s:8:&#8221;is_blank&#8221;;s:7:&#8221;_parent&#8221;;s:4:&#8221;hide&#8221;;s:1:&#8221;n&#8221;;}}&#8217;));</p>
<p><a href="http://be-evil.org/content/uploadfile/201002/6e3ff27578c6cd0eba956b1730fac3a820100201153419.png" target="_blank"><img src="http://be-evil.org/content/uploadfile/201002/6e3ff27578c6cd0eba956b1730fac3a820100201153419.png" border="0" alt="点击查看原图" /></a></p>
<p>运行结果</p>
<p><a href="http://be-evil.org/content/uploadfile/201002/0d221bab2394d62022a1942810845ddd20100201153419.png" target="_blank"><img src="http://be-evil.org/content/uploadfile/201002/0d221bab2394d62022a1942810845ddd20100201153419.png" border="0" alt="点击查看原图" /></a></p>
<p>问题出在哪里呢？答案是 <strong>s:41:&#8221;http://www.kaisay.cn/?plugin=kl_album&#8221;</strong></p>
<p>序列化字符串中标定该字符串http://www.kaisay.cn/?plugin=kl_album的长度是41，可是我们自己数一下却只有37个 字符。就是因为这个问题，导致php反序列化字符串失效。</p>
<p>如果将字符串长度改成37，那么程序就会顺利的反序列化</p>
<p>代码：</p>
<p>var_dump(unserialize(&#8217;a:1:{s:8:&#8221;kl_album&#8221;;a:4:{s:5:&#8221;title&#8221;;s:12:&#8221;精彩瞬    间&#8221;;s:3:&#8221;url&#8221;;s:37:&#8221;http://www.kaisay.cn/?plugin=kl_album&#8221;;s:8:&#8221;is_blank&#8221;;s:7:&#8221;_parent&#8221;;s:4:&#8221;hide&#8221;;s:1:&#8221;n&#8221;;}}&#8217;));</p>
<p><img style="border: 0pt none;" src="http://be-evil.org/content/uploadfile/201002/2b80b9d1f4cd4efe4c57561f018a5d9420100201153938.png" border="0" alt="点击查看原图" width="445" height="295" /></p>
<p><span>通过google后才发现，这个问题国外已经很多的网友遇到了，在官方 手册unserialize函数页面的评论中就有很多网友在讨论和研究这个问题的解决方案。</span></p>
<p>这种情况发生的原因有多种可能，最大的可能就是在序列化数据的时候的编码和反序列化时的编码不一样导致字符串的长度出现偏差。例如数据库编码latin1 和UTF-8字符长度是不一样的。</p>
<p>解决方案:</p>
<p>自己用php来纠正序列化字符串中字符串长度的问题，<a href="http://us.php.net/manual/en/function.unserialize.php#71270" target="_blank">链接</a></p>
<p><code><span><span>&lt;?php<br />
$unserialized </span><span>= </span><span>preg_replace</span><span>(</span><span>'!s:(\d+):"(.*?)";!se'</span><span>, </span><span>"'s:'.strlen('$2').':\"$2\";'"</span><span>, </span><span>$unserialized </span><span>);<br />
</span><span>?&gt;</span></span></code></p>
<p><code><span><span>另外一个网友提出一个在非utf-8情况下的BUG</span></span></code><span>，<a href="http://us.php.net/manual/en/function.unserialize.php#83997" target="_blank">链接</a></span></p>
<p><code><span><span># ascii字符 "\0" 被解析成了  '\0'</span></span></code> （\0在C中是字符串的结束符等于chr(0)，错误解析后算了2个字符）</p>
<p><code><span><span>// 这么写会出问题<br />
</span><span>$error </span><span>= </span><span>preg_replace</span><span>(</span><span>'!s:(\d+):"(.*?)";!se'</span><span>, </span><span>"'s:'.strlen('$2').':\"$2\";'"</span><span>, </span><span>$unserialized </span><span>);</span></span></code></p>
<p><code><span><span>// 这么写就没事<br />
</span><span>$works </span><span>= </span><span>preg_replace</span><span>(</span><span>'!s:(\d+):"(.*?)";!se'</span><span>, </span><span>'"s:".strlen("$2").":\"$2\";"'</span><span>, </span><span>$unserialized </span><span>);</span></span></code></p>
<p>// 根据上面的情况我写出的测试例子（注意代码必须用asc格式保存运行）<br />
$test = &#8217;s:7:&#8221;hahaha&#8217;. chr(0) .&#8217;&#8221;;&#8217;;<br />
echo preg_replace(&#8217;!s:(\d+):&#8221;(.*?)&#8221;;!se&#8217;,  &#8220;&#8217;s:&#8217;.strlen(&#8217;$2&#8242;).&#8217;:\&#8221;$2\&#8221;;&#8217;&#8221;, $test );<br />
echo &#8216;&lt;br&gt;&#8217;;<br />
echo preg_replace(&#8217;!s:(\d+):&#8221;(.*?)&#8221;;!se&#8217;,  &#8216;&#8221;s:&#8221;.strlen(&#8221;$2&#8243;).&#8221;:\&#8221;$2\&#8221;;&#8221;&#8216;, $test );<br />
echo &#8216;&lt;br&gt;&#8217;;<br />
echo unserialize(preg_replace(&#8217;!s:(\d+):&#8221;(.*?)&#8221;;!se&#8217;,  &#8220;&#8217;s:&#8217;.strlen(&#8217;$2&#8242;).&#8217;:\&#8221;$2\&#8221;;&#8217;&#8221;, $test ));<br />
echo &#8216;&lt;br&gt;&#8217;;<br />
echo unserialize(preg_replace(&#8217;!s:(\d+):&#8221;(.*?)&#8221;;!se&#8217;,  &#8216;&#8221;s:&#8221;.strlen(&#8221;$2&#8243;).&#8221;:\&#8221;$2\&#8221;;&#8221;&#8216;, $test ));</p>
<p>下图是运行结果：很显然chr(0) 变成了 \0</p>
<p><img style="border: 0pt none;" src="http://be-evil.org/content/uploadfile/201002/aa17a7df9330b4ab503d8427b591433e20100201163428.png" border="0" alt="点击查看原图" width="348" height="242" /><br />
<span>还有一个情况就是单双引号也会出现长度计算错误的问题：<a href="http://us.php.net/manual/en/function.unserialize.php#81784" target="_blank">链接</a></span></p>
<p><code><span><span>&lt;?php<br />
</span><span>//--------------------------------------------<br />
// 请看例子的值. 数据从来那里来都没有关系，无论是数据库还是代码中<br />
</span><span>$heightoptionslist </span><span>= &lt;&lt;&lt;HEIGHTEND<br />
</span><span>a:3:{s:37:"Hands/inches (eg. 13&amp;#039;   2&amp;quot;HH)";s:6:"option";s:25:"Inches only   (eg.39&amp;quot;)";s:6:"option";s:24:"Centimeters (eg.   153cms)";s:6:"option";}<br />
</span><span>HEIGHTEND;<br />
</span><span>//--------------------------------------------<br />
// 将序列化的字符串转换回数组<br />
</span><span>$heightoptionslist </span><span>= </span><span>unserialize</span><span>(</span><span>$heightoptionslist</span><span>);<br />
</span><span>//--------------------------------------------<br />
// 打印值，我们可以很容易看懂<br />
</span><span>echo </span><span>"&lt;div&gt;&lt;pre&gt;\$heightoptionslist  = [\n"</span><span>.</span><span>print_r</span><span>(</span><span>$heightoptionslist</span><span>, </span><span>true</span><span>).</span><span>"\n]&lt;/pre&gt;&lt;/div&gt;"</span><span>;<br />
</span><span>?&gt;</span></span></code></p>
<p><code><span>当字符串中带有没有转换的引号的时候，就会出问题了:</span></code></p>
<p><span>&lt;?php<br />
</span><span>//&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br />
// 另外一个例子,<br />
// 这次有没有转换过的引号在里面<br />
</span><span>$heightoptionslist </span><span>= &lt;&lt;&lt;HEIGHTEND<br />
</span><span>a:3:{s:26:&#8221;Hands/inches (eg. 13\&#8217;   2\&#8221;HH)&#8221;;s:6:&#8221;option&#8221;;s:20:&#8221;Inches only   (eg.39\&#8221;)&#8221;;s:6:&#8221;option&#8221;;s:24:&#8221;Centimeters (eg. 153cms)&#8221;;s:6:&#8221;option&#8221;;}<br />
</span><span>HEIGHTEND;<br />
</span><span>//&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br />
// </span><code><span><span>将 序列化的字符串转换回数组</span></span></code><code><span><span>.<br />
</span><span>$heightoptionslist </span><span>= </span><span>unserialize</span><span>(</span><span>$heightoptionslist</span><span>);<br />
</span><span>//--------------------------------------------<br />
// 返回了一个空的结果.<br />
</span><span>echo </span><span>"&lt;div&gt;&lt;pre&gt;\$heightoptionslist  = [\n"</span><span>.</span><span>print_r</span><span>(</span><span>$heightoptionslist</span><span>, </span><span>true</span><span>).</span><span>"\n]&lt;/pre&gt;&lt;/div&gt;"</span><span>;<br />
</span><span>?&gt;</span></span></code></p>
<p>以上两端代码运行结果：</p>
<p><img style="border: 0pt none;" src="http://be-evil.org/content/uploadfile/201002/46183e8c4265bf5c93b3355e9173f52520100201163853.png" border="0" alt="点击查看原图" width="349" height="459" /><br />
<span>在字符串还有\r字符的时候计算字符串的长度的时候也会出现问题：<a href="http://us.php.net/manual/en/function.unserialize.php#90120" target="_blank">链接</a></span></p>
<p><code><span>When dealing with a string which contain  "\r",  it seems that the length is not evaluated correctly. The  following  solves the problem for me :</span></code></p>
<p><span>&lt;?php<br />
</span><span>// remove the \r caracters from the  $unserialized string<br />
</span><span>$unserialized </span><span>= </span><span>str_replace</span><span>(</span><span>&#8220;\r&#8221;</span><span>,</span><span>&#8220;&#8221;</span><span>,</span><span>$unserialized</span><span>);</span></p>
<p><span>// and then unserialize()<br />
</span><span>unserialize</span><span>(</span><span>$unserialized</span><span>);<br />
</span><span>?&gt;</span><br />
<span>总结：解决方案</span></p>
<p><span>UTF-8</span></p>
<p><span>function  mb_unserialize($serial_str) {<br />
$serial_str= preg_replace(&#8217;!s:(\d+):&#8221;(.*?)&#8221;;!se&#8217;,  &#8220;&#8217;s:&#8217;.strlen(&#8217;$2&#8242;).&#8217;:\&#8221;$2\&#8221;;&#8217;&#8221;, $serial_str );<br />
$serial_str= str_replace(&#8221;\r&#8221;, &#8220;&#8221;, $serial_str);<br />
return unserialize($serial_str);<br />
}</span></p>
<p><span>ASC</span></p>
<p><span>function  asc_unserialize($serial_str) {</span></p>
<p><span> </span><span>$serial_str</span><code><span><span> </span><span>= </span><span>preg_replace</span><span>(</span><span>'!s:(\d+):"(.*?)";!se'</span><span>, </span><span>'"s:".strlen("$2").":\"$2\";"'</span><span>, </span><span>$</span></span></code><span>serial_str</span><code><span><span> </span><span>);</span></span></code><br />
<span> $serial_str=  str_replace(&#8221;\r&#8221;, &#8220;&#8221;, $serial_str);<br />
return unserialize($serial_str);<br />
}</span></p>
<p>希望本文能给所有遇到该问题的朋友一点帮助</p>
<p>原文：<a href="http://hi.baidu.com/qiaoyuetian/blog/item/dfc3654442e7258fb3b7dc64.html" target="_blank">http://hi.baidu.com/qiaoyuetian/blog/item/dfc3654442e7258fb3b7dc64.html</a></p>
<h3  class="related_post_title">相关文章</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/656" title="使用PHP调用MySQL的存储过程">使用PHP调用MySQL的存储过程</a></li><li><a href="http://www.coderhome.net/zifa/archives/636" title="一言难尽话PHP，兼谈我的编程经历">一言难尽话PHP，兼谈我的编程经历</a></li><li><a href="http://www.coderhome.net/zifa/archives/536" title="5个PHP编程的好习惯">5个PHP编程的好习惯</a></li><li><a href="http://www.coderhome.net/zifa/archives/303" title="安全编程法则">安全编程法则</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/741/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>解读 HTML5：建议、技巧和技术</title>
		<link>http://www.coderhome.net/zifa/archives/732</link>
		<comments>http://www.coderhome.net/zifa/archives/732#comments</comments>
		<pubDate>Wed, 21 Jul 2010 14:17:09 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[WEB技术]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=732</guid>
		<description><![CDATA[
想总结一下HTML5  的支持列表，写了许久，无果。在众多文章中，这篇文章涉及到了我想到的，以及没想到的。遂做粗略的翻译，因个人英文水平一般，本文FYI。原文请看：HTML5  Unleashed: Tips, Tricks and Techniques。
=====
现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash  杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。


这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和 技术的有用资源。
 
HTML 5  特性
官方详细 的文档是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我 们将会在文章中涉及到以下的特性：

语义化标记
Form 表单增强功能
视频 / 音频
画布（Canvas）
可编辑内容
拖放
稳健的数据存储

检测浏览器支持
在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：

何时能用
网页设计师的浏览器支持列表
HTML5 测试
布 局引擎对比

你还可以运行 Javascript（用Javascript  检测浏览器特性）来检测 HTML5 特性的支持。你还应该用用Modernizr： 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript  库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。
你可能也会想留意不断变化的&#8221;浏 览器市场份额分享&#8221; —    这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。
值得注意的变更点
除了新的特征，你还应该记下这些重要的变更点：

简洁的 DOCTYPE [...]]]></description>
			<content:encoded><![CDATA[<div>
<p>想总结一下HTML5  的支持列表，写了许久，无果。在众多文章中，这篇文章涉及到了我想到的，以及没想到的。遂做粗略的翻译，因个人英文水平一般，本文FYI。原文请看：<a href="http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/">HTML5  Unleashed: Tips, Tricks and Techniques</a>。</p>
<p>=====</p>
<p>现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash  杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。<br />
<span id="more-732"></span></p>
<p><img src="http://www.happinesz.cn/wp-content/uploads/2010/07/zrclip_001n3369e666.png" alt="" width="500" height="250" /></p>
<p>这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和 技术的有用资源。</p>
<p><span id="more-1389"> </span></p>
<h3><a href="http://www.w3schools.com/html5/html5_reference.asp">HTML 5  特性</a></h3>
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">官方详细 的文档</a>是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习<a href="http://www.w3schools.com/html5/html5_reference.asp">HTML5 标签</a>。我 们将会在文章中涉及到以下的特性：</p>
<ul>
<li>语义化标记</li>
<li>Form 表单增强功能</li>
<li>视频 / 音频</li>
<li>画布（Canvas）</li>
<li>可编辑内容</li>
<li>拖放</li>
<li>稳健的数据存储</li>
</ul>
<h3>检测浏览器支持</h3>
<p>在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：</p>
<ul>
<li><a href="http://caniuse.com/">何时能用</a></li>
<li><a href="http://www.findmebyip.com/litmus">网页设计师的浏览器支持列表</a></li>
<li><a href="http://html5test.com/">HTML5 测试</a></li>
<li><a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML_5%29">布 局引擎对比</a></li>
</ul>
<p>你还可以运行 Javascript（<a href="http://diveintohtml5.org/everything.html">用Javascript  检测浏览器特性</a>）来检测 HTML5 特性的支持。你还应该用用<a href="http://www.modernizr.com/" target="_blank">Modernizr</a>： 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript  库。如果你选择用 Mootools可以使用<a href="http://www.aryweb.nl/projects/mooModernizr/" target="_blank">MooModernizr</a> (MooTools port of Modernizr)。</p>
<p>你可能也会想留意不断变化的&#8221;<a href="http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2">浏 览器市场份额分享</a>&#8221; —    这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。</p>
<h3>值得注意的变更点</h3>
<p>除了新的特征，你还应该记下这些重要的变更点：</p>
<ul>
<li><strong>简洁的 DOCTYPE</strong> HTML5 只需一个简洁的文档类型：&lt;!DOCTYPE  html&gt;。它有意不使用版本，因此文档将会适用所有版本的HTML。</li>
<li><strong>简单易记的语言标签</strong> 你并不需要在 &lt;html&gt; 中使用 xmlns 或 xml:lang  标记。 &lt;html lang=&#8221;en&#8221;&gt; 将对 HTML5 有效。</li>
<li><strong>简单易记的编码类型</strong> 你现在可以在 meta 标签中使用 &#8220;charset&#8221;：&lt;meta  charset=&#8221;utf-8″ /&gt;</li>
<li><strong>不需要闭合标签</strong> 在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。</li>
<li><strong>废弃的标签</strong> 下面这些标签并不被 HTML5 支持：        &lt;acronym&gt;、&lt;applet&gt;、&lt;basefont&gt;、&lt;big&gt;、&lt;center&gt;、&lt;dir&gt;、&lt;font&gt;、&lt;frame&gt;、&lt;frameset&gt;、&lt;noframes&gt;、&lt;s&gt;、&lt;strike&gt;、&lt;tt&gt;、&lt;u&gt;        和 &lt;xmp&gt;</li>
</ul>
<p><strong>简单代码示例:</strong></p>
<pre>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;HTML5 Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
<p>你可以使用<a href="http://validator.whatwg.org/" target="_blank">HTML5  Validator</a> 或 <a href="http://validator.w3.org/" target="_blank">W3C     Markup Validation Service</a> 来测试你的 HTML5 文档。</p>
<h3>语义化标记</h3>
<p>HTML5 新增的一些新标签除了不仅仅是更具语义的 &lt;div&gt; 标签的替代品，并不提供额外的功能。这些都是新增的标签：<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element" target="_blank">&lt;article&gt;</a>、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element" target="_blank">&lt;section&gt;</a>、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element" target="_blank">&lt;aside&gt;</a>、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element" target="_blank">&lt;hgroup&gt;</a>、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element" target="_blank">&lt;header&gt;</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element" target="_blank">&lt;footer&gt;</a>、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element" target="_blank">&lt;nav&gt;</a>、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element" target="_blank">&lt;time&gt;</a>、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element" target="_blank">&lt;mark&gt;</a>、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figure-element" target="_blank">&lt;figure&gt;</a> 和 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figcaption-element" target="_blank">&lt;figcaption&gt;</a>。</p>
<p>这些标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera  9.6+）支持。Javascript 提供了document.createElement(tagName) 的方法，让你可以用来创建新的     HTML5 标签。代替自己创建这些元素，你还可以用<a href="http://remysharp.com/2009/01/07/html5-enabling-script/" target="_blank">HTML5 Enabling Script</a> 或    <a href="http://www.iecss.com/print-protector/" target="_blank">IE Print  Protector</a> — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。</p>
<p>你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset：</p>
<ul>
<li><a href="http://code.google.com/p/html5resetcss/" target="_blank">HTML5  Reset CSS</a></li>
<li><a href="http://code.google.com/p/reset5/" target="_blank">Reset5</a></li>
</ul>
<p><strong>简单代码示例:</strong> 兼容 IE 的 HTML5 页面布局</p>
<pre>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;HTML5 Semantic Markup Demo: Cross Browser&lt;/title&gt;
    &lt;link rel="stylesheet" href="html5reset.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;hgroup&gt;
            &lt;h1&gt;Page Header&lt;/h1&gt;
            &lt;h2&gt;Page Sub Heading&lt;/h2&gt;
        &lt;/hgroup&gt;
    &lt;/header&gt;
    &lt;nav&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;article&gt;
        &lt;header&gt;
            &lt;h1&gt;Article Heading&lt;/h1&gt;
            &lt;time datetime="2010-05-05" pubdate&gt;May 5th, 2010&lt;/time&gt;
        &lt;/header&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
        &lt;section&gt;
            &lt;header&gt;
                &lt;h1&gt;Section Heading&lt;/h1&gt;
            &lt;/header&gt;
            &lt;p&gt;Ut sapien enim, porttitor id feugiat non, ultrices non odio.&lt;/p&gt;
            &lt;footer&gt;
                &lt;p&gt;Section Footer: Pellentesque volutpat, leo nec auctor euismod&lt;/p&gt;
            &lt;/footer&gt;
        &lt;/section&gt;
        &lt;section&gt;
            &lt;header&gt;
                &lt;h1&gt;Section Heading&lt;/h1&gt;
            &lt;/header&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
            &lt;figure&gt;
                &lt;img src="item-1.png" alt="Club"&gt;
                &lt;img src="item-2.png" alt="Heart"&gt;
                &lt;img src="item-3.png" alt="Spade"&gt;
                &lt;img src="item-4.png" alt="Diamond"&gt;
                &lt;figcaption&gt;FigCaption: Club, Heart, Spade and Diamond&lt;/figcaption&gt;
            &lt;/figure&gt;
            &lt;p&gt;Ut sapien enim, porttitor id feugiat non, ultrices non odio&lt;/p&gt;
            &lt;footer&gt;
                &lt;p&gt;Section Footer: Pellentesque volutpat, leo nec auctor euismod est.&lt;/p&gt;
            &lt;/footer&gt;
        &lt;/section&gt;
        &lt;footer&gt;
            Article Footer
        &lt;/footer&gt;
    &lt;/article&gt;
    &lt;aside&gt;
        &lt;header&gt;
            &lt;h1&gt;Siderbar Heading&lt;/h1&gt;
        &lt;/header&gt;
        &lt;p&gt;Ut sapien enim, porttitor id feugiat non, ultrices non odio.&lt;/p&gt;
    &lt;/aside&gt;
    &lt;footer&gt;
        Page Footer
    &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p><strong>注意：</strong>没有一个 div 标签，id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-02-semantic-markup-cross-browser.html" target="_blank">View    Demo</a>)。你仍可以用 <a href="http://validator.whatwg.org/" target="_blank">HTML5 Validator</a> 或  <a href="http://validator.w3.org/" target="_blank">W3C Markup  Validation Service</a> 来检测你的 HTML5 文档。</p>
<p><img src="http://www.happinesz.cn/wp-content/uploads/2010/07/zrclip_002n2a122c02.png" alt="" width="500" height="746" /></p>
<p><strong>注意：</strong>这个示例在 IE6 下并未正常显示。这只是因为我使用 CSS child combinators  来避免使用额外的 class。你可以在 IE6 下用自己的 CSS ，像其他浏览器一样处理 HTML5 标记。</p>
<p><strong>其他资源</strong></p>
<ul>
<li><a href="http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/" target="_blank">HTML5 的       &#8220;articles&#8221; 和 &#8220;sections&#8221;: 有什么区别?</a></li>
<li><a href="http://orderedlist.com/our-writing/resources/html-css/structural-tags-in-html5/" target="_blank">HTML5 中的结构标签</a></li>
<li><a href="http://html5doctor.com/the-figure-figcaption-elements/" target="_blank">Figure 和 caption 元素</a></li>
<li><a href="http://www.zeldman.com/2009/07/13/html-5-nav-ambiguity-resolved/" target="_blank">解读 HTML5: &lt;nav&gt;</a></li>
<li><a href="http://blog.whatwg.org/is-not-just-a-semantic" target="_blank">&lt;section&gt; 并不仅仅是 &#8220;语义化的 &lt;div&gt;&#8221;</a></li>
<li><a href="http://mathiasbynens.be/notes/html5-details-jquery" target="_blank">用 jQuery 提供 HTML5 &lt;details&gt; 的完美折衷方法</a></li>
<li><a href="http://blog.whatwg.org/styling-ie-noscript" target="_blank">不 用脚本实现 IE 对 HTML5 样式控制</a></li>
</ul>
<h3>表单增强</h3>
<p>HTML5 为表单提供了几个新的属性、input 类型和标签。到目前为止，只有 Opera 对HTML5 有比较好的支持。你因此应该下载  Opera 来查看大部分新特性如何工作。</p>
<ul>
<li><strong>新的INPUT类型<br />
</strong> <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#color-state" target="_blank">color</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state" target="_blank">email</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-state" target="_blank">date</a>,       <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#month-state" target="_blank">month</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#week-state" target="_blank">week</a>,       <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#time-state" target="_blank">time</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-and-time-state" target="_blank">datetime</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#local-date-and-time-state" target="_blank">datetime-local</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#number-state" target="_blank">number</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#range-state" target="_blank">range</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state" target="_blank">search</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state" target="_blank">tel</a>, 和 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#url-state" target="_blank">url</a></li>
<li><strong>新属性</strong><br />
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-required-attribute" target="_blank">required</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control" target="_blank">autofocus</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern" target="_blank">pattern</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-list-attribute" target="_blank">list</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-autocomplete-attribute" target="_blank">autocomplete</a> 和 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute" target="_blank">placeholder</a></li>
<li><strong>新元素</strong><br />
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-keygen-element" target="_blank">&lt;keygen&gt;</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element" target="_blank">&lt;datalist&gt;</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-output-element" target="_blank">&lt;output&gt;</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element" target="_blank">&lt;meter&gt;</a> 和 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element" target="_blank">&lt;progress&gt;</a></li>
</ul>
<p>值得高兴的是尽管支持有限，使用这些特性也是个不错的选择。因为新的 INPUT 类型会漂亮地降级为 TEXT 类  INPUT（译注：INPUT 的默认 type 为 text）。且记住现今你仍可以折衷使用 Javascript     控制表单（这个技巧是指首先检测浏览器自身支持，然后才是使用折衷方法）。</p>
<p><strong>简单代码示例：</strong>列出一些今天你可以拿来测试的新特性</p>
<pre>&lt;form&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;New Attributes&lt;/legend&gt;
        &lt;p&gt;
            &lt;label&gt;Required:&lt;/label&gt;
            &lt;input type="text" name="html5requied" required="true"&gt;
            &lt;small&gt;Works in Opera &amp; Chrome&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;AutoFocus:&lt;/label&gt;
            &lt;input type="text" name="html5autofocus" autofocus="true"&gt;
            &lt;small&gt;Works in Opera, Chrome &amp; Safari&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;PlaceHolder:&lt;/label&gt;
            &lt;input type="text" name="html5placeholder" placeholder="This Will Show in WebKit"&gt;
            &lt;small&gt;Works in Chrome &amp; Safari&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Input Pattern:&lt;/label&gt;
            &lt;input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/&gt;
            &lt;small&gt;Works in Opera &amp; Chrome&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Multiple Files:&lt;/label&gt;
            &lt;input type="file" name="html5multiplefileupload" multiple&gt;
            &lt;small&gt;Works in Chrome, Safari &amp; Firefox&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;List:&lt;/label&gt;
            &lt;input type="text" name="html5textwithdatalist" list="colors"&gt;
            &lt;datalist id="colors"&gt;
                &lt;option value="Red"&gt;
                &lt;option value="Green"&gt;
                &lt;option value="Blue"&gt;
            &lt;/datalist&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
    &lt;/fieldset&gt;

    &lt;fieldset&gt;
        &lt;legend&gt;New Input Types&lt;/legend&gt;
        &lt;p&gt;
            &lt;label&gt;Email:&lt;/label&gt;
            &lt;input type="email" name="html5email"&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;URL:&lt;/label&gt;
            &lt;input type="url" name="html5url"&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Number:&lt;/label&gt;
            &lt;input type="number" name="html5number" min="1" max="10" step="1" value="1"&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Range:&lt;/label&gt;
            &lt;input type="range" name="html5range" min="-100" max="100" value="0" step="10"&gt;
            &lt;small&gt;Works in Opera, Chrome &amp; Safari&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Time:&lt;/label&gt;
            &lt;input type="time" step="900" name="html5time"&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Date:&lt;/label&gt;
            &lt;input type="date" name="html5date"&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Month:&lt;/label&gt;
            &lt;input type="month" name="html5month"&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Week:&lt;/label&gt;
            &lt;input type="week" name="html5week"&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;DateTime:&lt;/label&gt;
            &lt;input type="datetime" name="html5datetime"&gt;
            &lt;small&gt;Works in Opera&lt;/small&gt;
        &lt;/p&gt;
    &lt;/fieldset&gt;

    &lt;div&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/div&gt;
&lt;/form&gt;</pre>
<p><img src="http://www.happinesz.cn/wp-content/uploads/2010/07/zrclip_003p7d348e36.png" alt="" width="500" height="868" /></p>
<p>在我们的 DEMO 中的出现的特性，都顺利地运行在 Opera 上，但你仍需要使用 Chrome 或 Safari  来看其他小部分功能的实际运行状态（<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-03-form-enhancements.html" target="_blank">View Demo</a>）。</p>
<p><strong>了解更多:</strong></p>
<ul>
<li><a href="http://diveintohtml5.org/forms.html">疯狂的表单</a></li>
<li><a href="http://www.yourinspirationweb.com/en/the-future-of-the-web-how-well-create-forms-in-html5/">互 联网的未来：如何创建一个 HTML5 表单</a></li>
<li><a href="http://www.456bereastreet.com/archive/201004/html5_input_types/">HTML5 Input 类型</a></li>
<li><a href="http://24ways.org/2009/have-a-field-day-with-html5-forms">忙 于 HTML5 表单的一天</a></li>
<li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/rethinking-forms-in-html5/">对  HTML5 表单的再次思考</a></li>
<li><a href="http://snook.ca/archives/html_and_css/html5-forms-are-coming">HTML5 表单来吧</a></li>
</ul>
<p><strong>工具 &amp; 资源列表:</strong></p>
<ul>
<li><a href="http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/">利 用 jQuery 和 Modernizr 实现跨浏览器 HTML5 Placeholder</a></li>
<li><a href="http://flowplayer.org/tools/">使用 jQuery Tool 实现跨浏览器  Date/Range/Validationns 类型INPUT</a></li>
<li><a href="http://code.google.com/p/jquery-html5-upload/">jQuery HTML5  文件上传：异步上传多文件</a></li>
<li><a href="http://code.google.com/p/jquery-webforms-2/">有 jQuery 插件启动  Web Forms 2.0</a></li>
<li><a href="http://code.google.com/p/webforms2/" target="_blank">跨浏览器  Web Forms 2.0</a></li>
</ul>
<h3>不需要插件的视频和音频</h3>
<p>HTML5  对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外，评论点集中在浏览器提供商对音频/视频格式的不同选择。如果你准备使用 HTML5的 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#audio" target="_blank">&lt;audio&gt;</a> 和 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video" target="_blank">&lt;video&gt;</a>，使你熟悉下面这些视频/音频的解码器和浏览器支持是非常重要的：</p>
<ul>
<li><strong>音频:</strong> <a href="http://en.wikipedia.org/wiki/Use_of_Ogg_formats_in_HTML5" target="_blank">ogg (ogg, oga)</a>, <a href="http://en.wikipedia.org/wiki/MP3" target="_blank">mp3</a>, <a href="http://en.wikipedia.org/wiki/WAV" target="_blank">wav</a>,       <a href="http://en.wikipedia.org/wiki/Advanced_Audio_Coding" target="_blank">AAC</a></li>
<li><strong>视频:</strong> <a href="http://en.wikipedia.org/wiki/Use_of_Ogg_formats_in_HTML5" target="_blank">ogg (ogv)</a>, <a href="http://en.wikipedia.org/wiki/H.264" target="_blank">H.264 (mp4)</a></li>
</ul>
<p>另外你还需要留意一下 Google 的 <a href="http://en.wikipedia.org/wiki/VP8" target="_blank">VP8</a> 视频解码，这个将被作为一个开源格式来结束（格式选择的）纷争。HTML5     提供的一个解决方案是，让你可以指定多个不同格式的源文件，以便于用户浏览器选择它认识的文件。对于 &lt; IE9  和旧浏览器，你将需要一个折衷的解决方案。</p>
<p>当你第一次尝试 HTML5 的音频/视频，你可能会想知道这些可能对你有帮助的东东：</p>
<ul>
<li>你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。</li>
<li>如果你使用 Safari 来检测 HTML5 的音频/视频支持，需要安装 QuickTime Player，没有QuickTime  Player 的 Safari 什么都不能播放。</li>
</ul>
<p><strong>简单代码示例：</strong>音频标记 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-04-audio-demo.html" target="_blank">View Demo</a>)</p>
<pre>&lt;audio controls&gt;
        &lt;source src="demo-audio.ogg" /&gt;
        &lt;source src="demo-audio.mp3" /&gt;
&lt;/audio&gt;</pre>
<p><img src="http://www.happinesz.cn/wp-content/uploads/2010/07/zrclip_004n26687205.png" alt="" width="367" height="55" /></p>
<p><strong>简单代码示例：</strong>视频标记 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-05-video-demo.html" target="_blank">View Demo</a>)</p>
<pre>&lt;video width="320" height="240" controls preload="none" poster="videoframe.jpg"&gt;
    &lt;source src="demo-video.mp4" type="video/mp4" /&gt;
    &lt;source src="demo-video.ogv" type="video/ogg" /&gt;
&lt;/video&gt;</pre>
<p>译注：记得加上type，不然，即使格式对了，也可能播放不了</p>
<p><img src="http://www.happinesz.cn/wp-content/uploads/2010/07/zrclip_005nf0bf48a.png" alt="" width="349" height="234" /></p>
<p>尽管相对于要依赖第三方插件已经迈了一大步，但上面提供的示例，只是一个开始。由于各个浏览都提供了不同外观的控制栏，你可能会希望改变他们以适应 你的设计。看看下面例子如何利用 DOM API 来创造一个属于你自己的自定义控制栏。</p>
<p><strong>简单代码示例：</strong>拥有自定义控制栏的视频 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-05-video-custom-controls-demo.html" target="_blank">View    Demo</a>)</p>
<pre>&lt;video width="320" height="240" preload="none" poster="videoframe.jpg"&gt;
    &lt;source src="demo-video.mp4" type="video/mp4" /&gt;
    &lt;source src="demo-video.ogv" type="video/ogg" /&gt;
&lt;/video&gt;

&lt;script&gt;
    var video = document.getElementsByTagName('video')[0];
    function toggleMute() {
        video.muted = !video.muted;
    }
&lt;/script&gt;
&lt;p&gt;
    &lt;a href="JavaScript:video.play();"&gt;Play&lt;/a&gt; |
    &lt;a href="JavaScript:video.pause();"&gt;Pause&lt;/a&gt; |
    &lt;a href="JavaScript:toggleMute();"&gt;Sound On/Off&lt;/a&gt;
&lt;/p&gt;</pre>
<p><img src="http://www.happinesz.cn/wp-content/uploads/2010/07/zrclip_006n3d10fa19.png" alt="" width="349" height="275" /></p>
<p>你还可以利用 DOM API  来为音频/视频做更多。而且如果你乐意添加一些其他的东西，将会把这个带向一个完全不同的级别。例如，你可以把视频放到了 HTML5 canvas     元素中。这将会允许你读取一个视频的像素数据、控制、和帧，并做一些你想做的好玩的东东。（自己看看：<a href="http://craftymind.com/factory/html5video/CanvasVideo.html" target="_blank">Blowing up HTML5 Video</a>, <a href="http://media.chikuyonok.ru/ambilight/" target="_blank">Ambilight  for HTML5 Video</a>）</p>
<p><strong>了解更多：</strong></p>
<ul>
<li><a href="http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/">关 于 HTML5 音频/视频的一切</a></li>
<li><a href="http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/">在HTML5  页面播放音频/视频</a></li>
<li><a href="http://html5doctor.com/native-audio-in-the-browser/">浏览器自带  HTML5 支持</a></li>
<li><a href="http://diveintohtml5.org/video.html">网页中的视频 (不需要额外支持)</a></li>
<li><a href="http://www.html5video.org/">HTML5Video.org</a></li>
<li><a href="http://wiki.whatwg.org/wiki/Video_type_parameters">视频类型的参数</a></li>
</ul>
<p><strong>跨浏览器解决方案</strong>：</p>
<ul>
<li><a href="http://jilion.com/sublime/video" target="_blank">SublimeVideo</a></li>
<li><a href="http://www.html5video.org/kaltura-html5/" target="_blank">Kaltura  HTML5 Media Library</a></li>
<li><a href="http://camendesign.com/code/video_for_everybody" target="_blank">Video for Everybody</a></li>
<li><a href="http://www.happyworm.com/jquery/jplayer/" target="_blank">jPlayer:  jQuery Audio Player</a></li>
<li><a href="http://www.projekktor.com/" target="_blank">Projekktor</a></li>
<li><a href="http://github.com/macinjosh/YUI-HTML5-Player" target="_blank">YUI HTML5 Player</a></li>
<li><a href="http://www.openbeelden.nl/oiplayer/" target="_blank">OIPlayer  jQuery Plugin</a></li>
<li><a href="http://soukie.net/degradable-html5-audio-and-video-plugin/" target="_blank">Degradable HTML5 audio and video Plugin</a></li>
<li><a href="http://www.xiph.org/quicktime/" target="_blank">Xiph  QuickTime Component to make Ogg work in Safari</a></li>
</ul>
<p><strong>Javascript 交互：</strong></p>
<ul>
<li><a href="http://www.chipwreck.de/blog/software/cwvideo/">处理 HTML5  视频的 Mootools</a></li>
</ul>
<p><strong>编码、转换工具：</strong></p>
<ul>
<li><a href="http://mirovideoconverter.com/" target="_blank">Miro Video  Converter</a></li>
<li><a href="http://www.erightsoft.com/SUPER.html" target="_blank">SUPER</a></li>
<li><a href="http://www.minicoder.minitech.org/" target="_blank">MiniCoder</a></li>
<li><a href="http://handbrake.fr/" target="_blank">HandBrake</a></li>
<li><a href="http://v2v.cc/%7Ej/ffmpeg2theora/" target="_blank">ffmpeg2theora</a></li>
<li><a href="http://firefogg.org/" target="_blank">Firefogg</a></li>
</ul>
<h3>基于 JavaScript 的 2D 绘画</h3>
<p>HTML5 中最让人兴奋的特性是 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html" target="_blank">&lt;canvas&gt;</a> — 那个用来作画的东东。在你的页面中插入 canvas  就像插入其他标记一样平常，但你将需要一些编程的经验来绘制形状、图表、动画、游戏、图片作品等。</p>
<p><img src="http://www.happinesz.cn/wp-content/uploads/2010/07/zrclip_007p5c3a18a5.png" alt="" width="349" height="244" /></p>
<p>在除 IE 外的所有现代浏览器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持  Canvas。你可以使用 <a href="http://code.google.com/p/explorercanvas/" target="_blank">ExplorerCanvas</a> 这个 Javascript 解决方案来为 IE 添加这个新特性。</p>
<p><strong>简单示例代码:</strong> 基于指令的 HTML5 Canvas 2D 绘画 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-06-canvas-demo.html" target="_blank">View Demo</a>)</p>
<pre>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;HTML5 Canvas Demo&lt;/title&gt;
    &lt;link rel="stylesheet" href="html5reset.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="html5simple.css" type="text/css" /&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="html5.js"&gt;&lt;/script&gt;
        &lt;script src="excanvas.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
        &lt;script type="text/javascript"&gt;
        function draw(){
            var canvas = document.getElementById('mycanvas');
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');

                // Draw Rectangle
                ctx.fillStyle = "rgb(255,0,0)";
                ctx.fillRect (10, 10, 100, 100);

                // Draw Circle
                ctx.fillStyle = "rgb(0,255,0)";
                ctx.beginPath();
                ctx.arc(125,100,50,0,Math.PI*2,true);
                ctx.fill();
                ctx.closePath();

                // Draw Custom Shape With Lines
                ctx.fillStyle = "rgb(0,0,255)";
                ctx.beginPath();
                ctx.moveTo(125,100);
                ctx.lineTo(175,50);
                ctx.lineTo(225,150);
                ctx.fill();
                ctx.closePath();

                // Draw Image From External File
                var myImage = new Image();
                myImage.onload = function(){
                    ctx.drawImage(myImage, 220, 10);
                }
                myImage.src = "sample.jpg";

            }
        }
        &lt;/script&gt;
        &lt;style type="text/css"&gt;
            canvas {
                border: 5px solid #ccc;
                background: #000;
            }
        &lt;/style&gt;
&lt;/head&gt;
&lt;body onload="draw();"&gt;
    &lt;header&gt;
        &lt;h1&gt;HTML5 Canvas Demo&lt;/h1&gt;
    &lt;/header&gt;

    &lt;figure&gt;
        &lt;canvas id="mycanvas" width="300" height="200"&gt;Fallback content, in case the browser does not support Canvas.&lt;/canvas&gt;
        &lt;figcaption&gt;Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)&lt;/figcaption&gt;
    &lt;/figure&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p><strong>了解更多:</strong></p>
<ul>
<li><a href="http://www.slideshare.net/robhawkes/html5-canvas-the-future-of-graphics-on-the-web">HTML5  Canvas – Web 绘画的未来</a></li>
<li><a href="https://developer.mozilla.org/en/Canvas_tutorial">Canvas 教程  at Mozilla Developer Center</a></li>
<li><a href="http://carsonified.com/blog/dev/html-5-dev/how-to-draw-with-html-5-canvas/">如 何使用 HTML 5 Canvas</a></li>
<li><a href="http://dev.opera.com/articles/view/html-5-canvas-the-basics/">HTML5  Canvas 基础 (Opera 开发者社区)</a></li>
<li><a href="http://diveintohtml5.org/canvas.html" target="_blank">让我们称之 为画层</a></li>
</ul>
<p><strong>工具 &amp; 资源列表：</strong></p>
<ul>
<li><a href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">HTML5  Canvas 帮助手册</a></li>
<li><a href="http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/">jQuery        Visualize Plugin: 基于 Table 的图表</a></li>
<li><a href="http://processingjs.org/">Processing.js: Port of the  Processing Visualization Language</a></li>
<li><a href="http://cartagen.org/" target="_blank">Cartagen: Framework  For Rendering Maps in HTML5</a></li>
<li><a href="http://www.rgraph.net/" target="_blank">RGraph: HTML5  Canvas Graph Library</a></li>
</ul>
<p><strong>示例 &amp; 应用：</strong></p>
<ul>
<li><a href="http://www.chromeexperiments.com/" target="_blank">Chrome  Experiments</a></li>
<li><a href="http://mrdoob.com/projects/harmony/" target="_blank">Harmony:  Procedural Drawing Tool</a></li>
<li><a href="http://mugtug.com/sketchpad/" target="_blank">Sketchpad:  Online Paint/Drawing Application</a></li>
<li><a href="http://canvaspaint.org/" target="_blank">CanvasPaint: Copy  of Microsoft Paint</a></li>
</ul>
<h3>让内容可编辑</h3>
<p>如果你想让页面的某个地方，允许用户编辑页面，所有的你需要做的事就是添加 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable" target="_blank">contenteditable</a> 属性到父容器中。你可能曾在 WYSIWYG 编辑器中看过。这个属性是  HTML5 的一部分，且它几乎被所有主流浏览器支持（Internet Explorer 5.5+, Firefox 3+,    Safari  3.1+, Chrome 2+, and Opera 9.6+）：</p>
<p>值得注意的是设置 contenteditable=&#8221;true&#8221; 只是允许用户编辑、删除、插入内容，并不会自动提供其他类似于 WYSIWYG  编辑器的保存或应用样式的功能。你将需要自己用 Javascript 来添加这些功能。</p>
<p><img src="http://www.happinesz.cn/wp-content/uploads/2010/07/zrclip_008n39d310e9.png" alt="" width="436" height="195" /></p>
<p><strong>简单示例代码:</strong> 有加粗、倾斜和下划线功能的基本编辑器 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-07-contenteditable-demo.html" target="_blank">View    Demo</a>)</p>
<pre>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;HTML5 ContentEditable Demo&lt;/title&gt;
    &lt;link rel="stylesheet" href="html5reset.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="html5simple.css" type="text/css" /&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;

    &lt;script language="javascript"&gt;
    function editStyle(cmd) {
        document.execCommand(cmd, null, null);
    }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body onload="draw();"&gt;
    &lt;header&gt;
        &lt;h1&gt;HTML5 ContentEditable Demo&lt;/h1&gt;
    &lt;/header&gt;

    &lt;div id="democontainer"&gt;
        &lt;div id="editingcontrols"&gt;
            &lt;a href="#" onclick="editStyle('bold');"&gt;[Bold]&lt;/a&gt;
            &lt;a href="#" onclick="editStyle('italic');"&gt;[Italic]&lt;/a&gt;
            &lt;a href="#" onclick="editStyle('underline');"&gt;[Underline]&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="editor" contenteditable="true"&gt;
            &lt;h2&gt;HTML5 Standardized Content Editing&lt;/h2&gt;
            &lt;p&gt;Thanks to Microsoft; HTML elements are editable since Internet Explorer 5.5....&lt;/p&gt;
            &lt;p&gt;To edit just start typing. To change style, select text and click on links in the tools bar.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
<p><strong>了解更多：</strong></p>
<ul>
<li><a href="http://blog.whatwg.org/the-road-to-html-5-contenteditable">通 向 HTML5 之路: contentEditable</a></li>
<li><a href="http://arstechnica.com/open-source/guides/2009/07/how-to-build-a-desktop-wysiwyg-editor-with-webkit-and-html-5.ars/">如 何利用       webkit 和 HTML创建一个桌面版的 WYSIWYG 编辑器</a></li>
</ul>
<p><strong>工具 &amp; 资源列表：</strong></p>
<ul>
<li><a href="http://www.quirksmode.org/dom/execCommand.html">QuirksMode:  execCommand 兼容列表</a></li>
<li><a href="http://msdn.microsoft.com/en-us/library/ms533049%28VS.85%29.aspx">Internet  Explorer commands</a></li>
<li><a href="https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla">Mozilla  Firefox commands</a></li>
<li><a href="http://www.w3avenue.com/2010/01/04/list-of-free-web-based-html-editors-for-your-cms-project/">基  于网页的免费 HTML 编辑器</a></li>
</ul>
<h3>拖放</h3>
<p>HTML5 的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。现今，<a href="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop" target="_blank">Firefox 3.5+</a> 已经对此特性提供了最大化的支持，其他浏览还只是保守地支持了一小部分（Opera  完全不支持）。不幸的是根据现阶段浏览器提供商的执行状况，你将需要依赖大量的 Javascript 和 CSS 来让做跨浏览器支持。</p>
<p><strong>注意：</strong></p>
<ul>
<li>图片和超链接默认是可拖放的。对于所有的元素，HTML5 引进了一个新的属性&#8221;draggable&#8221;，这将用来设置元素是否接受拖放；</li>
<li>下列事件对应 HTML5 的拖放：<strong>dragstart</strong>, <strong>drag</strong>, <strong>dragenter</strong>,  <strong>dragover</strong>, <strong> dragleave</strong>, <strong>drop</strong> 和 <strong>dragend。</strong>当你要fire掉事件的时候，将需要写 function (事件处理器)        来处理你需要的，也可能需要给元素绑定事件或做事件指派来简化你的代码；</li>
<li>拖放事件还让你可以通过被拖放元素来传递数据，使用事件属性&#8221;dataTransfer&#8221; 的 getData 和 setData 方法。</li>
<li>你可以在不同的浏览器或程序中进行拖放。</li>
</ul>
<p><strong>简单代码示例:</strong> 将图片拖放到另一个窗口 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-08-draganddrop-demo.html" target="_blank">View Demo</a>)</p>
<pre>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;HTML5 Drag &amp; Drop Demo&lt;/title&gt;
    &lt;link rel="stylesheet" href="html5reset.css" type="text/css" /&gt;
    &lt;link rel="stylesheet" href="html5simple.css" type="text/css" /&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;

    &lt;script&gt;
    function DragHandler(target, e) {
        e.dataTransfer.setData('Text', <a href="http://target.id/">target.id</a>);
    }

    function DropHandler(target, e) {
       var id = e.dataTransfer.getData('Text');
       target.appendChild(document.getElementById(id));
       e.preventDefault();
    }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;h1&gt;HTML5 Drag &amp; Drop Demo&lt;/h1&gt;
    &lt;/header&gt;
&lt;div id="dndcontainer"&gt;
    &lt;div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false"&gt;
        &lt;img src="item-1.png" id="club" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" /&gt;
        &lt;img src="item-2.png" id="heart" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" /&gt;
        &lt;img src="item-3.png" id="spade" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" /&gt;
        &lt;img src="item-4.png" id="diamond" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" /&gt;
    &lt;/div&gt;

    &lt;div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false"&gt;&lt;/div&gt;

    &lt;div id="demonotes"&gt;Drag and drop images from one container to another. Works in all major browsers except Opera.&lt;/div&gt;

&lt;/div&gt;</pre>
<p><strong>了解更多:</strong></p>
<ul>
<li><a href="http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/" target="_blank">跨浏览器 HTML5 拖放</a></li>
<li><a href="http://decafbad.com/blog/2009/07/15/html5-drag-and-drop" target="_blank">Firefox 3.5 中的 HTML5 拖放</a></li>
<li><a href="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop" target="_blank">MDC：拖放</a></li>
<li><a href="http://html5doctor.com/native-drag-and-drop/" target="_blank">自带拖放支持</a></li>
<li><a href="http://zope.cetis.ac.uk/members/scott/blogview?entry=20090624222327" target="_blank">HTML5 拖放 + Microformats = 没有什么不可能</a></li>
<li><a href="http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html" target="_blank">HTML5 拖放之灾</a></li>
</ul>
<p><strong>JavaScript 解决方案：</strong></p>
<ul>
<li><a href="http://github.com/guillaumebort/jquery-ndd" target="_blank">HTML5  自带拖放 jQuery 插件</a></li>
<li><a href="http://blog.ukijs.org/2010/03/16/drag-and-drop-in-uki/" target="_blank">基于 Simple UI Kit 的拖放</a></li>
</ul>
<h3>稳健的数据存储</h3>
<p><a href="http://dev.w3.org/html5/webstorage/" target="_blank">Web 存储</a>规 范提供了与 HTTP session cookies 相似的稳健的 Web    存储属性。他们是&#8221;sessionStorage&#8221;  和&#8221;localStorage&#8221;。</p>
<ul>
<li><strong>sessionStorage</strong> 用以存储浏览最顶层环境生存周期内的数据。例如浏览器 Tab  的或窗口持续打开周期内的数据。</li>
<li><strong>localStorage</strong> 用以存储周期较长、多页面，以及多浏览器 session  的内数据。甚至持续到你重起浏览器或者电脑。</li>
</ul>
<p>本地和 session 存储特性被如下浏览器所支持：IE8+, Firefox 3.5+, Safari 4.0+, Chrome  2.0+ and Opera 10.5+。</p>
<p><strong>简单代码示例:</strong> 使用 localStorage 来创建页面计数器 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-10-localstorage-demo.html" target="_blank"><strong>View    Demo</strong></a>)</p>
<pre>&lt;p&gt;You Have Viewed This Page &lt;b&gt;
&lt;script&gt;
    if (!localStorage.pageCounter)
        localStorage.setItem('pageCounter',0);
    localStorage.setItem('pageCounter',parseInt(localStorage.pageCounter)+1);
    document.write(localStorage.pageCounter);
&lt;/script&gt;
&lt;/b&gt; Time(s).&lt;/p&gt;

&lt;p&gt;&lt;input value="Clear localStorage" type="button" onClick="localStorage.clear();location.reload(true);" /&gt;
&lt;input value="Reload Page" type="button" onClick="location.reload(true);" /&gt;&lt;/p&gt;</pre>
<p>你也可以把上面的代码中所有的 localStorage 的实例替换成 sessionStorage 来测试  sessionStorage。你的计数器将会在你关闭 Tab 或窗口前正常工作。如果你重起浏览器，计数器将会重新计数 (<a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html" target="_blank">View Demo</a>)    。</p>
<p><strong>了解更多:</strong></p>
<ul>
<li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/" target="_blank">学习       HTML5 Local Storage</a></li>
</ul>
<p><strong>JavaScript 解决方案:</strong></p>
<ul>
<li><a href="http://code.google.com/p/realstorage/" target="_blank">realstorage:  JavaScript compatibility wrapper for localStorage –       provides  fallback to Gears</a></li>
<li><a href="http://code.google.com/p/sessionstorage/" target="_blank">sessionstorage:  跨浏览器 HTML5 sessionStorage</a></li>
<li><a href="http://www.stoimen.com/blog/2010/02/26/jquery-localstorage-plugin-alpha/" target="_blank">jQuery localStorage 插件</a></li>
<li><a href="http://www.jstorage.info/" target="_blank">jStorage:  在支持的地方使用 HTML5 local storage 在旧版的 IE 上使用 userData behavior</a></li>
</ul>
<h3>更多____</h3>
<p>除了已经讨论的内容外，还有更多你会想跟进了解的特性和相关的技术。这些是会帮助你研究的摘要列表：</p>
<h5>网页版离线程序</h5>
<p>HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html" target="_blank">规范</a>还定义了当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。这个特性现在被 Firefox  3.5+, Chrome 4.0+, Safari 4.0+ and Mobile Safari 3.1+ 所支持。</p>
<p>你可以通过提供一个 manifest  文件来定义哪些文件需要被缓存，哪些需要在离线的时候有折衷方案替代。当用户访问这个页面，支持的浏览器将会猎取一个 manifest  版本。它将下载并缓存所有的涉及到的文件，并且当 manifest    相对于用户上次的浏览的版本有变化，它将会再次下载并缓存所有的文件。</p>
<ul>
<li><a href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" target="_blank">Safari 客户端存储及离线应用程序编程指南</a></li>
<li><a href="http://robertnyman.com/2010/04/14/using-offline-web-applications-to-offer-offline-capabilities-sister-specification-to-html5/" target="_blank">使用离线应用程序提供离线支持</a></li>
<li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" target="_blank">Mozilla Hacks: 离线网页应用程序</a></li>
<li><a href="http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone" target="_blank">如何在 iPhone 上创建离线应用程序</a></li>
</ul>
<h5>跨文档通讯</h5>
<p>新的<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages" target="_blank">规范</a>还提供了&#8221;postMessage&#8221;  让我们可以向不同域的页面发送消息。这个特性在所有现代浏览器中被支持：IE8+, Firefox3+, Safari 4+, Chrome 2+  and Safari 9.6+。</p>
<ul>
<li><a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html" target="_blank">Safari Reference Library: 跨文档通信</a></li>
<li><a href="https://developer.mozilla.org/en/DOM/window.postMessage" target="_blank">Mozilla Developer Center: postMessage</a></li>
</ul>
<h5>用 className 访问 DOM 元素</h5>
<p>我们在 Javascript 中最常见的事是选择 DOM 元素并动态地做一些事。我们大部分人在原生 Javascript 中使用  &#8220;getElementById&#8221; 来做这事。HTML5 规则已经添加了&#8221;<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-getelementsbyclassname" target="_blank">getElementsByClassName</a>&#8221; 方法，当我们要用 className  来访问元素的时候，这将会大大提升我们脚本的性能。 这个特性在除IE 外的其他现代浏览器都支持，有Firefox3+, Safari 3.2+,     Chrome 2+ 和 Safari 9.6+。</p>
<ul>
<li><a href="http://ejohn.org/blog/getelementsbyclassname-speed-comparison/" target="_blank">getElementsByClassName 速度对比</a></li>
<li><a href="http://crisp.tweakblogs.net/blog/485/some-thoughts-on-html5s-getelementsbyclassname.html" target="_blank">对 HTML5′s       getElementsByClassName 的一些思考</a></li>
</ul>
<h5>更多的特性</h5>
<p>官方规范文档：</p>
<ul>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#microdata" target="_blank">Microdata</a></li>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#mdvocabs">Microdata  Vocabularies</a></li>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#channel-messaging">Channel  Messaging</a></li>
</ul>
<h5>相关技术</h5>
<p>官方规范文档:</p>
<ul>
<li><a href="http://www.whatwg.org/specs/web-workers/current-work/">Web  Workers</a></li>
<li><a href="http://dev.w3.org/html5/websockets/">WebSocket API</a></li>
<li><a href="http://www.whatwg.org/specs/web-socket-protocol/">WebSocket  Protocol</a></li>
<li><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></li>
<li><a href="http://dev.w3.org/html5/webdatabase/">Web SQL Database</a></li>
<li><a href="http://dev.w3.org/geo/api/spec-source.html">Geolocation API</a></li>
<li><a href="http://www.w3.org/TR/SVG/">SVG</a></li>
<li><a href="http://www.w3.org/TR/MathML/">MathML</a></li>
<li><a href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest</a></li>
</ul>
<h3>额外的资源</h3>
<p>如果你还想要涉猎更多的知识，应该看看这些资源：</p>
<h5>必要的书签</h5>
<ul>
<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" target="_blank">HTML5 Draft</a><br />
WHATWG 的草案</li>
<li><a href="http://blog.whatwg.org/" target="_blank">The WHATWG Blog</a><br />
WHATWG 官方博客 – 负责 HTML5 规范的团队</li>
<li><a href="http://wiki.whatwg.org/" target="_blank">WHATWG Wiki</a><br />
WHATWG 贡献者提交和编纂他们对 WHATWG 规范建议的地方</li>
<li><a href="http://diveintohtml5.org/" target="_blank">Dive Into HTML5</a><br />
Mark Pilgrim 在 HTML5 规范中精心挑选的特性。现在正在进行中，最终将会由 O’Reilly 制作为纸质读物</li>
<li><a href="http://validator.whatwg.org/" target="_blank">HTML5  Validator</a><br />
在线 HTML5 文档检测工具</li>
<li><a href="http://www.w3.org/html/planet/" target="_blank">Planet  HTML5</a></li>
<li><a href="http://html5.org/tools/web-apps-tracker" target="_blank">HTML5  Revision Tracker</a><br />
提供在线的规范选择和版本对比</li>
<li><a href="http://html5doctor.com/" target="_blank">HTML5 Doctor</a><br />
注重于帮助你在今天实施 HTML5 的在线社区</li>
</ul>
<h5>示例 / 展廊</h5>
<ul>
<li><a href="http://html5demos.com/" target="_blank">HTML5 Demos and  Examples</a><br />
一系列由 Remy Sharp 制作的 HTML5 实验</li>
<li><a href="http://apirocks.com/html5/html5.html" target="_blank">HTML5  Presentation</a><br />
由 Marcin Wichary 开发，Ernest Delgado 修改。 这个报告展示了桌面和移动浏览器上的 HTML5 特性</li>
<li><a href="http://robertnyman.com/html5/" target="_blank">Information  and Samples for HTML5 and related APIs</a><br />
一系列由 Robert Nyman 制作的 HTML5 演示和例子</li>
<li><a href="http://html5gallery.com/" target="_blank">HTML5 Gallery</a><br />
收集使用 HTML5 标记网站的Gallery</li>
</ul>
<h5>帮助手册</h5>
<ul>
<li><a href="http://www.veign.com/reference/html5-guide.php" target="_blank">HTML5 Quick Reference Guide</a></li>
<li><a href="http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/" target="_blank">HTML5 Cheat Sheet</a></li>
<li><a href="http://woorkup.com/2009/12/16/html5-visual-cheat-sheet-reloaded/" target="_blank">HTML5 Visual Cheat Sheet</a></li>
<li><a href="http://heideri.ch/jso/" target="_blank">HTML5 Security  Cheatsheet</a></li>
</ul>
<h5>框架</h5>
<ul>
<li><a href="http://lessframework.com/" target="_blank">Less</a><br />
一个为多种屏幕宽度提供灵活多栏布局，由驱动于 HTML5 的 CSS 框架</li>
<li><a href="http://52framework.com/" target="_blank">52Framework</a><br />
一个以让你在今天就能在项目上应用 HTML5 和 CSS3 的页面开发框架</li>
<li><a href="http://www.sproutcore.com/" target="_blank">SproutCore</a><br />
一个由 Ruby gem 写的 JavaScript HTML5 应用程序框架。</li>
<li><a href="http://frame.serverboy.net/" target="_blank">Frame</a><br />
Frame 是一个支持 Layout, Typography, Forms, Code, Table, Reset, 和 Print  标签样式化，并提供 HTML5 默认样式和元素支持的 CSS 框架</li>
</ul>
<h5>综述性文章 &amp; 教程</h5>
<ul>
<li><a href="http://www.ibm.com/developerworks/opensource/library/x-html5mobile1/index.html" target="_blank">用 HTML5 制作手机web程序</a><br />
By Michael Galpin (IBM developerWorks – May 6th, 2010)</li>
<li><a href="http://www.pvmgarage.com/en/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/" target="_blank">Touch       The Future: 用 HTML5 和 CSS3 制作更优雅的网站</a><br />
By Piervincenzo Madeo (PV.M Garage – April 23rd, 2010)</li>
<li><a href="http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now/" target="_blank">现在如何在你的客户需求上使用 HTML5</a><br />
By Richard Clark (HTML5 Doctor – March 30th, 2010)</li>
<li><a href="http://www.ibm.com/developerworks/web/library/wa-html5webapp/" target="_blank">使用 HTML5 制作web 应用程序</a><br />
By Michael Galpin (IBM developerWorks – March 30th, 2010)</li>
<li><a href="http://sixrevisions.com/web-development/html5-iphone-app/" target="_blank">如何制作一个 HTML5 iPhone App</a><br />
By Alex Kessinger (Six Revisions – March 26th, 2010)</li>
<li><a href="http://radar.oreilly.com/2010/03/why-html5-is-worth-your-time.html" target="_blank">为什么 HTML5 值得你花时间</a><br />
By Mac Slocum (O’Reilly – March 15th, 2010)</li>
<li><a href="http://www.threestyles.com/tutorials/html5-rocks-my-socks-off/" target="_blank">HTML5 让我震惊了</a><br />
By Shane Jeffers (Three Styles – March 11th, 2010)</li>
<li><a href="http://www.ibm.com/developerworks/web/tutorials/wa-html5/" target="_blank">使用 HTML5 和 CSS3 创建时尚网站</a><br />
By Joe Lennon (IBM developerWorks – March 2nd, 2010)</li>
<li><a href="http://inspectelement.com/tutorials/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3/" target="_blank">用       HTML5 和 CSS3 制作一个向后兼容的单页作品集页面</a><br />
By Tom Kenny (Inspect Element – January 25th, 2010)</li>
<li><a href="http://lifehacker.com/5416100/how-html5-will-change-the-way-you-use-the-web" target="_blank">HTML5 将会如何改变你使用网站的习惯</a><br />
By Kevin Purdy (Lifehacker – December 1st, 2009)</li>
<li><a href="http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/" target="_blank">Coding A HTML 5 Layout       From Scratch</a><br />
By Enrique Ramirez (Smashing Magazine – August 4th, 2009)</li>
<li><a href="http://perishablepress.com/press/2009/07/19/power-of-html5-css3/" target="_blank">HTML5 和 CSS3 的威力所在</a><br />
By Jeff Starr (Perishable Press – July 19th, 2009)</li>
<li><a href="http://articles.sitepoint.com/article/html-5-snapshot-2009" target="_blank">是的，今天就可以使用 HTML5 了!</a><br />
By Bruce Lawson (SitePoint – July 1st, 2009)</li>
<li><a href="http://www.ibm.com/developerworks/xml/library/x-html5/" target="_blank">HTML5 中的新元素</a><br />
By Elliotte Rusty Harold (IBM developerWorks – August 7th, 2007)</li>
</ul>
<h3>示例 &amp; 下载</h3>
<p>你可以下载打包了所有 Demo 的 ZIP 文件。注意：视频/音频并没有包含在下载中。</p>
<p><a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/">查 看Demo</a> | <a href="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/w3avenue-download-html5-samples.zip">下 载演示文件</a></p>
<p>==========</p>
<p>文章后面的那句话就不翻啦，套话。对于个人来说，目前会逐渐接触更多的 HTML5 和 CSS3  相关的新技术，希望能在后续的学习和研究中有所收获，并能将其应用到产品中，以提升产品在功能、速度和视觉上的体验。</p>
<p>原文：<a href="http://www.happinesz.cn/archives/1389/" target="_blank">http://www.happinesz.cn/archives/1389/</a></div>
<h3  class="related_post_title">随机日志</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/148" title="QQ聊天对话窗口屏蔽了.cn域名">QQ聊天对话窗口屏蔽了.cn域名</a></li><li><a href="http://www.coderhome.net/zifa/archives/316" title="再扯一下extjs">再扯一下extjs</a></li><li><a href="http://www.coderhome.net/zifa/archives/128" title="一个关于项目管理的通俗讲解">一个关于项目管理的通俗讲解</a></li><li><a href="http://www.coderhome.net/zifa/archives/172" title="JS Try&#8230;Catch">JS Try&#8230;Catch</a></li><li><a href="http://www.coderhome.net/zifa/archives/561" title=" js中鼠标滚轮事件详解."> js中鼠标滚轮事件详解.</a></li><li><a href="http://www.coderhome.net/zifa/archives/667" title="重要的不是语言，是思想">重要的不是语言，是思想</a></li><li><a href="http://www.coderhome.net/zifa/archives/726" title="开放型博客程序中应该实现的几个接口">开放型博客程序中应该实现的几个接口</a></li><li><a href="http://www.coderhome.net/zifa/archives/41" title="明天要开始新的工作了">明天要开始新的工作了</a></li><li><a href="http://www.coderhome.net/zifa/archives/214" title="myois demo and download">myois demo and download</a></li><li><a href="http://www.coderhome.net/zifa/archives/741" title="php函数unserialize数据返回false问题分析">php函数unserialize数据返回false问题分析</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/732/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>常用正则表达式</title>
		<link>http://www.coderhome.net/zifa/archives/730</link>
		<comments>http://www.coderhome.net/zifa/archives/730#comments</comments>
		<pubDate>Sun, 11 Jul 2010 19:24:07 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[PHP相关]]></category>
		<category><![CDATA[正则表达式]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=730</guid>
		<description><![CDATA[
&#8220;^\d+$&#8221;　　//非负整数（正整数 + 0）
&#8220;^[0-9]*[1-9][0-9]*$&#8221;　　//正整数
&#8220;^((-\d+)&#124;(0+))$&#8221;　　//非正整数（负整数 + 0）
&#8220;^-[0-9]*[1-9][0-9]*$&#8221;　　//负整数
&#8220;^-?\d+$&#8221;　　　　//整数
&#8220;^\d+(\.\d+)?$&#8221;　　//非负浮点数（正浮点数 + 0）
&#8220;^(([0-9]+\.[0-9]*[1-9][0-9]*)&#124;([0-9]*[1-9][0-9]*\.[0-9]+)&#124;([0-9]*[1-9][0-9]*))$&#8221; 　　//正浮点数
&#8220;^((-\d+(\.\d+)?)&#124;(0+(\.0+)?))$&#8221;　　//非正浮点数（负浮点数 + 0）
&#8220;^(-(([0-9]+\.[0-9]*[1-9][0-9]*)&#124;([0-9]*[1-9][0-9]*\.[0-9]+)&#124;([0-9]*[1-9][0-9]*)))$&#8221; 　　//负浮点数
&#8220;^(-?\d+)(\.\d+)?$&#8221;　　//浮点数
&#8220;^[A-Za-z]+$&#8221;　　//由26个英文字母组成的字符串
&#8220;^[A-Z]+$&#8221;　　//由26个英文字母的大写组成的字符串
&#8220;^[a-z]+$&#8221;　　//由26个英文字母的小写组成的字符串
&#8220;^[A-Za-z0-9]+$&#8221;　　//由数字和26个英文字母组成的字符串
&#8220;^\w+$&#8221;　　//由数字、26个英文字母或者下划线组成的字符串
&#8220;^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$&#8221;　　　　//email地址
&#8220;^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$&#8221;　　//url
/^(d{2}&#124;d{4})-((0([1-9]{1}))&#124;(1[1&#124;2]))-(([0-2]([1-9]{1}))&#124;(3[0&#124;1]))$/    //  年-月-日
/^((0([1-9]{1}))&#124;(1[1&#124;2]))/(([0-2]([1-9]{1}))&#124;(3[0&#124;1]))/(d{2}&#124;d{4})$/    // 月/日/年
&#8220;^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)&#124;(([w-]+.)+))([a-zA-Z]{2,4}&#124;[0-9]{1,3})(]?)$&#8221;    //Emil
/^((\+?[0-9]{2,4}\-[0-9]{3,4}\-)&#124;([0-9]{3,4}\-))?([0-9]{7,8})(\-[0-9]+)?$/      //电话号码
&#8220;^(d{1,2}&#124;1dd&#124;2[0-4]d&#124;25[0-5]).(d{1,2}&#124;1dd&#124;2[0-4]d&#124;25[0-5]).(d{1,2}&#124;1dd&#124;2[0-4]d&#124;25[0-5]).(d{1,2}&#124;1dd&#124;2[0-4]d&#124;25[0-5])$&#8221;    //IP地址
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
匹配空行的正则表达式：\n[\s&#124; ]*\r
匹配HTML标记的正则表达式：/&#60;(.*)&#62;.*&#60;\/\1&#62;&#124;&#60;(.*) \/&#62;/
匹配首尾空格的正则表达式：(^\s*)&#124;(\s*$)
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址URL的正则表达式：^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
匹配国内电话号码：(\d{3}-&#124;\d{4}-)?(\d{8}&#124;\d{7})?
匹配腾讯QQ号：^[1-9]*[1-9][0-9]*$
元字符及其在正则表达式上下文中的行为：
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的Multiline 属性，^ 也匹配 ’\n’ 或 ’\r’ 之后的位置。
$ 匹配输入字符串的结束位置。如果设置了 RegExp 对象的Multiline 属性，$ 也匹配 ’\n’ 或 ’\r’ 之前的位置。
* 匹配前面的子表达式零次或多次。
+ 匹配前面的子表达式一次或多次。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。? 等价于 {0,1}。
{n} n 是一个非负整数，匹配确定的n 次。
{n,} [...]]]></description>
			<content:encoded><![CDATA[<div>
<p>&#8220;^\d+$&#8221;　　//非负整数（正整数 + 0）<br />
&#8220;^[0-9]*[1-9][0-9]*$&#8221;　　//正整数<br />
&#8220;^((-\d+)|(0+))$&#8221;　　//非正整数（负整数 + 0）<br />
&#8220;^-[0-9]*[1-9][0-9]*$&#8221;　　//负整数<br />
&#8220;^-?\d+$&#8221;　　　　//整数<br />
&#8220;^\d+(\.\d+)?$&#8221;　　//非负浮点数（正浮点数 + 0）<br />
&#8220;^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$&#8221; 　　//正浮点数<br />
&#8220;^((-\d+(\.\d+)?)|(0+(\.0+)?))$&#8221;　　//非正浮点数（负浮点数 + 0）<br />
&#8220;^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$&#8221; 　　//负浮点数<br />
&#8220;^(-?\d+)(\.\d+)?$&#8221;　　//浮点数<br />
&#8220;^[A-Za-z]+$&#8221;　　//由26个英文字母组成的字符串<br />
&#8220;^[A-Z]+$&#8221;　　//由26个英文字母的大写组成的字符串<br />
&#8220;^[a-z]+$&#8221;　　//由26个英文字母的小写组成的字符串<br />
&#8220;^[A-Za-z0-9]+$&#8221;　　//由数字和26个英文字母组成的字符串<br />
&#8220;^\w+$&#8221;　　//由数字、26个英文字母或者下划线组成的字符串<br />
&#8220;^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$&#8221;　　　　//email地址<br />
&#8220;^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$&#8221;　　//url<br />
/^(d{2}|d{4})-((0([1-9]{1}))|(1[1|2]))-(([0-2]([1-9]{1}))|(3[0|1]))$/    //  年-月-日<br />
/^((0([1-9]{1}))|(1[1|2]))/(([0-2]([1-9]{1}))|(3[0|1]))/(d{2}|d{4})$/    // 月/日/年<br />
&#8220;^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$&#8221;    //Emil<br />
/^((\+?[0-9]{2,4}\-[0-9]{3,4}\-)|([0-9]{3,4}\-))?([0-9]{7,8})(\-[0-9]+)?$/      //电话号码<br />
&#8220;^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$&#8221;    //IP地址<span id="more-730"></span></p>
<p>匹配中文字符的正则表达式： [\u4e00-\u9fa5]<br />
匹配双字节字符(包括汉字在内)：[^\x00-\xff]<br />
匹配空行的正则表达式：\n[\s| ]*\r<br />
匹配HTML标记的正则表达式：/&lt;(.*)&gt;.*&lt;\/\1&gt;|&lt;(.*) \/&gt;/<br />
匹配首尾空格的正则表达式：(^\s*)|(\s*$)<br />
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*<br />
匹配网址URL的正则表达式：^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$<br />
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$<br />
匹配国内电话号码：(\d{3}-|\d{4}-)?(\d{8}|\d{7})?<br />
匹配腾讯QQ号：^[1-9]*[1-9][0-9]*$<br />
元字符及其在正则表达式上下文中的行为：</p>
<p>\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。</p>
<p>^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的Multiline 属性，^ 也匹配 ’\n’ 或 ’\r’ 之后的位置。</p>
<p>$ 匹配输入字符串的结束位置。如果设置了 RegExp 对象的Multiline 属性，$ 也匹配 ’\n’ 或 ’\r’ 之前的位置。</p>
<p>* 匹配前面的子表达式零次或多次。</p>
<p>+ 匹配前面的子表达式一次或多次。+ 等价于 {1,}。</p>
<p>? 匹配前面的子表达式零次或一次。? 等价于 {0,1}。</p>
<p>{n} n 是一个非负整数，匹配确定的n 次。</p>
<p>{n,} n 是一个非负整数，至少匹配n 次。</p>
<p>{n,m} m 和 n 均为非负整数，其中n &lt;= m。最少匹配 n 次且最多匹配 m 次。在逗号和两个数之间不能有空格。</p>
<p>? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m})  后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。</p>
<p>. 匹配除 &#8220;\n&#8221; 之外的任何单个字符。要匹配包括 ’\n’ 在内的任何字符，请使用象 ’[.\n]’ 的模式。<br />
(pattern) 匹配pattern 并获取这一匹配。</p>
<p>(?:pattern) 匹配pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。</p>
<p>(?=pattern) 正向预查，在任何匹配 pattern  的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。</p>
<p>(?!pattern) 负向预查，与(?=pattern)作用相反</p>
<p>x|y 匹配 x 或 y。</p>
<p>[xyz] 字符集合。</p>
<p>[^xyz] 负值字符集合。</p>
<p>[a-z] 字符范围，匹配指定范围内的任意字符。</p>
<p>[^a-z] 负值字符范围，匹配任何不在指定范围内的任意字符。</p>
<p>\b 匹配一个单词边界，也就是指单词和空格间的位置。</p>
<p>\B 匹配非单词边界。</p>
<p>\cx 匹配由x指明的控制字符。</p>
<p>\d 匹配一个数字字符。等价于 [0-9]。</p>
<p>\D 匹配一个非数字字符。等价于 [^0-9]。</p>
<p>\f 匹配一个换页符。等价于 \x0c 和 \cL。</p>
<p>\n 匹配一个换行符。等价于 \x0a 和 \cJ。</p>
<p>\r 匹配一个回车符。等价于 \x0d 和 \cM。</p>
<p>\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。</p>
<p>\S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。</p>
<p>\t 匹配一个制表符。等价于 \x09 和 \cI。</p>
<p>\v 匹配一个垂直制表符。等价于 \x0b 和 \cK。</p>
<p>\w 匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’。</p>
<p>\W 匹配任何非单词字符。等价于 ’[^A-Za-z0-9_]’。</p>
<p>\xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。</p>
<p>\num 匹配 num，其中num是一个正整数。对所获取的匹配的引用。</p>
<p>\n 标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字  (0-7)，则 n 为一个八进制转义值。</p>
<p>\nm 标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm  个获取得子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若  n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。</p>
<p>\nml 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。</p>
<p>\un 匹配 n，其中 n 是一个用四个十六进制数字表示的Unicode字符。</p>
<p>匹配中文字符的正则表达式： [u4e00-u9fa5]</p>
<p>匹配双字节字符(包括汉字在内)：[^x00-xff]</p>
<p>匹配空行的正则表达式：n[s| ]*r</p>
<p>匹配HTML标记的正则表达式：/&lt;(.*)&gt;.*&lt;/1&gt;|&lt;(.*) /&gt;/</p>
<p>匹配首尾空格的正则表达式：(^s*)|(s*$)</p>
<p>匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*</p>
<p>匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&amp;=]*)?</p>
<p>利用正则表达式限制网页表单里的文本框输入内容：</p>
<p>用正则表达式限制只能输入中文：onkeyup=&#8221;value=value.replace(/[^u4E00-u9FA5]/g,&#8221;)&#8221;  onbeforepaste=&#8221;clipboardData.setData(&#8217;text&#8217;,clipboardData.getData(&#8217;text&#8217;).replace(/[^u4E00-u9FA5]/g,&#8221;))&#8221;</p>
<p>用正则表达式限制只能输入全角字符： onkeyup=&#8221;value=value.replace(/[^uFF00-uFFFF]/g,&#8221;)&#8221;   onbeforepaste=&#8221;clipboardData.setData(&#8217;text&#8217;,clipboardData.getData(&#8217;text&#8217;).replace(/[^uFF00-uFFFF]/g,&#8221;))&#8221;</p>
<p>用正则表达式限制只能输入数字：onkeyup=&#8221;value=value.replace(/[^d]/g,&#8221;)  &#8220;onbeforepaste=&#8221;clipboardData.setData(&#8217;text&#8217;,clipboardData.getData(&#8217;text&#8217;).replace(/[^d]/g,&#8221;))&#8221;</p>
<p>用正则表达式限制只能输入数字和英文：onkeyup=&#8221;value=value.replace(/[W]/g,&#8221;)  &#8220;onbeforepaste=&#8221;clipboardData.setData(&#8217;text&#8217;,clipboardData.getData(&#8217;text&#8217;).replace(/[^d]/g,&#8221;))&#8221;</p>
<p>=========常用正则表达式</p>
<p>匹配中文字符的正则表达式： [\u4e00-\u9fa5]</p>
<p>匹配双字节字符(包括汉字在内)：[^\x00-\xff]</p>
<p>匹配空行的正则表达式：\n[\s| ]*\r</p>
<p>匹配HTML标记的正则表达式：/&lt;(.*)&gt;.*&lt;\/\1&gt;|&lt;(.*) \/&gt;/</p>
<p>匹配首尾空格的正则表达式：(^\s*)|(\s*$)</p>
<p>匹配IP地址的正则表达式：/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //</p>
<p>匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*</p>
<p>匹配网址URL的正则表达式：http://(/[\w-]+\.)+[\w-]+(/[\w- ./?%&amp;=]*)?</p>
<p>sql语句：^(select|drop|delete|create|update|insert).*$</p>
<p>1、非负整数：^\d+$</p>
<p>2、正整数：^[0-9]*[1-9][0-9]*$</p>
<p>3、非正整数：^((-\d+)|(0+))$</p>
<p>4、负整数：^-[0-9]*[1-9][0-9]*$</p>
<p>5、整数：^-?\d+$</p>
<p>6、非负浮点数：^\d+(\.\d+)?$</p>
<p>7、正浮点数：^((0-9)+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)| ([0-9]*[1-9][0-9]*))$</p>
<p>8、非正浮点数：^((-\d+\.\d+)?)|(0+(\.0+)?))$</p>
<p>9、负浮点数：^(-((正浮点数正则式)))$</p>
<p>10、英文字符串：^[A-Za-z]+$</p>
<p>11、英文大写串：^[A-Z]+$</p>
<p>12、英文小写串：^[a-z]+$</p>
<p>13、英文字符数字串：^[A-Za-z0-9]+$</p>
<p>14、英数字加下划线串：^\w+$</p>
<p>15、E-mail地址：^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$</p>
<p>16、URL：^[a-zA-Z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\s*)?$<br />
或：^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&amp;_~`@[\]\&#8217;:+!]*([^&amp; lt;&gt;\"\"])*$</p>
<p>17、邮政编码：^[1-9]\d{5}$</p>
<p>18、中文：^[\u0391-\uFFE5]+$</p>
<p>19、电话号码：^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9] \d{6,7}(\-\d{1,4})?$</p>
<p>20、手机号码：^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$</p>
<p>21、双字节字符(包括汉字在内)：^\x00-\xff</p>
<p>22、匹配首尾空格：(^\s*)|(\s*$)（像vbscript那样的trim函数）</p>
<p>23、匹配HTML标记：&lt;(.*)&gt;.*&lt;\/\1&gt;|&lt;(.*) \/&gt;</p>
<p>24、匹配空行：\n[\s| ]*\r</p>
<p>25、提取信息中的网络链接：(h|H)(r|R)(e|E)(f|F) *= *(&#8217;|&#8221;)?(\w|\\|\/|\.)+(&#8217;|&#8221;|  *|&gt;)?</p>
<p>26、提取信息中的邮件地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*</p>
<p>27、提取信息中的图片链接：(s|S)(r|R)(c|C) *= *(&#8217;|&#8221;)?(\w|\\|\/|\.)+(&#8217;|&#8221;| *|&gt;)?</p>
<p>28、提取信息中的IP地址：(\d+)\.(\d+)\.(\d+)\.(\d+)</p>
<p>29、提取信息中的中国手机号码：(86)*0*13\d{9}</p>
<p>30、提取信息中的中国固定电话号码：(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}</p>
<p>31、提取信息中的中国电话号码（包括移动和固定电话）：(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}</p>
<p>32、提取信息中的中国邮政编码：[1-9]{1}(\d+){5}</p>
<p>33、提取信息中的浮点数（即小数）：(-?\d*)\.?\d+</p>
<p>34、提取信息中的任何数字 ：(-?\d*)(\.\d+)?</p>
<p>35、IP：(\d+)\.(\d+)\.(\d+)\.(\d+)</p>
<p>36、电话区号：/^0\d{2,3}$/</p>
<p>37、腾讯QQ号：^[1-9]*[1-9][0-9]*$</p>
<p>38、帐号(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$</p>
<p>39、中文、英文、数字及下划线：^[\u4e00-\u9fa5_a-zA-Z0-9]+$</p></div>
<h3  class="related_post_title">随机日志</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/68" title="网站通行证方案-单点登录SSO">网站通行证方案-单点登录SSO</a></li><li><a href="http://www.coderhome.net/zifa/archives/291" title="Bug Defender &#8211; 小强向前冲(太有意思推荐)">Bug Defender &#8211; 小强向前冲(太有意思推荐)</a></li><li><a href="http://www.coderhome.net/zifa/archives/251" title="地震生存简明手册  ">地震生存简明手册  </a></li><li><a href="http://www.coderhome.net/zifa/archives/390" title="apc和xdebug使用小计">apc和xdebug使用小计</a></li><li><a href="http://www.coderhome.net/zifa/archives/30" title="最近几个郁闷的问题的总结">最近几个郁闷的问题的总结</a></li><li><a href="http://www.coderhome.net/zifa/archives/568" title="思考先行，路才可以走的更远">思考先行，路才可以走的更远</a></li><li><a href="http://www.coderhome.net/zifa/archives/55" title="你们凭什么拿孩子当工具">你们凭什么拿孩子当工具</a></li><li><a href="http://www.coderhome.net/zifa/archives/338" title="【进阶】文件缓存数据类使用">【进阶】文件缓存数据类使用</a></li><li><a href="http://www.coderhome.net/zifa/archives/667" title="重要的不是语言，是思想">重要的不是语言，是思想</a></li><li><a href="http://www.coderhome.net/zifa/archives/225" title="从php.net摘掉中文翻译链接说起">从php.net摘掉中文翻译链接说起</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/730/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>piwik 网站分析系统</title>
		<link>http://www.coderhome.net/zifa/archives/728</link>
		<comments>http://www.coderhome.net/zifa/archives/728#comments</comments>
		<pubDate>Mon, 28 Jun 2010 13:08:31 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[PHP相关]]></category>
		<category><![CDATA[piwik]]></category>
		<category><![CDATA[流量分析]]></category>
		<category><![CDATA[网站分析系统]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=728</guid>
		<description><![CDATA[piwik 网站分析系统是一个以Google Analytics 为目标的网站分析工具，官方网址为 http://piwik.org/  前身是phpMyVisit。
目前版本的piwik可以很好的满足小流量站点使用，在大型站点的使用上还有些小问题。基本上一个月更新一次修正版本，改正一些错误，提供实用的功 能。在piwik dev trac里可以清晰的看到roadmap 和tickets 对未来的规划很清晰。
大部分人使用Google Analytics 即可满足网站分析的需要。貌似流量太大会有所限制，但是豆瓣现在也在使用Google  Analytics
小部分人使用收费的网站分析软件。
piwik适合一些需要自建网站分析系统，又不需要付费软件的人使用。
piwik可以看到哪些数据？
1.可定制的组件和组件位置的控制台，将你关心的数据在一个页面内显示出来。
2.访客客户端信息，包括地理位置，浏览器类型，屏幕分辨率…… 访问客户端时间和服务器时间，Engagement 访问记录 等
3.页面访问量排行、进入页面、退出页面、出站地址等
4.访问来源概况、搜索引擎和关键字状况、来源网站等
5.目标，自定义站点目标并监视其完成量。
piwik 的live 可以实时看到用户访问  十分的吸引人。
原文：http://marc.f2e.org/2010/06/26/about-piwik/
随机日志JS HTML DOM使用wordpress中的函数一封天才的辞职信PHP 4最后一个版本发布 请系统管理员和开发者升级至PHP5JS 怎样使用wordpress研究之js库集合JS Date第一天新工作无聊JS For 循环短信合并程序]]></description>
			<content:encoded><![CDATA[<p>piwik 网站分析系统是一个以Google Analytics 为目标的网站分析工具，官方网址为 http://piwik.org/  前身是phpMyVisit。</p>
<p>目前版本的piwik可以很好的满足小流量站点使用，在大型站点的使用上还有些小问题。基本上一个月更新一次修正版本，改正一些错误，提供实用的功 能。在piwik dev trac里可以清晰的看到roadmap 和tickets 对未来的规划很清晰。</p>
<p>大部分人使用Google Analytics 即可满足网站分析的需要。貌似流量太大会有所限制，但是豆瓣现在也在使用Google  Analytics</p>
<p>小部分人使用收费的网站分析软件。</p>
<p>piwik适合一些需要自建网站分析系统，又不需要付费软件的人使用。</p>
<p><strong>piwik可以看到哪些数据？</strong></p>
<p>1.可定制的组件和组件位置的控制台，将你关心的数据在一个页面内显示出来。</p>
<p>2.访客客户端信息，包括地理位置，浏览器类型，屏幕分辨率…… 访问客户端时间和服务器时间，Engagement 访问记录 等</p>
<p>3.页面访问量排行、进入页面、退出页面、出站地址等</p>
<p>4.访问来源概况、搜索引擎和关键字状况、来源网站等</p>
<p>5.目标，自定义站点目标并监视其完成量。</p>
<p>piwik 的live 可以实时看到用户访问  十分的吸引人。</p>
<p>原文：<a href="http://marc.f2e.org/2010/06/26/about-piwik/" target="_blank">http://marc.f2e.org/2010/06/26/about-piwik/</a></p>
<h3  class="related_post_title">随机日志</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/35" title="今天解决一问题,拿出来分享">今天解决一问题,拿出来分享</a></li><li><a href="http://www.coderhome.net/zifa/archives/294" title="swfuplad的好处与缺点">swfuplad的好处与缺点</a></li><li><a href="http://www.coderhome.net/zifa/archives/452" title="坦克大战箱子游戏优化">坦克大战箱子游戏优化</a></li><li><a href="http://www.coderhome.net/zifa/archives/185" title="JS Cookies">JS Cookies</a></li><li><a href="http://www.coderhome.net/zifa/archives/249" title="终于自己完成一次linux+apache+php+mysql的安装">终于自己完成一次linux+apache+php+mysql的安装</a></li><li><a href="http://www.coderhome.net/zifa/archives/130" title="关于jquery我来写一点">关于jquery我来写一点</a></li><li><a href="http://www.coderhome.net/zifa/archives/658" title=" MySQL 之Explain  "> MySQL 之Explain  </a></li><li><a href="http://www.coderhome.net/zifa/archives/51" title="最新版本更新了FormValid 0.4(快速表单验证实现程序)">最新版本更新了FormValid 0.4(快速表单验证实现程序)</a></li><li><a href="http://www.coderhome.net/zifa/archives/260" title="关于验证码在点击输入框时才显示的好处">关于验证码在点击输入框时才显示的好处</a></li><li><a href="http://www.coderhome.net/zifa/archives/366" title="Jquery1.2.6源码分析">Jquery1.2.6源码分析</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/728/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>开放型博客程序中应该实现的几个接口</title>
		<link>http://www.coderhome.net/zifa/archives/726</link>
		<comments>http://www.coderhome.net/zifa/archives/726#comments</comments>
		<pubDate>Mon, 28 Jun 2010 12:55:54 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[IT挨踢]]></category>
		<category><![CDATA[博客]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=726</guid>
		<description><![CDATA[互联网上的应用越发的五花八门，特别是进入web2.0以后，互联网更是把各地的人们紧紧的联系在了一起，为了掌握资讯，人们大量的使用搜索引擎来寻找自己想要知道的，自从有了RSS，比如我，就喜欢用google reader来订阅各种新鲜的资讯、先进的技术资源，这使得信息的呈现方式多样化，人们可以更为个性的、以更为适合自己的方式来获取和阅读资讯。
博客程序的出现，已有很多年的时间，然而未见其有所衰退，网民们还是很热衷于写博客，阅读博客，这还是一个很个性、独立的个人空间，我们可以写任何自己想写的东西。为了让自己写的东西更容易被别人找到，博客程序需要搜索引擎友好。搜索引擎技术也是不断进步，发展至今，其已经不仅仅是靠蜘蛛去抓取内容了，他们有了更好的技术，今天，就单独讲讲博客搜索吧！
百度开放平台的推出，确实是一个很大的进步，他的阿拉丁接口相当不错，从用户的角度看，可以不用点击进入目标网站，直接在搜索引擎即可了解到他想要知道的讯息。同时，它也支持blog ping接口了，该接口标准和google 的blog ping是一样的，数据格式没有什么不同。这些API接口的推出，无疑是大大加快文章的收录速度，新鲜出炉的文字能够更快更广的发布传播出去，当然，前不久，google又推出了PubSubHubbub协议，这更是个伟大的创举，其实现了实时搜索！也就是XXX在微博上刚刚说了一句话，google通过使用PubSubHubbub就能马上呈现给对此话题感兴趣的用户。在技术上，我们一贯的承认,google是走在前列的。
从开放型博客程序的角度出发，那么以上讲到的都是主动技术，被动技术除了日志页面内容之外呢，还有RSS、RDF、Atom等等格式的被动呈现，用户可以在订阅了这些源之后，不用打开主页，只要在自己的阅读器里就可以浏览诸多的博客内容，感兴趣的可以再点击了解详细，发表评论等等，并且从阅读器可以一口气看很多的博客，而不用一个一个的来回切换，这是有效率的阅读方式。
所以，开放型博客程序已经不仅仅是将日志内容简单的显示出来完事的东西了，她需要默默工作的东西还有很多，除了以上的google ping,百度ping，RSS,RDF,Atom，甚至还需要更新sitemap, 虽然很多人认为这是SEO，可是你的博客程序要显得有足够的开放性，这些都应该去实现，因为你根本不知道你的用户以哪种方式来阅读你发表的文字。是的，请相信这一点，就像我以前说的，多做一些，再多做一些。
随机日志如何让网页广告不让遨游（maxthon）等拦截 Firfox3进阶用户指南怎样把自己培养成为一个优秀的程序员今天研究了一下div+css的高度自适应问题复制功能跨浏览器实现 js中鼠标滚轮事件详解.实现个人成功的17条法则（拿破仑希尔）jQuery性能优化指南25个让工作更有效率更快乐的窍门恶搞大话西游]]></description>
			<content:encoded><![CDATA[<p>互联网上的应用越发的五花八门，特别是进入web2.0以后，互联网更是把各地的人们紧紧的联系在了一起，为了掌握资讯，人们大量的使用搜索引擎来寻找自己想要知道的，自从有了RSS，比如我，就喜欢用google reader来订阅各种新鲜的资讯、先进的技术资源，这使得信息的呈现方式多样化，人们可以更为个性的、以更为适合自己的方式来获取和阅读资讯。</p>
<p>博客程序的出现，已有很多年的时间，然而未见其有所衰退，网民们还是很热衷于写博客，阅读博客，这还是一个很个性、独立的个人空间，我们可以写任何自己想写的东西。为了让自己写的东西更容易被别人找到，博客程序需要搜索引擎友好。搜索引擎技术也是不断进步，发展至今，其已经不仅仅是靠蜘蛛去抓取内容了，他们有了更好的技术，今天，就单独讲讲博客搜索吧！</p>
<p>百度开放平台的推出，确实是一个很大的进步，他的阿拉丁接口相当不错，从用户的角度看，可以不用点击进入目标网站，直接在搜索引擎即可了解到他想要知道的讯息。同时，它也支持blog ping接口了，该接口标准和google 的blog ping是一样的，数据格式没有什么不同。这些API接口的推出，无疑是大大加快文章的收录速度，新鲜出炉的文字能够更快更广的发布传播出去，当然，前不久，google又推出了PubSubHubbub协议，这更是个伟大的创举，其实现了实时搜索！也就是XXX在微博上刚刚说了一句话，google通过使用PubSubHubbub就能马上呈现给对此话题感兴趣的用户。在技术上，我们一贯的承认,google是走在前列的。</p>
<p>从开放型博客程序的角度出发，那么以上讲到的都是主动技术，被动技术除了日志页面内容之外呢，还有RSS、RDF、Atom等等格式的被动呈现，用户可以在订阅了这些源之后，不用打开主页，只要在自己的阅读器里就可以浏览诸多的博客内容，感兴趣的可以再点击了解详细，发表评论等等，并且从阅读器可以一口气看很多的博客，而不用一个一个的来回切换，这是有效率的阅读方式。</p>
<p>所以，开放型博客程序已经不仅仅是将日志内容简单的显示出来完事的东西了，她需要默默工作的东西还有很多，除了以上的google ping,百度ping，RSS,RDF,Atom，甚至还需要更新sitemap, 虽然很多人认为这是SEO，可是你的博客程序要显得有足够的开放性，这些都应该去实现，因为你根本不知道你的用户以哪种方式来阅读你发表的文字。是的，请相信这一点，就像我以前说的，多做一些，再多做一些。</p>
<h3  class="related_post_title">随机日志</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/632" title="PHP上传进度条深度解析">PHP上传进度条深度解析</a></li><li><a href="http://www.coderhome.net/zifa/archives/122" title="申请连接专用帖">申请连接专用帖</a></li><li><a href="http://www.coderhome.net/zifa/archives/399" title="google使用pdf来实现网页打印">google使用pdf来实现网页打印</a></li><li><a href="http://www.coderhome.net/zifa/archives/214" title="myois demo and download">myois demo and download</a></li><li><a href="http://www.coderhome.net/zifa/archives/173" title="JS Throw">JS Throw</a></li><li><a href="http://www.coderhome.net/zifa/archives/229" title="myois最近代码整理">myois最近代码整理</a></li><li><a href="http://www.coderhome.net/zifa/archives/269" title=" Firfox3进阶用户指南"> Firfox3进阶用户指南</a></li><li><a href="http://www.coderhome.net/zifa/archives/656" title="使用PHP调用MySQL的存储过程">使用PHP调用MySQL的存储过程</a></li><li><a href="http://www.coderhome.net/zifa/archives/413" title="用户其实不是真的想把鼠标移上来">用户其实不是真的想把鼠标移上来</a></li><li><a href="http://www.coderhome.net/zifa/archives/167" title="JS While 循环">JS While 循环</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/726/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>恶搞大话西游</title>
		<link>http://www.coderhome.net/zifa/archives/712</link>
		<comments>http://www.coderhome.net/zifa/archives/712#comments</comments>
		<pubDate>Sun, 27 Jun 2010 15:18:47 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[笑一笑]]></category>
		<category><![CDATA[273]]></category>
		<category><![CDATA[大话西游]]></category>
		<category><![CDATA[恶搞]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=712</guid>
		<description><![CDATA[
相关文章二手车搜索的设计改进分享]]></description>
			<content:encoded><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="align" value="middle" /><param name="src" value="http://player.youku.com/player.php/sid/XMTcyMzY1NjIw/v.swf" /><param name="quality" value="high" /><embed type="application/x-shockwave-flash" width="480" height="400" src="http://player.youku.com/player.php/sid/XMTcyMzY1NjIw/v.swf" quality="high" align="middle"></embed></object></p>
<h3  class="related_post_title">相关文章</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/695" title="二手车搜索的设计改进分享">二手车搜索的设计改进分享</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/712/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>404中的学问</title>
		<link>http://www.coderhome.net/zifa/archives/707</link>
		<comments>http://www.coderhome.net/zifa/archives/707#comments</comments>
		<pubDate>Sat, 26 Jun 2010 13:54:03 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[WEB技术]]></category>
		<category><![CDATA[404]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[流量引导]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=707</guid>
		<description><![CDATA[本周我的分享主题：404中的学问。
404的基本理解就是网页不存在，它是HTTP协议中的一个状态码。
最近需要通过404来解决一个问题，所以产生了一系列关于404的研究，总结一些小小收获分享出来：
1.即使你自定义了404的页面，但http头信息返回的一定要是404状态。这主要是对搜索引擎有关系，因为如果你网站产生较多页面时候但搜索引擎看到的是很多一样的正常页面，有可能会误被认为作弊。
2.404页面不要自动跳转，让用户来决定去向。
3.自定义404页面内容不要太小，否则浏览器不认。这个我可是吃过苦头了，就因为这个原因折腾了一天。http的数据分为header和content ，对于浏览器来说显示什么内容其实并不是header决定的而是content,也就是当header信息是404状态的时候，如果你输出的content有内容还应该象是一个页面，那浏览器就把你这个内容输出给用户，反之浏览就会把它默认的404页面显示给用户。
关于其它希望更多补充&#8230;
我们的404页面，做了这么几个工作：
1.识别图片，也就是说如果url是图片那我返回的是图片而不是html,这样就不会造成，假设你的网站有些图片被删除后网站上显示红X的不好体验。
2.重新生成静态页，在信息详细页如果静态页不存在可以在404页触发时被生成。
3.识别搜索引擎关键字，给用户更好的引导信息，也就是如果用户从搜索引擎进来的页面是不存在的，那么我们可以通过用户在搜索引擎输入的关键字提供我们网站的相关信息给用户，以防止用户直接流失，效果直接看下图：
百度的某个关键字搜索：
http://www.baidu.com/s?wd=%B3%F6%CA%DB+%C3%C0%C8%CB%B1%AA+%BA%DA

用户点击上图273的链接到达的下面的页面：

相关文章由图片SEO想起SEO没内容，别和我谈技术]]></description>
			<content:encoded><![CDATA[<p>本周我的分享主题：404中的学问。</p>
<p>404的基本理解就是网页不存在，它是HTTP协议中的一个状态码。</p>
<p>最近需要通过404来解决一个问题，所以产生了一系列关于404的研究，总结一些小小收获分享出来：</p>
<p>1.即使你自定义了404的页面，但http头信息返回的一定要是404状态。这主要是对搜索引擎有关系，因为如果你网站产生较多页面时候但搜索引擎看到的是很多一样的正常页面，有可能会误被认为作弊。</p>
<p>2.404页面不要自动跳转，让用户来决定去向。</p>
<p>3.自定义404页面内容不要太小，否则浏览器不认。这个我可是吃过苦头了，就因为这个原因折腾了一天。http的数据分为header和content ，对于浏览器来说显示什么内容其实并不是header决定的而是content,也就是当header信息是404状态的时候，如果你输出的content有内容还应该象是一个页面，那浏览器就把你这个内容输出给用户，反之浏览就会把它默认的404页面显示给用户。</p>
<p>关于其它希望更多补充&#8230;</p>
<p>我们的404页面，做了这么几个工作：</p>
<p>1.识别图片，也就是说如果url是图片那我返回的是图片而不是html,这样就不会造成，假设你的网站有些图片被删除后网站上显示红X的不好体验。</p>
<p>2.重新生成静态页，在信息详细页如果静态页不存在可以在404页触发时被生成。</p>
<p>3.识别搜索引擎关键字，给用户更好的引导信息，也就是如果用户从搜索引擎进来的页面是不存在的，那么我们可以通过用户在搜索引擎输入的关键字提供我们网站的相关信息给用户，以防止用户直接流失，效果直接看下图：</p>
<p>百度的某个关键字搜索：</p>
<p><a href="http://www.baidu.com/s?wd=%B3%F6%CA%DB+%C3%C0%C8%CB%B1%AA+%BA%DA" target="_blank">http://www.baidu.com/s?wd=%B3%F6%CA%DB+%C3%C0%C8%CB%B1%AA+%BA%DA</a></p>
<p><img class="alignnone size-full wp-image-708" title="baiduso273" src="http://www.coderhome.net/zifa/wp-content/uploads/2010/06/baiduso273.jpg" alt="baiduso273" width="514" height="292" /></p>
<p>用户点击上图273的链接到达的下面的页面：</p>
<p><img class="alignnone size-full wp-image-709" title="273404" src="http://www.coderhome.net/zifa/wp-content/uploads/2010/06/273404.jpg" alt="273404" width="652" height="488" /></p>
<h3  class="related_post_title">相关文章</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/687" title="由图片SEO想起">由图片SEO想起</a></li><li><a href="http://www.coderhome.net/zifa/archives/676" title="SEO没内容，别和我谈技术">SEO没内容，别和我谈技术</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/707/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>小小遥控起重机</title>
		<link>http://www.coderhome.net/zifa/archives/701</link>
		<comments>http://www.coderhome.net/zifa/archives/701#comments</comments>
		<pubDate>Fri, 25 Jun 2010 13:52:09 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[IT挨踢]]></category>
		<category><![CDATA[乐铺]]></category>
		<category><![CDATA[玩具]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=701</guid>
		<description><![CDATA[先来一张实物图片。

感谢乐铺的活动，给我免费得到这个小玩意的机会。
首先购物体验没啥好说的，网站简洁方便，用起来体验很好。要说什么时候开始关注乐铺我想几乎是它建站开始就关注了吧，因为Avenger可是PHP界的骨灰级人物。
至为选了这个玩具，也许是童心未泯吧 ：）
看似被我某些同事让为很幼稚的玩具，但玩起来还是挺有意思的，可以过路障，搬箱子，要玩的好还是要些技巧的，呵呵。刚开始我不少同事玩的还是不亦乐乎的。
但有个细节就是当我收到礼物迫不及待想完的时候，却没有电池。这个时候没有电池确实让人有点郁闷，呵呵。这个玩具需要的电池是9V电池一个 1.5V7号电池4个，这让我有点不解，所用的电池型号有两种感觉让人体验不好，当然这个是本产品本身的问题。但是关于店家是否要配电池这个问题我觉得最好可以配，即使可以加一点点价格在产品里，个人觉得拿到东西可以马上试用会体验比较好。当然个人愚见，因为这里如果影响定价其实问题确实比较复杂的，希望乐铺也考虑一下类似问题。
最后还是几张照片：



相关文章乐铺创意礼物免费送博主活动]]></description>
			<content:encoded><![CDATA[<p>先来一张实物图片。</p>
<p><img class="alignnone size-medium wp-image-702" title="IMAGE_244" src="http://www.coderhome.net/zifa/wp-content/uploads/2010/06/IMAGE_244-300x225.jpg" alt="IMAGE_244" width="300" height="225" /></p>
<p>感谢<a href="http://www.lepu.com" target="_blank">乐铺</a>的活动，给我免费得到这个<a href="http://www.lepu.com/879">小玩意</a>的机会。</p>
<p>首先购物体验没啥好说的，网站简洁方便，用起来体验很好。要说什么时候开始关注乐铺我想几乎是它建站开始就关注了吧，因为<a href="http://avenger.name/" target="_blank">Avenger</a>可是PHP界的骨灰级人物。</p>
<p>至为选了这个玩具，也许是童心未泯吧 ：）</p>
<p>看似被我某些同事让为很幼稚的玩具，但玩起来还是挺有意思的，可以过路障，搬箱子，要玩的好还是要些技巧的，呵呵。刚开始我不少同事玩的还是不亦乐乎的。</p>
<p>但有个细节就是当我收到礼物迫不及待想完的时候，却没有电池。这个时候没有电池确实让人有点郁闷，呵呵。这个玩具需要的电池是9V电池一个 1.5V7号电池4个，这让我有点不解，所用的电池型号有两种感觉让人体验不好，当然这个是本产品本身的问题。但是关于店家是否要配电池这个问题我觉得最好可以配，即使可以加一点点价格在产品里，个人觉得拿到东西可以马上试用会体验比较好。当然个人愚见，因为这里如果影响定价其实问题确实比较复杂的，希望乐铺也考虑一下类似问题。</p>
<p>最后还是几张照片：</p>
<p><img class="alignnone size-medium wp-image-703" src="http://www.coderhome.net/zifa/wp-content/uploads/2010/06/IMAGE_224-300x225.jpg" alt="" width="300" height="225" /></p>
<p><img class="alignnone size-medium wp-image-704" title="IMAGE_245" src="http://www.coderhome.net/zifa/wp-content/uploads/2010/06/IMAGE_245-300x225.jpg" alt="IMAGE_245" width="300" height="225" /></p>
<p><img class="alignnone size-medium wp-image-705" title="IMAGE_247" src="http://www.coderhome.net/zifa/wp-content/uploads/2010/06/IMAGE_247-300x225.jpg" alt="IMAGE_247" width="300" height="225" /></p>
<h3  class="related_post_title">相关文章</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/699" title="乐铺创意礼物免费送博主活动">乐铺创意礼物免费送博主活动</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/701/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>乐铺创意礼物免费送博主活动</title>
		<link>http://www.coderhome.net/zifa/archives/699</link>
		<comments>http://www.coderhome.net/zifa/archives/699#comments</comments>
		<pubDate>Fri, 18 Jun 2010 01:18:57 +0000</pubDate>
		<dc:creator>zifa</dc:creator>
				<category><![CDATA[IT挨踢]]></category>
		<category><![CDATA[乐铺]]></category>
		<category><![CDATA[博客营销]]></category>

		<guid isPermaLink="false">http://www.coderhome.net/zifa/?p=699</guid>
		<description><![CDATA[原loopo.cn 乐铺在收购新域名 lepu.com之后，搬迁到武汉开始新的发展。最近第一轮推 广推出了一个活动，只要是有博客的朋友，都能参与，很简单，报名通过之后即可索取乐铺网站上任意一个礼品，再收到礼品之后写一篇文章描述体验过程即可。
关注乐铺已经几年了，所以我也赶紧报名参加试试。
本博客虽然更新“很”不频繁，但是从2004开博至今从未停止过，可以说是我的精神图腾(夸张了一点)。因为本人没啥名气，所以至今 feedsky、FeedBurner订阅人数加起来也就200左右。不过PR值倒是有3。
另外，对乐铺的创始人兼网站开发人员 Avenger 比较欣赏，低调专注，技术也很不错，是国内phper最早的一批，曾经的超越php帮助了很多phper。
之前Avenger都是业余时间在开发乐铺，现在能找到合作伙伴出来全职创业，勇气可嘉，祝愿乐铺能有大发展。
本篇转自：http://xinple.org/?p=386，因为好多感受和我一样，所以就转过来了。
相关文章小小遥控起重机]]></description>
			<content:encoded><![CDATA[<p>原loopo.cn <a href="http://lepu.com/" target="_blank">乐铺</a>在收购新域名 <a href="http://lepu.com/" target="_blank">lepu.com</a>之后，搬迁到武汉开始新的发展。最近第一轮推 广推出了一个活动，只要是有博客的朋友，都能参与，很简单，报名通过之后即可索取乐铺网站上任意一个礼品，再收到礼品之后写一篇文章描述体验过程即可。</p>
<p>关注乐铺已经几年了，所以我也赶紧报名参加试试。</p>
<p>本博客虽然更新“很”不频繁，但是从2004开博至今从未停止过，可以说是我的精神图腾(夸张了一点)。因为本人没啥名气，所以至今 feedsky、FeedBurner订阅人数加起来也就200左右。不过PR值倒是有3。</p>
<p>另外，对乐铺的创始人兼网站开发人员 <a href="http://avenger.name/" target="_blank">Avenger</a> 比较欣赏，低调专注，技术也很不错，是国内phper最早的一批，曾经的<a href="http://www.phpe.net/" target="_blank">超越php</a>帮助了很多phper。</p>
<p>之前Avenger都是业余时间在开发乐铺，现在能找到合作伙伴出来全职创业，勇气可嘉，祝愿乐铺能有大发展。</p>
<p>本篇转自：<a href="http://xinple.org/?p=386" target="_blank">http://xinple.org/?p=386</a>，因为好多感受和我一样，所以就转过来了。</p>
<h3  class="related_post_title">相关文章</h3><ul class="related_post"><li><a href="http://www.coderhome.net/zifa/archives/701" title="小小遥控起重机">小小遥控起重机</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.coderhome.net/zifa/archives/699/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
