<?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>King&#039;s blog &#124; 月亮上的妖精 &#187; IT互联网</title>
	<atom:link href="http://blog.king51.com/category/tech/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.king51.com</link>
	<description>什么样的生活，我愿意日复一日过，不厌倦。</description>
	<lastBuildDate>Tue, 07 Sep 2010 04:40:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>ITbloger（It 博客人）</title>
		<link>http://blog.king51.com/2010-08-31/itbloger-it-blog-person/</link>
		<comments>http://blog.king51.com/2010-08-31/itbloger-it-blog-person/#comments</comments>
		<pubDate>Tue, 31 Aug 2010 09:02:57 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[ITbloge.com]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1490</guid>
		<description><![CDATA[ITbloger（It 博客人）是一个以分享IT类博客和优秀网站为主的社区，您可以点击这里提交您的站点或者您喜欢的网站。

我们期待用最优秀的用户体验为用户带来最大的价值。

如需联系ITbloger（It 博客人），请点击这里。

]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.itbloger.com/">ITbloger（It 博客人）</a>是一个以分享IT类博客和优秀网站为主的社区，您可以<a href="http://www.itbloger.com/submit-site/">点击这里</a>提交您的站点或者您喜欢的网站。</p>
<p>我们期待用最优秀的用户体验为用户带来最大的价值。</p>
<p>如需联系<a href="http://www.itbloger.com/">ITbloger（It 博客人）</a>，请<a href="http://www.itbloger.com/contact/">点击这里</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-08-31/itbloger-it-blog-person/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>wordpress工作原理</title>
		<link>http://blog.king51.com/2010-08-04/wordpress-work/</link>
		<comments>http://blog.king51.com/2010-08-04/wordpress-work/#comments</comments>
		<pubDate>Wed, 04 Aug 2010 08:13:15 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1453</guid>
		<description><![CDATA[WP初始化的过程：当你输入 http://XXX.com/wordpress 对wordpress进行初始化时，wordpress默认会找

根目录下的index.php页面，看一下index.php页面。



<span class="readmore"><a href="http://blog.king51.com/2010-08-04/wordpress-work/" title="wordpress工作原理">阅读全文——共1655字</a></span>]]></description>
			<content:encoded><![CDATA[<p>WP初始化的过程：当你输入 http://XXX.com/wordpress 对wordpress进行初始化时，wordpress默认会找<br />
根目录下的index.php页面，看一下index.php页面。<br />
<code><br />
define('WP_USE_THEMES', true);<br />
/** Loads the WordPress Environment and Template */<br />
require('./wp-blog-header.php'); ---把/wp-blog-header.php包含进来<br />
</code></p>
<p>你会发现，它会去调用根目录下的wp-blog-header.php，我们继续看wp-blog-header.php。<br />
<code><br />
if ( !isset($wp_did_header) ) {<br />
$wp_did_header = true;<br />
require_once( dirname(__FILE__) . '/wp-load.php' );  ---加载wp-load.php<br />
wp();  ---加载function WP();<br />
require_once( ABSPATH . WPINC . '/template-loader.php' );   ---加载模板文件<br />
}<br />
</code></p>
<p>通过wp-load.php，wordpress先后把wp-config.php, wp-setting.php,classes.php,fucntions.php，</p>
<p>query.php等文件加载进来,并建立了三个全局变量,$wp_the_query,$wp_rewrite和$wp ,分别为WP_Query,<br />
WP_Rewrite和WP类的实例。然后,wp-blog-header执行wp()函数,并通过其调用$wp所属WP类的main方法,<br />
这个方法又调用一系列方法,但最重要的是parse_request方法, WP从这里开始解析URL并建立主循环。</p>
<p>我们看一下wordpress的主方法：</p>
<p><code><br />
function main($query_args = '') {<br />
$this->init();  --初始化环境<br />
$this->parse_request($query_args);   --解析请求<br />
$this->send_headers();  --发送头信息<br />
$this->query_posts();  --查询日志<br />
$this->handle_404();   --操作404(URL地址不存在)<br />
$this->register_globals();  --注册全局变量<br />
do_action_ref_array('wp', array(&#038;$this));<br />
}<br />
</code></p>
<p>这基本上就是wordpress初始化时的信息。<br />
下面就讨论一下当我们设置自定义的永久链接时，wordpress的运作过程。</p>
<p>当我们使用了自定义的永久链接的时候，wordpress会自动生成.htaccess文件，并且在这个文件中生成相<br />
对应于永久链接的匹配规则，在wordpress/wp-includes/rewrite.php中有针对.htaccess文件的重写规则，其<br />
中$use_verbose_rules参数规定了输出信息的详尽和简约，默认的情况下为false。输出的信息比较简单，<br />
如下</p>
<pre>
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
</pre>
<p>如果想查看完整的匹配规则，就把$use_verbose_rules设置为true。</p>
<p>wordpress在对使用了自定义的永久链接进行处理时，它还是会调用wp-include/classes.php文件中<br />
的parse_request函数，对发过来的请求进行解析，无论是否为pathinfo类型的请求，都会被赋值给<br />
$request参数，然后调用该参数与.htaccess中的规则进行匹配，如果找到一个匹配就会“发送头信息”<br />
、“查询日志”，如果没有任何匹配就会返回404错误。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-08-04/wordpress-work/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>10个神奇的.htaccess技巧(for WordPress)-转自 帕兰</title>
		<link>http://blog.king51.com/2010-08-03/10-magic-htaccess-techniques-for-wordpress/</link>
		<comments>http://blog.king51.com/2010-08-03/10-magic-htaccess-techniques-for-wordpress/#comments</comments>
		<pubDate>Tue, 03 Aug 2010 04:34:18 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[Gzip]]></category>
		<category><![CDATA[htaccess]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1427</guid>
		<description><![CDATA[1. 重定向wordpress的订阅地址

除了修改WordPress的模板文件来定制其输出的RSS Feed链接地址外，还可以使用.htaccess文件来进行设置(替换yourrssfeedlink为自己的Feedburner地址)。



<span class="readmore"><a href="http://blog.king51.com/2010-08-03/10-magic-htaccess-techniques-for-wordpress/" title="10个神奇的.htaccess技巧(for WordPress)-转自 帕兰">阅读全文——共3276字</a></span>]]></description>
			<content:encoded><![CDATA[<p>1. 重定向wordpress的订阅地址</p>
<p>除了修改WordPress的模板文件来定制其输出的RSS Feed链接地址外，还可以使用.htaccess文件来进行设置(替换yourrssfeedlink为自己的Feedburner地址)。</p>
<pre><code>
# temp redirect wordpress content feeds to feedburner
&lt;IfModule mod_rewrite.c&gt;
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds2.feedburner.com/catswhocode [R=302,NC,L]
&lt;/IfModule&gt;
</code></pre>
<p><span id="more-1427"></span></p>
<h5>2. 去除WordPress分类链接中的“/category/”前缀</h5>
<p>默认情况下，WordPress的分类链接显示的样式为：</p>
<pre><code>

http://xxx.com/blog/category/tech

</code></pre>
<p>其实其中的category部分没有任何意义，如果想去掉它可以修改.htaccess文件(替换yourblog为自己的网址)。</p>
<pre><code>
RewriteRule ^category/(.+)$ http://www.yourblog.com/$1 [R=301,L]
</code></pre>
<p>参考：How to remove category from your WordPress url</p>
<h5>3. 使用浏览器缓存</h5>
<p>可以修改.htaccess文件让访问者使用浏览器缓存来优化其访问速度。</p>
<pre><code>
FileETag MTime Size
&lt;ifmodule mod_expires.c&gt;
&lt;filesmatch ".(jpg|gif|png|CSS|js)$"&gt;
ExpiresActive on
ExpiresDefault "access plus 1 year"
&lt;/filesmatch&gt;
&lt;/ifmodule&gt;
</code></pre>
<p>参考： Comment accelerer le temps de chargement de votre blog</p>
<h5>4. 压缩静态数据</h5>
<p>可以修改.htaccess文件来压缩需要访问的数据（传输后在访问端解压），从而可以减少访问流量和载入时间。</p>
<pre><code>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</code></pre>
<h5>5. 重定向日期格式的WP Permalink链接地址为Postname格式</h5>
<p>如果你目 前的Permalink地址为/%year%/%monthnum%/%day%/%postname%/ 的格式，那么我强烈推荐你直接使用/%postname%/ ，这样对搜索引擎要舒服得多。首先你需要在WordPress的后台设置输出的Permalinks格式为/%postname%/ 。然后修改.htaccess文件来重定向旧的链接，不然别人以前收藏你的网址都会转成404哦！(替换yourdomain为自己的网址)</p>
<pre><code>
RedirectMatch 301 /([0-9]+)/([0-9]+)/([0-9]+)/(.*)$ http://www.yourdomain.com/$4
</code></pre>
<p>参考： <a href="http://www.wprecipes.com/redirect-day-and-name-permalinks-to-postname">Redirect day and name permalinks to postname</a></p>
<h5>6. 阻止没有referrer来源链接的垃圾评论</h5>
<p>设置.htaccess文件可以阻止大多数无Refferrer来源的垃圾评论机器人Bot Spammer。其会查询访问你网站的来源链接，然后阻止其通过wp-comments-post.php来进行垃圾评论。</p>
<pre><code>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post.php*
RewriteCond %{HTTP_REFERER} !.*yourblog.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</code></pre>
<p>参考： <a href="http://www.wprecipes.com/how-to-deny-comment-posting-to-no-referrer-requests">How to deny comment posting to no referrer requests</a></p>
<h5>7. 定制访问者跳转到维护页面</h5>
<p>当你进行网站升级，模板修改调试等操作时，最好让访问者临时 跳转到一个声明的维护页面(和404错误页面不同)，来通知网站暂时无法访问，而不是留下一片空白或者什么http bad错误。（替换maintenance.html为自己定制的维护页面网址，替换123.123.123.123为自己目前的IP地址，不然你自己访 问也跳转哦）</p>
<pre><code>
RewriteEngine on
RewriteCond %{REQUEST_URI} !/maintenance.html$
RewriteCond %{REMOTE_ADDR} !^123.123.123.123
RewriteRule $ /maintenance.html [R=302,L]
</code></pre>
<p>参考：<a href="http://www.woueb.net/2007/07/25/comment-faire-une-page-d-accueil-pour-les-internautes/">Comment faire une page d’accueil pour les internautes</a></p>
<h5>8. 设置你的WordPress防盗链</h5>
<p>盗链是指其它网站直接使用你自己网站内的资源，从而浪费网站的流量和带宽，比如图片，上传的音乐，电影等文件。（替换mysite为自己的网址和/images/notlink.jpg为自己定制的防盗链声明图片）</p>
<pre><code>
RewriteEngine On
#Replace ?mysite.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+.)?mysite.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]
</code></pre>
<p>参考：<a href="http://www.wprecipes.com/how-to-protect-your-wordpress-blog-from-hotlinking">How to protect your WordPress blog from hotlinking</a></p>
<h5>9. 只允许自己的IP访问wp-admin</h5>
<p>如果你不是团队合作Blog，最好设置只有自己能够访问WP的后台。前提是你的IP不是像我一样动态的哦。（替换xx.xx.xx.xx为自己的IP地址）</p>
<pre><code>
AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName "Example Access Control"
AuthType Basic
&lt;LIMIT GET&gt;
order deny,allow
deny from all
allow from xx.xx.xx.xx
&lt;/LIMIT&gt;
</code></pre>
<p>参考：<a href="http://www.reubenyau.com/protecting-the-wordpress-wp-admin-folder/">Protecting the WordPress wp-admin folder</a></p>
<h5>10. 阻止指定IP的访问</h5>
<p>如果你想要阻止指定IP的访问，来防止其垃圾评论，那么你可以创建自己的Backlist黑名单。(替换xx.xx.xx.xx为指定的IP地址)</p>
<pre><code>
&lt;Limit GET POST&gt;
order allow,deny
deny from xx.xx.xx.xx
allow from all
&lt;/Limit&gt;
</code></pre>
<p>参考：<a href="http://lorelle.wordpress.com/2007/09/20/the-easiest-way-to-ban-a-wordpress-spammer/">The easiest way to ban a WordPress spammer</a></p>
<p>英文原文: <a href="http://www.catswhocode.com/blog/10-awesome-htaccess-hacks-for-wordpress" target="_blank">10 awesome .htaccess hacks for WordPress</a></p>
<p>中文译文: <a href="http://e-spacy.com/blog/10-htaccess-hacks-for-wordpress.html" target="_blank">10个WordPress的.htaccess技巧</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-08-03/10-magic-htaccess-techniques-for-wordpress/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>[转]开发人员必知的20+HTML5技巧</title>
		<link>http://blog.king51.com/2010-08-03/developers-must-learn-skills-of-20-html5/</link>
		<comments>http://blog.king51.com/2010-08-03/developers-must-learn-skills-of-20-html5/#comments</comments>
		<pubDate>Tue, 03 Aug 2010 04:30:01 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[开发人员]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1415</guid>
		<description><![CDATA[互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。

1. 新的文档类型（Doctype）

&#60;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<span class="readmore"><a href="http://blog.king51.com/2010-08-03/developers-must-learn-skills-of-20-html5/" title="[转]开发人员必知的20+HTML5技巧">阅读全文——共6084字</a></span>]]></description>
			<content:encoded><![CDATA[<p>互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。</p>
<h2>1. 新的文档类型（Doctype）</h2>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
<p>你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。</p>
<pre>&lt;!DOCTYPE html&gt;</pre>
<p>只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）<span id="more-1415"></span></p>
<h2>2. 图形（Figure）元素</h2>
<p>考虑用下面的代码来标记图片？</p>
<pre>&lt;mg src="path/to/image" alt="About image" /&gt;
&lt;p&gt;Image of Mars. &lt;/p&gt;</pre>
<p>很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而HTML5通过引进&lt;figure&gt;元素，改进了这一点。当结合 &lt;figcaption&gt; 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：</p>
<pre>&lt;figure&gt;
&lt;img src="path/to/image" alt="About image" /&gt;
&lt;figcaption&gt;
&lt;p&gt;This is an image of something interesting. &lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;</pre>
<h2>3. 重新定义&lt;small&gt;</h2>
<p>原来你可以利用&lt;small&gt;元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法，&lt;small&gt;元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注（如，网站底部的版权声明）。</p>
<h2>4. 不再需要脚本、链接类型</h2>
<p>很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。</p>
<pre>&lt;link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /&gt;
&lt;script type="text/javascript" src="path/to/script.js"&gt;&lt;/script&gt;</pre>
<p>在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：</p>
<pre>&lt;link rel="stylesheet" href="path/to/stylesheet.css" /&gt;
&lt;script src="path/to/script.js"&gt;&lt;/script&gt;</pre>
<h2>5. 使用还是不使用引号</h2>
<p>记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。</p>
<pre>&lt;p id=someId&gt; Start the reactor.</pre>
<p>在这点上，你可以自己决定。如果你想要一个结构非常清楚的文档的话，坚持使用引号也挺好的。</p>
<h2>6. 使你的内容可编辑</h2>
<p><img src="http://blog.king51.com/wp-content/uploads/2010/08/043001og7.png" alt="" /></p>
<p>HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。</p>
<pre>&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;untitled&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt; To-Do List &lt;/h2&gt;
&lt;ul contenteditable="true"&gt;
&lt;li&gt; Break mechanical cab driver. &lt;/li&gt;
&lt;li&gt; Drive to abandoned factory
&lt;li&gt; Watch video of self &lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p>或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：</p>
<pre>&lt;ul contenteditable=true&gt;</pre>
<h2>7. 电子邮件输入</h2>
<p>如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文本框。</p>
<pre>&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;untitled&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action="" method="get"&gt;
&lt;label for="email"&gt;Email:&lt;/label&gt;
&lt;input id="email" name="email" type="email" /&gt;

&lt;button type="submit"&gt; Submit Form &lt;/button&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p><img src="http://blog.king51.com/wp-content/uploads/2010/08/043001NeN.png" alt="" /></p>
<p>在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。</p>
<h2>8. 占位符</h2>
<p>此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。</p>
<pre>&lt;input name="email" type="email" placeholder="doug@givethesepeopleair.com" /&gt;</pre>
<p><img src="http://blog.king51.com/wp-content/uploads/2010/08/043001ZnS.png" alt="" width="400" height="400" /></p>
<h2>9. 本地存储</h2>
<p>多亏了HTML5的 local storage ，我们可以让高级浏览器“记住”我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。</p>
<p><img src="http://blog.king51.com/wp-content/uploads/2010/08/043002zeZ.jpg" alt="" width="400" height="83" /></p>
<h2>10. 语义性的Header和Footer</h2>
<pre>&lt;div id="header"&gt;
...
&lt;/div&gt;

&lt;div id="footer"&gt;
...
&lt;/div&gt;
上面的代码一去不复返。Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。</pre>
<p>而在HTML5中，我们可以使用&lt;header&gt;和&lt;footer&gt;元素，上面的代码就可以替换为：</p>
<pre>&lt;header&gt;
...
&lt;/header&gt;

&lt;footer&gt;
...
&lt;/footer&gt;</pre>
<p>不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。</p>
<h2>11. IE和HTML5</h2>
<p>IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：</p>
<pre>header, footer, article, section, nav, menu, hgroup {
display: block;
}</pre>
<p>就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：</p>
<pre>document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");</pre>
<h2>12. 群组标题（hgroup）</h2>
<p>假设一个网站有名称、副标题分别用&lt;h1&gt;、&lt;h2&gt;标签来标记，在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。</p>
<pre>&lt;header&gt;
&lt;hgroup&gt;
&lt;h1&gt; Recall Fan Page &lt;/h1&gt;
&lt;h2&gt; Only for people who want the memory of a lifetime. &lt;/h2&gt;
&lt;/hgroup&gt;
&lt;/header&gt;</pre>
<h2>13.必要（Required）属性</h2>
<p>表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：</p>
<pre>&lt;input type="text" name="someInput" required&gt;</pre>
<p>或者，更严谨：</p>
<pre>&lt;input type="text" name="someInput" required="required"&gt;</pre>
<p>上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话， 输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性：</p>
<pre>&lt;form method="post" action=""&gt;
&lt;label for="someInput"&gt; Your Name: &lt;/label&gt;
&lt;input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required&gt;
&lt;button type="submit"&gt;Go&lt;/button&gt;
&lt;/form&gt;</pre>
<p><img src="http://blog.king51.com/wp-content/uploads/2010/08/04300211B.png" alt="" /></p>
<p>如果输入是空的，表单将无法提交，突出显示文本框。</p>
<h2>14. 自动对焦（Autofocus）属性</h2>
<p>同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被”选择“或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。</p>
<pre>&lt;input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus&gt;</pre>
<h2>15. 音频支持</h2>
<p>我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素&lt;audio&gt;。目前，只有最新的浏览器支持HTML5音频。 此时，最好还是提供一些向后兼容性。</p>
<pre>&lt;audio autoplay="autoplay" controls="controls"&gt;
&lt;source src="file.ogg" /&gt;
&lt;source src="file.mp3" /&gt;
&lt;a href="file.mp3"&gt;Download this file.&lt;/a&gt;
&lt;/audio&gt;</pre>
<p>说道音频格式，Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。</p>
<h2>16. 视频支持</h2>
<p>与音频元素 &lt;audio&gt;非常像，在新的浏览器上也支持HTML5视频。事实上，就在最近YouTube宣布了一项新的 HTML5视频嵌入。可惜的是，由于HTML5说明文件并没有为视频指出某个特定的编码器，所以都主要取决于浏览器来决定了。尽管Safari和IE9可以支持H.264 格式的视频，Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此，显示HTML5视频的时候，你必须提供两种格式。</p>
<h2>17. 视频预先加载</h2>
<p>你首先需要决定是否需要浏览器来预先加载视频。是否有需要？假设，一个访客进入某个专门用来显示视频的页面，那么就非常有必要预先加载这个页面节省一点等待的时间。你可以通过设置 preload="preload"来预先加载视频，或者之间添加preload也可以。</p>
<pre>&lt;video preload&gt;</pre>
<h2>18. 显示控件</h2>
<p>你可能已经注意到，用上面的代码的话，视频将只会显示成一个图片，而没有任何可控制的元件。为了获取这些播放控件，我们必需在视频元素里指定这些控件属性。</p>
<pre>&lt;video preload controls&gt;</pre>
<p><img src="http://blog.king51.com/wp-content/uploads/2010/08/043002BJR.jpg" alt="" width="400" height="189" /></p>
<h2>19. 正则表达式</h2>
<p>对亏了新模式的属性，我们可以直接在代码中插入一个正则表达式。</p>
<pre>&lt;form action="" method="post"&gt;
&lt;label for="username"&gt;Create a Username: &lt;/label&gt;
&lt;input type="text"
name="username"
id="username"
placeholder="4 &lt;&gt; 10"
pattern="[A-Za-z]{4,10}"
autofocus
required&gt;
&lt;button type="submit"&gt;Go &lt;/button&gt;
&lt;/form&gt;</pre>
<p>如果你比较熟悉正则表达式的话就会注意到这个新模式: [A-Za-z]{4,10}只接受大小写字母。这个字符串最少必需有四个字符，最多是十个字符。</p>
<h2>20. 检测浏览器对属性的支持</h2>
<p>前面提到过并非所有的浏览器都支持这些属性，那是否有什么方法能够判断浏览器是否能够识别它们呢？这个问题问得非常好，这里给大家介绍两种方式，第一个选择是使用Modernizr来检测，或者你也可以创建并剖析这些元素来看看浏览器都有什么能力。例如，在前面的例子里，如果我们要确定浏览器是否能够执行pattern属性，就可以在页面上添加JavaScript:</p>
<pre>alert( 'pattern' in document.createElement('input') ) // boolean;</pre>
<p>实际上，这是确定浏览器兼容性的一种非常常用的方法。jQuery库利用了这个技巧。上面的代码里，我们创建了一个新的输入元素，并确认pattern属性是否能够被识别。如果能够识别的话，浏览器就支持这个功能，否则就不支持。</p>
<pre>&lt;script&gt;
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
&lt;/script&gt;</pre>
<p><em>记住，这将需要依靠 JavaScript来实现！</em></p>
<h2>21. Mark元素</h2>
<p>&lt;mark&gt;元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索“Open your Mind” ，我可以使用在&lt;mark&gt;标签里使用JavaScript 来包裹每一次动作。</p>
<pre>&lt;h3&gt; Search Results &lt;/h3&gt;
&lt;p&gt; They were interrupted, just after Quato said, &lt;mark&gt;"Open your Mind"&lt;/mark&gt;. &lt;/p&gt;</pre>
<h2>22. 何时使用&lt;div&gt;</h2>
<p>是否还需要使用&lt;div&gt;标签呢？当然需要。例如，如果你想在一个元素里将一段代码包裹住，特别是为了内容的定位，&lt;div&gt; 将会是非常理想的选择。不过，如果不是上述情况而是要包裹博客文章、或者页脚的链接列表，建议你分别使用 &lt;article&gt;和&lt;nav&gt;元素。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-08-03/developers-must-learn-skills-of-20-html5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[转]国内网络新环境 机遇永远存在 人永远是最重要的 龚宇</title>
		<link>http://blog.king51.com/2010-07-28/change-domestic-network-opportunities-the-new-environment-there-is-always-the-most-important-person-is-always-gong-yu/</link>
		<comments>http://blog.king51.com/2010-07-28/change-domestic-network-opportunities-the-new-environment-there-is-always-the-most-important-person-is-always-gong-yu/#comments</comments>
		<pubDate>Wed, 28 Jul 2010 04:29:52 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[书评笔记]]></category>
		<category><![CDATA[网络]]></category>
		<category><![CDATA[龚宇]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1405</guid>
		<description><![CDATA[转自中国企业家 标题是我自己定的：国内网络新环境 机遇永远存在 人永远是最重要的

编者按：

近日，百度旗下网络视频公司奇艺CEO龚宇接受英国《金融时报》专访，就创业心得、团队建设等内容阐述了自己的观点。谈到眼下的团购热，龚宇表示，团购具有本土特性，需要强大的执行力，不建议年轻人投身这一领域。

<span class="readmore"><a href="http://blog.king51.com/2010-07-28/change-domestic-network-opportunities-the-new-environment-there-is-always-the-most-important-person-is-always-gong-yu/" title="[转]国内网络新环境 机遇永远存在 人永远是最重要的 龚宇">阅读全文——共2016字</a></span>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.iceo.com.cn/ceom/2010/0728/197368.shtml">转自中国企业家</a> 标题是我自己定的：国内网络新环境 机遇永远存在 人永远是最重要的</p>
<p><strong>编者按：</strong></p>
<p>近日，百度旗下网络视频公司奇艺CEO龚宇接受英国《金融时报》专访，就创业心得、团队建设等内容阐述了自己的观点。谈到眼下的团购热，龚宇表示，团购具有本土特性，需要强大的执行力，不建议年轻人投身这一领域。</p>
<p>龚宇同时认为，在技术领域出现一个青年天才不难，但在商业领域则很难出现青年天才。</p>
<p><strong>以下为龚宇观点摘录。</strong></p>
<p><strong>龚宇：</strong></p>
<p>钱总是投向市场所在地，而不管是不是技术驱动的。现在中国逐渐成为制造业和服务业的中心，所以大量投资也进来了。而且在中国，技术驱动的项目是相对比较少的，看看中国的研发投入就知道了。这是国家的大环境决定的。</p>
<p>投资环境变化不小。当年是VC主导，因为那时候钱不多，VC可以强势选择项目。同时项目的成熟度低，风险大。当时的VC主要是海外和港台回来的，不 懂国情，本土创业者跟他们打交道比较难。而现在，太多钱流入中国，竞争激烈，反而是好项目和好人才成为强势。VC也有了本土经验，沟通起来更容易了。尤其 是证明过能成功的人，有口碑的人，是VC最看重的稀缺资源。</p>
<p>团购是一个很Local的业务，偏运营，需要强大的执行力。所以年轻人最好不要去碰。在技术领域出现一个青年天才是可能的，但在商业运营领域出现一个青年天才是很难的。</p>
<p>我专注在新媒体领域，从焦点到12580再到奇艺都是，不做不擅长的。新媒体的特点是一门大生意，不是小生意。我擅长做大生意，不是小生意。</p>
<p>所谓小生意，就是比如餐厅，你今天进了一条鱼，98买198卖，但如果养了两天瘦了2两，你就亏了几十块。你得计较每一笔投入，投入产出的对应很强很直接。</p>
<p>所谓大生意，就是投入产出的一一对应性不强。比如房地产，你不能说今天用了一种什么样的涂料或者每个房间里多开了一道门，就会带来多少收入的增加， 投入是不细算的，说不清楚。媒体就是这样，你不能说今天多采购了一部电视剧，这部电视剧就能带来多少对应的广告回收，说不出来。媒体的广告是品牌驱动的， 不是由电视剧数量或者PV量决定的，当然，没有PV就没有品牌，但这两个转化是要感性认识和把控的。</p>
<p>大生意，是要大思考，要靠感觉，不是公式能算出来的。</p>
<p>低层次的看法是，一个市场竞争越激烈，机会就越少。但高层次的看法是，机会与年代无关系。其实每个业务领域，真正够层次的竞争者都差不多。比如98 年到2000年的门户，很热，有十多家在做，但真正有竞争力的不到5家，到现在是四大门户。比如06年到现在的视频，号称200家，有竞争力的也不到5 家。刚刚热起来的团购，号称400家，其实有竞争力的绝对不到10家。越往以后，会越集中。</p>
<p>白手起家太慢，高起步可以压缩过程，获得更快更大的成功。我们只有彼此相信才会合作。对于我这方面，可以选择健康的投资者，我最讨厌“既投钱又投人 的VC”，就是他不仅出钱，还要派几个人来跟你一起干。不少VC投资就像种萝卜，每天都会拔起来看一看，这样萝卜不但长不大，连活都没法活。我会挑选成功 过、能做大投入的VC，这样的VC的心态不会急迫。</p>
<p>VC看重一个人，其实并非看重这个人本身，而是看重一个人能够快速组建一个强大团队的能力。我搭团队是从上到下的，先有领导，领导再去找普通员工。 奇艺网1月组建，4月上线时有60个员工，到6月就快速到220个。其中很多都是经理。他们会去寻找与自己脾性相投的下属。如果顺序倒过来，先员工后领 导，就容易动荡。</p>
<p>找到合适的人比找到合适的项目更重要。《从优秀到卓越》里讲，卓越的公司都是一群志同道合的好人一起做出来的。因为事情总会变化，人会摸索。</p>
<p>人品第一。要通过交流感受，去圈子里调查。其次，基本素质比经验更重要。现在奇艺里没有一个VP，最高也就是总监和高级总监。我期望他们能够在实战中成长起来，尤其是以前没有名气、有热情的年轻人通过半年到2年的时间脱颖而出。</p>
<p>从心态上我是更接受离钱更远的项目。原来的心态更紧迫，现在更客观。</p>
<p>不确定性中，最大的挑战是对市场的预测，对政策的预测。我们用两手来规避这些不确定，调研和数据是理性的一方面，而感性认识的这方面也非常重要。如果这个世界都是理性调研和数据可预测的，那就不会有那么多成功，那么多失败。世界的奇妙就在这里，需要感性的直觉。</p>
<p>连环创业者一般会更加从容，因为就算他不知道具体会再面临什么样的不确定，但他相信，兵来将挡水来土掩，总有方法。</p>
<p>我不信宗教，不迷信。我是个机械的唯物主义者，就是唯物得只信像数学这样的自然科学。这跟我的经历有关。76年上学，紧接着四人帮被粉碎，毛主席周总理逝世，邓小平几起几落，那几年是中国变动最大的年代。无常。</p>
<p>之前有人说我公司里有两道门是对着的，漏财。我不信。结果也没什么事。有人说得把哪道门关起来，我说那离那道门近的员工岂不是要绕弯子了，那怎么能关?有个朋友做地产，请两个人来看风水，一个用算盘一个用罗盘，结果算出两个截然不同的答案，他自己都不知道该信哪一个。</p>
<p>其他人信什么无所谓，只要不妨碍到他人。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-07-28/change-domestic-network-opportunities-the-new-environment-there-is-always-the-most-important-person-is-always-gong-yu/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>奇怪的CCTV，可怜的CCTV</title>
		<link>http://blog.king51.com/2010-07-16/strange-cctv-cctv-poor/</link>
		<comments>http://blog.king51.com/2010-07-16/strange-cctv-cctv-poor/#comments</comments>
		<pubDate>Fri, 16 Jul 2010 03:16:39 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[cbox]]></category>
		<category><![CDATA[cctv]]></category>
		<category><![CDATA[ue]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1395</guid>
		<description><![CDATA[看到标题不要惊讶，也表鸡冻，本文观点只涉及CCTV的网络技术层面，无他。事发于2010.7.16，早上忽然心血来潮，想看下早间新闻不料却蓦然发现cctv网址变成了cntv，模样也是大变，因对CCTV的数次默默改版习以为常，遂继续浏览，却不想事故发生！

1.奇怪的cctv：改版超级频繁，不能与时俱进。

 

<span class="readmore"><a href="http://blog.king51.com/2010-07-16/strange-cctv-cctv-poor/" title="奇怪的CCTV，可怜的CCTV">阅读全文——共1185字</a></span>]]></description>
			<content:encoded><![CDATA[<p>看到标题不要惊讶，也表鸡冻，本文观点只涉及CCTV的网络技术层面，无他。事发于2010.7.16，早上忽然心血来潮，想看下早间新闻不料却蓦然发现cctv网址变成了cntv，模样也是大变，因对CCTV的数次默默改版习以为常，遂继续浏览，却不想事故发生！</p>
<h2>1.奇怪的cctv：改版超级频繁，不能与时俱进。</h2>
<p> </p>
<p>    余作为一热血爱国青年（或者中年）对CCTV还是很有好感的， 好歹也算是中国的脸面之一。但是却对其屡次悄无声息的改版极其不适应。毫无疑问也不容置疑的是TV(下文中CCTV“简写”为TV)的每次改版都“大气”而且“好看”，对此吾深有体会，原因是大学期间曾经模仿过TV的版面做了个网站，得到了无数人的夸奖，大家一致认同其“大气”而且“好看”，遂对TV好感倍增，经常闲的蛋疼就去溜达溜达，也由此发现了TV改版之频繁简直世间罕见。</p>
<p>    敝人算是对UE注意较早的互联网从业人员之一（小得意一下^_^）,却是因为种种原因没有走上用户体验设计师这条道。以TV的历次改版来看，TV的设计师对UE貌似是不怎么在乎的，每次都是大大导航，密密麻麻的菜单，还有变来变去的菜单排序。以我纵横互联网这么多年的经验看来这么干实在没有理由。至于后来，整个互联网都开始使用层（DIV）之后，很长一段时间内TV还是和坚持表格套表格，这个技术实在是不复杂的，以TV的人力物力无安全可以赶在浪潮之巅，但是她选择了停滞。至于什么SEO，窃以为TV的技术人员压根就不屑一顾的。至此吾也就放弃了对TV版面的“热爱”，转投国外。</p>
<p><span id="more-1395"></span></p>
<p><strong>空口无凭，有图为证：</strong></p>
<p><strong> </strong><br />
<img class="alignnone size-full wp-image-1398" title="001" src="http://blog.king51.com/wp-content/uploads/2010/07/001.gif" alt="" width="800" height="410" /></p>
<p><img class="alignnone size-full wp-image-1399" title="002" src="http://blog.king51.com/wp-content/uploads/2010/07/002.gif" alt="" width="800" height="370" /></p>
<h2>2.可怜的CCTV：用户体验差到了极点，直播客户端无法使用。</h2>
<p> </p>
<p>  好说歹说咱还得上不是，所以吾还是耐着性子继续看，如今的页面终于跟上了时代步伐，页面用了“层”技术，加载速度快了很多的说,看图先:</p>
<p><img class="alignnone size-full wp-image-1400" title="003" src="http://blog.king51.com/wp-content/uploads/2010/07/003.png" alt="" width="800" height="561" /></p>
<p>  首先看菜单：“爱布谷”和“爱西柚”？是什么东西你倒是给个提示啊。CBox客户端又是什么？  为了推广新产品的品牌知名度菜单上的“爱布谷”和“爱西柚”就保留吧，但是客户端这个东西还是说明的好吧。</p>
<p>  其次是左侧导航为什么字体比其他的标题小一号呢？明明左侧底部还是空余的......也罢也罢......</p>
<p>  在经过深思熟虑之后，我还是下载了CBox客户端，毕竟咱还得看直播不是。但是不幸的是，悲剧发生了。CBox客户端竟然不支持win7的操作系统-具体情况是：能安装但提示不兼容，但是网页播放却没办法播放，苍天啊大地啊你这不是玩我么。</p>
<p>  以吾做技术总监二十多年（连做加不做）的经验,我实在是不明白TV技术总监的思想，难道因为Win7的用户少就放弃了？吾有一网站日IP万余，据统计来看Win7的用户比例大约15%左右，TV的总监真是有魄力竟然直接放弃15%的用户，我想除了TV也不会有谁有这么大手笔。</p>
<p>最后是可怜的我，竟然向TV投了无数次简历，次次都如石沉大海啊。有点酸葡萄的意味了，收尾吧。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-07-16/strange-cctv-cctv-poor/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML5 是什么？我们为什么要关注？</title>
		<link>http://blog.king51.com/2010-07-10/html5-is-what-why-should-we-be-concerned/</link>
		<comments>http://blog.king51.com/2010-07-10/html5-is-what-why-should-we-be-concerned/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 10:25:32 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1382</guid>
		<description><![CDATA[HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。

不说了，看图

HTML5 是什么？我们为什么要关注？

]]></description>
			<content:encoded><![CDATA[<p>HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。</p>
<p>不说了，看图</p>
<div id="attachment_1383" class="wp-caption alignnone" style="width: 682px"><a href="http://blog.king51.com/wp-content/uploads/2010/07/ddb6n7cm_8c8wtstgr_b.jpg"><img class="size-full wp-image-1383" title="HTML5 是什么？我们为什么要关注？" src="http://blog.king51.com/wp-content/uploads/2010/07/ddb6n7cm_8c8wtstgr_b.jpg" alt="" width="672" height="734" /></a><p class="wp-caption-text">HTML5 是什么？我们为什么要关注？</p></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-07-10/html5-is-what-why-should-we-be-concerned/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>教你如何给WordPress主题创建内置联系表单</title>
		<link>http://blog.king51.com/2010-07-05/teach-you-how-to-create-a-built-in-contact-form-wordpress-theme/</link>
		<comments>http://blog.king51.com/2010-07-05/teach-you-how-to-create-a-built-in-contact-form-wordpress-theme/#comments</comments>
		<pubDate>Mon, 05 Jul 2010 12:28:12 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[表单]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1376</guid>
		<description><![CDATA[网上有很多WordPress插件可以给你的博客添加联系表单，但其实并不一定要插件才能实现，这篇教程就将向大家显示如何给WordPress主题创建一个内置的联系表单。

步骤一: 创建页面模板

当然第一步是要创建一个页面模板。先创建一个 page-contact.php的文件，然后将page.php文件里的代码复制到这个新建的文件里。

<span class="readmore"><a href="http://blog.king51.com/2010-07-05/teach-you-how-to-create-a-built-in-contact-form-wordpress-theme/" title="教你如何给WordPress主题创建内置联系表单">阅读全文——共5862字</a></span>]]></description>
			<content:encoded><![CDATA[<p>网上有很多WordPress插件可以给你的博客添加联系表单，但其实并不一定要插件才能实现，这篇教程就将向大家显示如何给WordPress主题创建一个内置的联系表单。</p>
<h2>步骤一: 创建页面模板</h2>
<p>当然第一步是要创建一个页面模板。先创建一个 <em>page-contact.php</em>的文件，然后将<em>page.php</em>文件里的代码复制到这个新建的文件里。</p>
<p>为了确保WordPress能够将它当作一个页面模板来看待，我们需要在 <em>contact.php</em>文件的开头添加下面的注释</p>
<p><span id="more-1376"></span></p>
<pre>&lt;?php
/*
Template Name: Contact
*/
?&gt;

也就是说contact.php文件应该是下面这样子的:

&lt;?php
/*
Template Name: Contact
*/
?&gt;

&lt;?php get_header() ?&gt;

&lt;div id="container"&gt;
&lt;div id="content"&gt;
&lt;?php the_post() ?&gt;
&lt;div id="post-&lt;?php the_ID() ?&gt;" class="post"&gt;
&lt;div class="entry-content"&gt;
&lt;/div&gt;&lt;!-- .entry-content -&gt;
&lt;/div&gt;&lt;!-- .post--&gt;
&lt;/div&gt;&lt;!-- #content --&gt;
&lt;/div&gt;&lt;!-- #container --&gt;

&lt;?php get_sidebar() ?&gt;
&lt;?php get_footer() ?&gt;</pre>
<h2>步骤二: 创建表单</h2>
<p>现在，我们需要创建一个简单的联系表单，只要将下面的代码粘贴到 <em>entry-content</em> div内部即可。</p>
<pre>&lt;form action="&lt;?php the_permalink(); ?&gt;" id="contactForm" method="post"&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;label for="contactName"&gt;Name:&lt;/label&gt;
&lt;input type="text" name="contactName" id="contactName" value="" /&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;label for="email"&gt;Email&lt;/label&gt;
&lt;input type="text" name="email" id="email" value="" /&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;label for="commentsText"&gt;Message:&lt;/label&gt;
&lt;textarea name="comments" id="commentsText" rows="20" cols="30"&gt;&lt;/textarea&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;button type="submit"&gt;Send email&lt;/button&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;input type="hidden" name="submitted" id="submitted" value="true" /&gt;
&lt;/form&gt;</pre>
<p>这个html代码相当明了，不过要注意下第19行的 <em>input type=”hidden”</em>，我们后面会用它来检查表单是否提交。</p>
<h2>步骤三: 数据的处理和错误的应对</h2>
<p>表单看起来已经不错了，但是此刻它仍然是无效的因为它没有发送任何邮件。我们需要做的是验证表单是否提交，然后再验证表单的字段填写是否正确。</p>
<p>如果填写都是正确的，就会收到博客管理员的邮件并向他们发送邮件。否则，就无法发送邮件，错误提示就会显示给用户。</p>
<p>将下面的代码粘贴在页面模板声明和get_header()函数之间：</p>
<pre>&lt;?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '') {
$emailError = 'Please enter your email address.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = '[PHP Snippets] From '.$name;
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: '.$name.' &lt;'.$emailTo.'&gt;' . "\r\n" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?&gt;</pre>
<p>这段代码确认表单是否提交，是否正确填写。如果发生错误，比如，一个字段是空的，或者邮箱地址不正确，就会返回错误提示的信息，表单就无法提交。</p>
<p>接着就是显示错误提示的信息，例如，“请输入你的姓名”。 <strong>下面是完整的表单页面模板，如果喜欢的话你可以原封不动地使用。</strong></p>
<pre>&lt;?php
/*
Template Name: Contact
*/
?&gt;

&lt;?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '') {
$emailError = 'Please enter your email address.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = '[PHP Snippets] From '.$name;
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: '.$name.' &lt;'.$emailTo.'&gt;' . "\r\n" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?&gt;
&lt;?php get_header(); ?&gt;
&lt;div id="container"&gt;
&lt;div id="content"&gt;

&lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
&lt;div &lt;?php post_class() ?&gt; id="post-&lt;?php the_ID(); ?&gt;"&gt;
&lt;h1 class="entry-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
&lt;div class="entry-content"&gt;
&lt;?php if(isset($emailSent) &amp;&amp; $emailSent == true) { ?&gt;
&lt;div class="thanks"&gt;
&lt;p&gt;Thanks, your email was sent successfully.&lt;/p&gt;
&lt;/div&gt;
&lt;?php } else { ?&gt;
&lt;?php the_content(); ?&gt;
&lt;?php if(isset($hasError) || isset($captchaError)) { ?&gt;
&lt;p class="error"&gt;Sorry, an error occured.&lt;p&gt;
&lt;?php } ?&gt;

&lt;form action="&lt;?php the_permalink(); ?&gt;" id="contactForm" method="post"&gt;
&lt;ul class="contactform"&gt;
&lt;li&gt;
&lt;label for="contactName"&gt;Name:&lt;/label&gt;
&lt;input type="text" name="contactName" id="contactName" value="&lt;?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?&gt;" class="required requiredField" /&gt;
&lt;?php if($nameError != '') { ?&gt;
&lt;span class="error"&gt;&lt;?=$nameError;?&gt;&lt;/span&gt;
&lt;?php } ?&gt;
&lt;/li&gt;

&lt;li&gt;
&lt;label for="email"&gt;Email&lt;/label&gt;
&lt;input type="text" name="email" id="email" value="&lt;?php if(isset($_POST['email'])) echo $_POST['email'];?&gt;" class="required requiredField email" /&gt;
&lt;?php if($emailError != '') { ?&gt;
&lt;span class="error"&gt;&lt;?=$emailError;?&gt;&lt;/span&gt;
&lt;?php } ?&gt;
&lt;/li&gt;

&lt;li&gt;&lt;label for="commentsText"&gt;Message:&lt;/label&gt;
&lt;textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"&gt;&lt;?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?&gt;&lt;/textarea&gt;
&lt;?php if($commentError != '') { ?&gt;
&lt;span class="error"&gt;&lt;?=$commentError;?&gt;&lt;/span&gt;
&lt;?php } ?&gt;
&lt;/li&gt;

&lt;li&gt;
&lt;input type="submit"&gt;Send email&lt;/input&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;input type="hidden" name="submitted" id="submitted" value="true" /&gt;
&lt;/form&gt;
&lt;?php } ?&gt;
&lt;/div&gt;&lt;!-- .entry-content --&gt;
&lt;/div&gt;&lt;!-- .post --&gt;

&lt;?php endwhile; endif; ?&gt;
&lt;/div&gt;&lt;!-- #content --&gt;
&lt;/div&gt;&lt;!-- #container --&gt;

&lt;?php get_sidebar(); ?&gt;
&lt;?php get_footer(); ?&gt;</pre>
<h2>第四步骤: 添加jQuery验证</h2>
<p>到此为止，我们的表达已经能够非常完美的运作了。不过你还可以通过添加一个客户端验证来改善它。为此，我打算使用jQuery和 <a href="http://docs.jquery.com/Plugins/Validation">validate jQuery </a>插件，这个插件非常强大，通过它你可以正确、快速、轻松地验证表单。</p>
<p>首先是<a href="http://docs.jquery.com/Plugins/Validation">下载验证插件</a> 然后将它上传到你的主题文件里，完成之后，将下面的代码粘贴到一个新的文件里：</p>
<pre>$(document).ready(function(){
$("#contactForm").validate();
});</pre>
<p>将这个文件命名为<em>verif.js</em>并保存至你的主题文件目录里。</p>
<p>现在就需要将这个javascript文件链接到主题里，打开你的<em>header.php</em>文件，把下面的代码粘贴到&lt;head&gt;和&lt;/head&gt;这两个标签之间：</p>
<pre>&lt;?php if( is_page('contact') ){ ?&gt;
&lt;script type="text/javascript" src="&lt;?php bloginfo('template_directory'); ?&gt;/js/jquery.validate.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="&lt;?php bloginfo('template_directory'); ?&gt;/js/verif.js"&gt;&lt;/script&gt;
&lt;?php }?&gt;</pre>
<p>大功告成！</p>
<p><a href="http://www.catswhocode.com/blog/how-to-create-a-built-in-contact-form-for-your-wordpress-theme">原文</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-07-05/teach-you-how-to-create-a-built-in-contact-form-wordpress-theme/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[转]美国：3G 发展后发制人</title>
		<link>http://blog.king51.com/2010-06-22/u-s-3g-development-in-striking/</link>
		<comments>http://blog.king51.com/2010-06-22/u-s-3g-development-in-striking/#comments</comments>
		<pubDate>Tue, 22 Jun 2010 13:10:48 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[3G]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1366</guid>
		<description><![CDATA[GigaOm 的 America’s Amazing Rise to 3G Dominance说，美国 70% 移动用户都在 3G 网络上了，相比之下，去年年底，全球的移动电话只有 20% 在 3G 网络上。貌似印度和中国如果能成功普及 3G, 全球的数据会变得很好看。虽然我们经常听到美国用户在抱怨某A公司在覆盖和速度上的欠缺，不过，第一，老美就是爱抱怨不管生活多美好，第二数字表明，美国运营商们在力推 3G 服务方面做得还是不错的，另外愿意乃至主动期望高速数据服务的消费群体也足够庞大有力。

今年第一季度，全球运营商里，数据服务利润的前 10 名里，美国 4 大全都上榜。Verizon 冲到了第一。

<span class="readmore"><a href="http://blog.king51.com/2010-06-22/u-s-3g-development-in-striking/" title="[转]美国：3G 发展后发制人">阅读全文——共1196字</a></span>]]></description>
			<content:encoded><![CDATA[<p>GigaOm 的 America’s Amazing Rise to 3G Dominance说，美国 70% 移动用户都在 3G 网络上了，相比之下，去年年底，全球的移动电话只有 20% 在 3G 网络上。貌似印度和中国如果能成功普及 3G, 全球的数据会变得很好看。虽然我们经常听到美国用户在抱怨某A公司在覆盖和速度上的欠缺，不过，第一，老美就是爱抱怨不管生活多美好，第二数字表明，美国运营商们在力推 3G 服务方面做得还是不错的，另外愿意乃至主动期望高速数据服务的消费群体也足够庞大有力。</p>
<p>今年第一季度，全球运营商里，数据服务利润的前 10 名里，美国 4 大全都上榜。Verizon 冲到了第一。</p>
<p>北美的 3G 启动和普及比欧洲晚，不过目前结果很是厉害。直观上看，运营商和设备制造商取得了双赢，而且他们仅仅是赢家或者说受益者中的一部分，抛开消费者不直接接触和了解的网侧设备供应商，我们能第一时间反应出的好例子是 AT&#038;T 和 Apple，可实际上另外 3 家 T-Mobile，Verizon 和 Sprint 与 HTC，Samsung 和 Google 等也有互相促进，都是得益者，再往下，iPhone 与 Android 平台上的应用或服务开发者不也异常繁荣兴旺吗。这种利益某种程度上可以说都传递到了国内的代工厂。</p>
<p>现在美国已经是第一批大规模商用 WiMax 的国家（欧洲包括俄罗斯有规模不详的商用），还会是第一批部署 LTE 的国家。相形之下，我们的移动运营市场闭塞，充满光怪陆离的监管，被承载着莫名其妙的责任，当年甚至不光不要早起，还要故意等着速度最慢的齐步走，这其中一朵奇葩乃是 TD 的上马，自由竞争和 risk taking 的创新绝对没问题，可傍上权力大款，踩着国民的脑袋往上主动给人当枪使就是另一个问题了，我从来不信运营 TD 可以用发展自主标准保障国家利益的理由来解释，是不是个跛足的技术只是问题之一，TD 的利益是利益，生态圈本能蓬勃发展带来的利益就不是利益？那些被淹没了的更多更灵活的创新与发展谁为他们说话？我不相信谁有资格和能力能对 TD 带来的回报做保证，更别提要我相信 TD 的利益要高于那些被牺牲掉的产业链里缤纷创新的利益。</p>
<p>高速数据服务我们走晚了，运营商显然不光是运营商还差不多要成国家机关事业单位，利益集团和意识形态都能对他指手画脚，没人保证它们能按照自己的判断做出有逻辑的商业抉择。运营商实力，终端发展情况和产业链上的服务目前不光初级，而且处于扭曲状态。初级倒不要紧，一直在发展就好，可是扭曲状态会…扭曲…我们发展的路。</p>
<p>每次要琢磨是带跑在 Edge 上的Touch HD 还是 WCDMA 上的 Desire 时我都忿忿不平，TD 是个套在中移动裤裆上的贞操带，王建宙们再有雄心壮志，也明白，得屈从于顶着国家利益之名的政治任务，这幅贞操带，自是让中移动无从满足自我，更是那个神秘男权一贯爱使的手段。中移动，恐怕没法随便动吧。这份纠结的悲叹永远指向一个无法或者也无需跟你我明说的问题核心。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-06-22/u-s-3g-development-in-striking/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>几个目前好用的 免费 vpn （可翻墙）</title>
		<link>http://blog.king51.com/2010-06-11/several-present-useful-free-vpn-available-over-the-wall/</link>
		<comments>http://blog.king51.com/2010-06-11/several-present-useful-free-vpn-available-over-the-wall/#comments</comments>
		<pubDate>Fri, 11 Jun 2010 03:47:20 +0000</pubDate>
		<dc:creator>妖精</dc:creator>
				<category><![CDATA[IT互联网]]></category>
		<category><![CDATA[vpn]]></category>
		<category><![CDATA[免费]]></category>
		<category><![CDATA[翻墙]]></category>

		<guid isPermaLink="false">http://blog.king51.com/?p=1362</guid>
		<description><![CDATA[苦于强大的 墙 到处找vpn 现在找到几个 免费vpn 不敢独享，分享下

1.凸墙VPN代理，同时支持pptp,l2tp,openvpn的高速VPN



<span class="readmore"><a href="http://blog.king51.com/2010-06-11/several-present-useful-free-vpn-available-over-the-wall/" title="几个目前好用的 免费 vpn （可翻墙）">阅读全文——共1060字</a></span>]]></description>
			<content:encoded><![CDATA[<p>苦于强大的 墙 到处找vpn 现在找到几个 免费vpn 不敢独享，分享下</p>
<h3>1.凸墙VPN代理，同时支持pptp,l2tp,openvpn的高速VPN</h3>
<ul>
<li>凸墙VPN能使您无限制访问任何网站！</li>
<li>完美支持WINDOWS，MAC及IPHONE！</li>
<li>无论您使用手机或电脑，都不需要您额外安装任何软件！</li>
<li>使您电脑上所有的程序均得到保密联网，不仅仅是网络浏览器！</li>
<li><strong>使用凸墙VPN登录任何您喜欢的站点,尽情享受……</strong></li>
<li><img src="http://www.vpn38.net/images/tubiao.jpg" alt="" />凸墙VPN保护您的隐私权不受侵犯。</li>
<li><img src="http://www.vpn38.net/images/tubiao.jpg" alt="" />凸墙VPN有多条线路供您挑选。</li>
<li><img src="http://www.vpn38.net/images/tubiao.jpg" alt="" />凸墙VPN从不限制速度。</li>
<li><img src="http://www.vpn38.net/images/tubiao.jpg" alt="" />凸墙VPN使您的交易非常安全，能够使用支付宝或信用卡。</li>
<li><img src="http://www.vpn38.net/images/tubiao.jpg" alt="" />您电脑上所有的程序均得到保密联网，不仅仅是网络浏览器。</li>
<li><img src="http://www.vpn38.net/images/tubiao.jpg" alt="" />凸墙VPN提供测试帐号供您参考。</li>
<li><strong><strong>凸墙VPN提供免费帐号</strong></strong></li>
<li>1.测试帐号一天内不限速不限量使用</li>
<li>2.一天后自动转为<strong>免费版</strong>帐号并对速度进行限制，若干天后帐号自动关闭（具体时间官方并没有给出说明）</li>
<li>3.可通过论坛金币对测试帐号进行充值，可通过推广论坛快速获取金币（可以通过推广他们的论坛获得凸墙VPN的使用权）</li>
<li>注册地址：<a href="http://www.vpn38.net/forum/?fromuid=507" target="_blank">http://www.vpn38.net/forum/register.php</a></li>
</ul>
<h3>2.新加坡免费VPN</h3>
<ul>
<li><span style="color: #0000ff;">新加坡1#服务器</span></li>
<li><span style="color: #0000ff;">【支持大部分欧洲/美国/港台游戏----</span></li>
<li><span style="color: #0000ff;">所有IP对应独立出口】</span></li>
<li><span style="color: #0000ff;">112.140.186.156</span></li>
<li><span style="color: #0000ff;">112.140.186.158</span></li>
<li><span style="color: #0000ff;">112.140.186.159</span></li>
<li><span style="color: #0000ff;">112.140.186.192</span></li>
<li><span style="color: #0000ff;"><br />
</span></li>
<li><span style="color: #0000ff;">新加坡2#服务器</span></li>
<li><span style="color: #0000ff;">【支持大部分欧洲/美国/港台游戏----</span></li>
<li><span style="color: #0000ff;">所有IP对应独立出口】</span></li>
<li><span style="color: #0000ff;">180.210.206.150</span></li>
<li><span style="color: #0000ff;">180.210.206.152</span></li>
<li><span style="color: #0000ff;">180.210.206.149</span></li>
<li><span style="color: #0000ff;">180.210.206.153</span></li>
<li><span style="color: #0000ff;">180.210.206.151</span></li>
<li>用户名：<a href="http://www.ywko.com/" target="_blank">ywko.com</a></li>
<li>密码：ak5pfh</li>
</ul>
<h3>3.美国VPN 免费VPN</h3>
<ul>
<li><span style="color: #0000ff;">美国VPN</span></li>
<li><span style="color: #0000ff;">63.223.122.153</span></li>
<li><span style="color: #0000ff;">63.223.122.154</span></li>
<li><span style="color: #0000ff;">63.223.122.155</span></li>
<li><span style="color: #0000ff;">63.223.122.156</span></li>
<li><span style="color: #0000ff;">63.223.122.157</span></li>
<li><span style="color: #0000ff;">63.223.122.158</span></li>
<li><span style="color: #0000ff;">63.223.122.159</span></li>
<li><span style="color: #0000ff;">63.223.122.160</span></li>
<li><span style="color: #0000ff;">63.223.122.161</span></li>
<li><span style="color: #0000ff;">63.223.122.162</span></li>
<li><span style="color: #0000ff;">63.223.122.163</span></li>
<li><span style="color: #0000ff;">63.223.122.164</span></li>
<li><span style="color: #0000ff;">63.223.122.165</span></li>
<li><span style="color: #0000ff;">63.223.122.166</span></li>
<li><span style="color: #0000ff;">63.223.122.167</span></li>
<li><span style="color: #0000ff;">63.223.122.168</span></li>
<li><span style="color: #0000ff;">63.223.122.169</span></li>
<li><span style="color: #0000ff;">63.223.122.170</span></li>
<li><span style="color: #0000ff;">63.223.122.171</span></li>
<li><span style="color: #0000ff;">76.191.115.185</span></li>
<li>用户名：<a href="http://www.ywko.com/">www.ywko.com</a></li>
<li>密码：x3g2xr</li>
</ul>
<p>以上vpn 不能保证长期有效，手快有。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.king51.com/2010-06-11/several-present-useful-free-vpn-available-over-the-wall/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
