Header部分常用到的PHP函数
<? php bloginfo(‘name’); ?> 博客名称(Title)
<? php bloginfo(‘stylesheet_url’); ?> CSS文件路径
<? php bloginfo(‘pingback_url’); ?> PingBack Url
<? php bloginfo(‘template_url’); ?> 模板文件路径
<? php bloginfo(‘version’); ?> WordPress版本
<? php bloginfo(‘atom_url’); ?> Atom Url
<? php bloginfo(‘rss2_url’); ?> RSS 2.o Url
<? php bloginfo(‘url’); ?> 博客 Url
<? php bloginfo(‘html_type’); ?> 博客网页Html类型
<? php bloginfo(‘charset’); ?> 博客网页编码
<? php bloginfo(‘description’); ?> 博客描述
<? php wp_title(); ?> 特定内容页(Post/Page)的标题

模板常用的PHP函数及命令

<? php get_header(); ?> 调用Header模板
<? php get_sidebar(); ?> 调用Sidebar模板
<? php get_footer(); ?> 调用Footer模板
<? php the_content(); ?> 显示内容(Post/Page)
<? php if(have_posts()) ?> 检查是否存在Post/Page
<? php while(have_posts()) the_post(); ?> 如果存在Post/Page则予以显示
<? php endwhile; ?> While 结束
<? php endif; ?> If 结束
<? php the_time(‘字符串’) ?> 显示时间，时间格式由“字符串”参数决定，具体参考PHP手册
<? php comments_popup_link(); ?> 正文中的留言链接。
如果使用 comments_popup_script()，则留言会在新窗口中打开，反之，则在当前窗口打开
<? php the_title(); ?> 内容页(Post/Page)标题
<? php the_permalink() ?> 内容页(Post/Page) Url
<? php the_category(‘, ‘) ?> 特定内容页(Post/Page)所属Category
<? php the_author(); ?> 作者
<? php the_ID(); ?> 特定内容页(Post/Page) ID
<? php edit_post_link(); ?> 如果用户已登录并具有权限，显示编辑链接
<? php get_links_list(); ?> 显示Blogroll中的链接
<? php comments_template(); ?> 调用留言/回复模板
<? php wp_list_pages(); ?> 显示Page列表
<? php wp_list_categories(); ?> 显示Categories列表
<? php next_post_link(‘ %link ‘); ?> 下一篇文章链接
<? php previous_post_link(‘%link’); ?> 上一篇文章链接
<? php get_calendar(); ?> 日历
<? php wp_get_archives() ?> 显示内容存档
<? php posts_nav_link(); ?> 导航，显示上一篇/下一篇文章链接
<? php include(TEMPLATEPATH . ‘/文件名’); ?> 嵌入其他文件，可为定制的模板或其他类型文件

与模板相关的其他函数

<? php _e(‘Message’); ?> 输出相应信息
<? php wp_register(); ?> 显示注册链接
<? php wp_loginout(); ?> 显示登录/注销链接
< !– next page –> 将当前内容分页
< !– more –> 将当前内容截断，以不在主页/目录页显示全部内容
<? php timer_stop(1); ?> 网页加载时间(秒)
<? php echo get_num_queries(); ?> 网页加载查询量

• 原文：http://javascript.crockford.com/code.html
• 作者：Douglas Crockford

这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是Java。

软件的长期价值直接源于其编码质量。在它的整个生命周期里,一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征,那就能减少在以后对其进行修改时出错的可能性。

编程规范可以帮助程序员们增加程序的健壮性。

所有的JavaScript代码都是暴露给公众的。所以我们更应该保证其质量。

保持整洁很重要。

JavaScript文件

JavaScript程序应独立保存在后缀名为.js的文件中。

JavaScript代码不应该被包含在HTML文件中,除非这是段特定只属于此部分的代码。在HTML中的JavaScript代码会明显增加文件大小,而且也不能对其进行缓存和压缩。

<script src=filename.js>应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。也没有必要使用language或者type属性。MIME类型是由服务器而非scripttag来决定的。

缩进

缩进的单位为四个空格。避免使用Tab键来缩进(即使现在已经是21世纪了),也始终没有个统一的Tab长短标准。虽然使用空格会增加文件的大小,但在局域网中几乎可以忽略,且在最小化过程中也可被消除掉。

每行长度

避免每行超过80个字符。当一条语句一行写不下时,请考虑折行。在运算符号,最好是逗号后换行。在运算符后换行可以减少因为复制粘贴产生的错误被分号掩盖的几率。下一行应该缩进8个空格。

注释

不要吝啬注释。给以后需要理解你的代码的人们(或许就是你自己)留下信息是非常有用的。注释应该和它们所注释的代码一样是书写良好且清晰明了。偶尔的小幽默就更不错了。记得要避免冗长或者情绪化。

及时地更新注释也很重要。错误的注释会让程序更加难以阅读和理解。

让注释有意义。重点在解释那些不容易立即明白的逻辑上。不要把读者的时间浪费在阅读类似于:

 i = 0; //让i等于0

使用单行注释。块注释用于注释正式文档和无用代码。

变量声明

所有的变量必须在使用前进行声明。JavaScript并不强制必须这么做,但是这么做可以让程序易于阅读,且也容易发现那些没声明的变量(它们会被编译成全局变量)。

将var语句放在函数的首部。

最好把每个变量的声明语句单独放到一行,并加上注释说明。所有变量按照字母排序。

var currentEntry; // 当前选择项
var level;        // 缩进程度
var size;         // 表格大小

JavaScript没有块范围,所以在块里面定义变量很容易引起C/C++/Java程序员们的误解。在函数的首部定义所有的变量。

尽量减少全局变量的使用。不要让局部变量覆盖全局变量。

函数声明

所有的函数在使用前进行声明。 内函数的声明跟在var语句的后面。这样可以帮助判断哪些变量是在函数范围内的。

函数名与((左括号)之间不应该有空格。)(右括号)与 开始程序体的{(左大括号)之间应插入一个空格。函数程序体应缩进四个空格。}(右大括号)与声明函数的那一行代码头部对齐。

    function outer(c, d) {
        var e = c * d;

        function inner(a, b) {
            return (e * a) + b;
        }

        return inner(0, 1);
    }

下面这种书写方式可以在JavaScript中正常使用,因为在JavaScript中,函数和对象的声明可以放到任何表达式允许的地方。且它让内联函数和混合结构具有最好的可读性。

    function getElementsByClassName(className) {
        var results = [];
        walkTheDOM(document.body, function (node) {
            var a;                  // 类名数组
            var c = node.className; // 节点的类名
            var i;                  // 循环计数器

// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the set of results.

            if (c) {
                a = c.split(' ');
                for (i = 0; i < a.length; i += 1) {
                    if (a[i] === className) {
                        results.push(node);
                        break;
                    }
                }
            }
        });
        return results;
    }

如果函数是匿名函数,则在function和((左括号)之间应有一个空格。如果省略了空格,否则会让人感觉函数名叫作 function。

    div.onclick = function (e) {
        return false;
    };

    that = {
        method: function () {
            return this.datum;
        },
        datum: 0
    };

尽量不使用全局函数。

When a function is to be invoked immediately, the entire invocation expression should be wrapped in parens so that it is clear that the value being produced is the result of the function and not the function itself.

var collection = (function () {
    var keys = [], values = [];

    return {
        get: function (key) {
            var at = keys.indexOf(key);
            if (at >= 0) {
                return value[at];
            }
        },
        set: function (key, value) {
            var at = keys.indexOf(key);
            if (at < 0) {
                at = keys.length;
            }
            keys[at] = key;
            value[at] = value;
        },
        remove: function (key) {
            var at = keys.indexOf(key);
            if (at >= 0) {
                keys.splice(at, 1);
                value.splice(at, 1);
            }
        }
    };
}());

命名

变量名应由26个大小写字母(A..Z,a..z),10个数字(0..9),和_(下划线)组成。避免使用国际化字符(如中文),因为它们不是在任何地方都可以被方便的阅读和理解。不要在命名中使用$(美元符号)或者(反斜杠)。

不要把_(下划线)作为变量名的第一个字符。它有时用来表示私有变量,但实际上JavaScript并没提供私有变量的功能。如果私有变量很重要, 那么使用私有成员的形式。应避免使用这种容易让人误解的命名习惯。

大多数的变量名和方法命应以小写字母开头。

必须与new共同使用的构造函数名应以大写字母开头。当new被省略时JavaScript不会有任何编译错误或运行错误抛出。忘记加new时会让不好的事情发生(比如被当成一般的函数),所以大写构造函数名是我们来尽量避免这种情况发生的唯一办法。

全局变量应该全部大写。(JavaScript没有宏或者常量,所以不会因此造成误会)

语句

简单语句

每一行最多只包含一条语句。把;(分号)放到每条简单语句的结尾处。注意一个函数赋值或对象赋值语句也是赋值语句,应该以分号结尾。

JavaScript可以把任何表达式当作一条语句。这很容易隐藏一些错误,特别是误加分号的错误。只有在赋值和调用时,表达式才应被当作一条单独的语句。

复合语句

复合语句是被包含在{ }(大括号)的语句序列。

• 被括起的语句必须多缩进四个空格。
• {(左大括号)应在复合语句其实行的结尾处。
• }(右大括号)应与{(左大括号)的那一行的开头对齐
• 大括号应该在所有复合语句中使用,即使只有一条语句,当它们是控制结构的一部分时, 比如一个if或者for语句。这样做可以避免以后添加语句时造成的错误。

标示

语句标示是可选的,只有以下语句必须被标示:while, do,for,switch。

return 语句

一条有返回值的return语句不要使用( )(括号)来括住返回值。如果返回表达式,则表达式应与return 关键字在同一行,以避免误加分号错误。

if 语句

if语句应如以下格式:

    if (condition){
        statements;
    }

    if (condition) {
        statements;
    } else {
        statements;
    }

    if (condition) {
        statements;
    } else if (condition) {
        statements;
    } else {
        statements;
    }

for 语句

for语句应如以下格式:

    for (initialization;condition; update) {
        statements;
    }

    for (variable in object)if (filter) {
        statements;
    }

第一种形式的循环用于已经知道相关参数的数组循环。

第二种形式应用于对象中。object原型中的成员将会被包含在迭代器中。通过预先定义hasOwnProperty方法来区分真正的object成员是个不错方法:

    for (variablein object) if (object.hasOwnProperty(variable)){
        statements;
    }

while 语句

while语句应如以下格式:

    while (condition){
        statements;
    }

do 语句

do语句应如以下格式:

    do {
        statements;
    } while (condition);

不像别的复合语句,do语句总是以;(分号)结尾。

switch 语句

switch语句应如以下格式:

    switch (expression){
    case expression:
        statements;
    default:
        statements;
    }

每个 case与switch对齐。这可避免过分缩进。

每一组statements(除了default应以 break,return,或者throw结尾。不要让它顺次往下执行。

try 语句

try语句应如以下格式:

    try {
        statements;
    } catch (variable){
        statements;
    }

    try {
        statements;
    } catch (variable){
        statements;
   } finally {
        statements;
    }

continue 语句

避免使用continue语句。它很容易使得程序的逻辑过程晦涩难懂。

with 语句

不要使用with语句。

空白

用空行来将逻辑相关的代码块分割开可以提高程序的可读性。

空格应在以下情况时使用:

• • 跟在((左括号)后面的关键字应被一个空格隔开。

   while (true) {

• • 函数参数与((左括号)之间不应该有空格。这能帮助区分关键字和函数调用。
• • 所有的二元操作符,除了.(点) 和((左括号)和 [(左方括号)应用空格将其与操作数隔开。
• • 一元操作符与其操作数之间不应有空格,除非操作符是个单词,比如typeof。
• • 每个在控制部分,比如for 语句中的; (分号)后须跟一个空格。
• • 每个,(逗号)后应跟一个空格。

另外的建议

{} 和[]

使用{}代替new Object()。使用[]代替new Array()。

当成员名是一组有序的数字时使用数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。

,(逗号)操作符

避免使用逗号操作符,除非在特定的for 语句的控制部分。(这不包括那些被用在对象定义,数组定义,var语句,和参数列表中的逗号分隔符。)

作用域

在JavaScript中块没有域。只有函数有域。不要使用块,除非在复合语句中。

赋值表达式

避免在if和while语句的条件部分进行赋值。

if (a = b) {

是一条正确语句?或者

if (a == b) {

才是对的?避免这种不容易判断对错的结构。

===和!==操作符。

使用===和!==操作符会相对好点。==和!=操作符会进行类型强制转换。 特别是, 不要将==用于与错值比较( false,null,undefined,“”,0,NaN)。

令人迷惑的加号和减号

小心在+后紧跟+或++。这种形式很容易仍人迷惑。应插入括号以便于理解。

total = subtotal + +myInput.value;

最好能写成

total = subtotal + (+myInput.value);

这样+ +不会被误认为是++。

eval 是恶魔

eval是JavaScript中最容易被滥用的方法。避免使用它。

eval有别名。不要使用Function构造器。不要给setTimeout或者setInterval传递字符串参数。

总有一些特别的原因导致一些非常好的文章的原文地址暂时或永久不能访问，这里就当是一个快照吧，一切权力和状态都以原文为准，这里仅仅作为不时之需。

JavaScript不仅是最具活力的脚本语言，还是是最有用的编程语言之一。因为绝大多数的浏览器都和它兼容，你可以在这些浏览器中使用它。JavaScript被接受的相当快，因为它是如此的简单，而且使用范围相当广泛。许多程序员过去常常认为JavaScript是一门“玩具语言”，但是，AJAX进入市场后表现出了完全相反的一面，它让JavaScript展现出了完全不同的能力和功能。

由于这个发明的出现，程序员现在已经可以创建带有桌面应用程序效果的Web应用程序了，这是很有益处的，因为数据可以更快地改变。这是一些迷你技巧，它们可以帮助初学者更好地使用JavaScript。JavaScript的使用范围相当广泛，而且还有这么多的风格，所以它可以有很多的技巧。另外，虽然它很多的编程方法，但是我只挑选了10个技巧，我认为这些技巧对初学者理解JavaScript来说是很好的的起点。

1，在一个数组的最后添加一个元素

这个技巧可以让你使用Length属性在一个数组的最后添加一个元素，因为Length属性比数组的最后一个元素的下标多1。这个方法和“push”方法是相同的。例如：

 
var myArray = []; 
myArray[myArray.length] = 'New Element'; 
 

2，调整一个数组的长度

Length属性不是只读的，所以你可以设置Length属性的值。而且，你可以使用它增大或缩小数组的长度。例如：

 
var myArray = [1,2,3]; 
myArray.length // 3 
myArray.length = 2; //Delete the last element 
myArray.length = 20 // add 18 elements to the array; the elements have the undefined value. 

3，使用“!!”把任意数据类型转换成Boolean

这个技术可以让你使用“!!”把任意数据类型（比如string, number或integer）转换成Boolean。例如：

var myString = '23255'; 
typeof myString; //String 
  
myString = !!myString; 
typeof myString  //Boolean 

4，把Number转换成String

这个技巧可以让你在number的结尾添加一个空的string来把number转换成string,例如：

var mynumber = 234; 
typeof mynumber; //Number 
  
mynumber += ''; 
typeof mynumber; //String 

5，了解一个函数需要多少个变量

这是一个伟大的技巧，可以让你准确地知道一个函数需要多少个变量。例如：

function add_nums(num1, num2){ 
    return num1 + num2; 
} 
add_nums.length // 2 is the amount of parameters expected by the function add_nums 

6，使用“arguments”对象来了解一个函数接收到了多少个参数

这个技术可以让你使用“arguments”对象来了解一个函数接收到了多少个参数。例如：

function add_nums(){ 
    return arguments.length; 
} 
  
add_nums(23,11,32,56,89,89,89,44,6); //this return the number 9 

当你需要检查参数个数的有效性的时候，或者当你需要创建一个不确定参数个数的函数的时候，这个技巧是很有用的。

function sum_three_nums( ){ 
 if(arguments.length!=3) throw new Error('received ' + arguments.length + ' parameters and should work with 3'); 
  
} 
  
sum_three_nums(23,43); //Return the error message 
  
function sum_num(){ 
    var total = 0; 
    for(var i=0;i<arguments .length;i++){ 
        total+=arguments[i]; 
    } 
    return total; 
} 
  
sum_num(2,34,45,56,56); 

7，把对象当成参数，来组织和改善函数

在现代Web开发中，对象最普遍的一个用途是把它们当成函数的参数。要记住函数参数的这个规则总是很困难的；但是，使用一个对象是十分有好处的，因为我们不必再担心参数的规则了。而且，它更有组织性，可以让用户更好的理解我们要做什么。这个方法可以让你把对象当成参数，来组织和改善函数。例如：

function insertData(name,lastName,phone,address){ 
    code here; 
} 

重构以后的代码是这样的：

function insertData(parameters){ 
    var name = parameters.name; 
    var lastName = parameters.lastName; 
    var phone = parameters.phone; 
    var address = parameters.address; 
} 

当你要使用默认值的时候，它也是十分有用的。例如：

function insertData(parameters){ 
    var name = parameters.name; 
    var lastName = parameters.lastName; 
    var phone = parameters.phone; 
    var address = parameters.address; 
    var status = parameters.status || 'single' //If status is not defined as a property //in the object the variable status take single as value 
} 

现在，要使用这个函数十分的简单；我们可以用两种方式来发送数据：

//Example 1 
insertData({name:’Mike’, lastName:’Rogers’, phone:’555-555-5555’,address:’the address’, status:’married’}); 
  
  
//Example 2 
var myData = {       name:’Mike’,  
                         lastName:’Rogers’,  
                               phone:’555-555-5555’, 
                             address:’the address’,  
                                status:’married’ 
                       }; 
  
insertData(myData); 

8，函数就是数据

函数就是像strings或numbers那样的数据，我们可以把它们当成函数参数来传递它们，这可以创建十分令人惊讶而又“威风凛凛”的Web应用程序。这个方法是非常有用的，几乎所有的主流框架都使用了这个方法。例如：

function byId(element, event, f){ 
    Document.getElementById(element).['on'+event] = f; //f is the function that we pass as parameter 
} 
  
byId('myBtn','click',function(){alert('Hello World')}); 
  
Another example of functions as data: 
  
//Example 1 
function msg(m){ 
    Alert(m); 
} 
  
//Example 2 
var msg = function(m){ alert(m);}  

这些函数几乎是完全相同的。唯一的区别是使用它们的方式。例如：第一个函数，在你声明它以前，你就可以使用它了；但是第二个函数只有声明以后才能使用：

//Example 1 
msg('Hello world'); //This will work 
  
function msg(m){ 
    alert(m); 
} 
  
//Example 2 
msg('Hello world'); //Does not work because JavaScript cannot find the function msg because is used before is been declared. 
  
var msg = function(m){ alert(m)} 

9，扩展本地对象

虽然一些JavaScript的领袖不推荐这个技术，但是它已经被一些框架使用了。它可以让你针对JavaScript API来创建一些辅助性的方法。

//We create the method prototype for our arrays 
//It only sums numeric elements 
  
Array.prototype.sum = function(){ 
    var len = this.length; 
    total = 0; 
    for(var i=0;i<len ;i++){ 
        if(typeof this[i]!= 'number') continue; 
         total += this[i]; 
    } 
    return total; 
} 
  
var myArray = [1,2,3,'hola']; 
myArray.sum(); 
  
  
  
  
Array.prototype.max = function(){ 
    return Math.max.apply('',this); 
} 
  

10，Boolean

注意它们之间的区别，因为这会节省你调试脚本的时间。

'' == '0'          // false 
0 == ''            // true 
0 == '0'           // true 
false == 'false'   // false 
false == '0'       // true 
false == undefined // false 
false == null      // false 
null == undefined  // true 
true == 1          // true 
'' == null         // false 
false == ''        // true 

如果你在其他地方看过这些脚本，那么这些技巧可以帮助你融会贯通。这些技巧甚至还不及JavaScript所有功能的冰山一角，但是这是一个开始！请不要客气，留下你的评论，问题，额外的技巧或疑虑吧，但是请记住，这是一篇针对初学者的文章！！我希望能收到一些开发者同行的来信！Enjoy!

互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。

1. 新的文档类型（Doctype）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。

<!DOCTYPE html>

只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）

2. 图形（Figure）元素

考虑用下面的代码来标记图片？

<mg src="path/to/image" alt="About image" />

<p>Image of Mars. </p>

很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而HTML5通过引进<figure>元素，改进了这一点。当结合 <figcaption> 元素使用时，我们就可以将图形标题与图形配对起来。代码如下：

<figure>

<img src="path/to/image" alt="About image" />

<figcaption>

<p>This is an image of something interesting. </p>

</figcaption>

</figure>

3. 重新定义<small>

原来你可以利用<small>元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法，<small>元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注（如，网站底部的版权声明）。

4. 不再需要脚本、链接类型

很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />

<script type="text/javascript" src="path/to/script.js"></script>

在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下：

<link rel="stylesheet" href="path/to/stylesheet.css" />

<script src="path/to/script.js"></script>

5. 使用还是不使用引号

记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。

<p class=myClass id=someId> Start the reactor.

在这点上，你可以自己决定。如果你想要一个结构非常清楚的文档的话，坚持使用引号也挺好的。

6. 使你的内容可编辑

HTML5其中一个非常强大的功能就是"contenteditable"，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>untitled</title>

</head>

<body>

<h2> To-Do List </h2>

<ul contenteditable="true">

<li> Break mechanical cab driver. </li>

<li> Drive to abandoned factory

<li> Watch video of self </li>

</ul>

</body>

</html>

或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）：

<ul contenteditable=true>

7. 电子邮件输入

如果我们应用"电子邮件"类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种"电子邮件"类型，它们只会简单地返回到普通的文本框。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>untitled</title>

</head>

<body>

<form action="" method="get">

<label for="email">Email:</label>

<input id="email" name="email" type="email" />

<button type="submit"> Submit Form </button>

</form>

</body>

</html>

在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。

8. 占位符

此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

9. 本地存储

多亏了HTML5的 local storage ，我们可以让高级浏览器"记住"我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8， Safari 4， Firefox 3.5.都支持。

10. 语义性的Header和Footer

<div id="header">

…

</div>

<div id="footer">

…

</div>

上面的代码一去不复返。Divs从根本上来说并没有任何语义结构，即使应用上了ID还是如此。

而在HTML5中，我们可以使用<header>和<footer>元素，上面的代码就可以替换为：

<header>

…

</header>

<footer>

…

</footer>

不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。

11. IE和HTML5

IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：

header, footer, article, section, nav, menu, hgroup {

display: block;

}

就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：

document.createElement("article");

document.createElement("footer");

document.createElement("header");

document.createElement("hgroup");

document.createElement("nav");

document.createElement("menu");

12. 群组标题（hgroup）

假设一个网站有名称、副标题分别用<h1>、<h2>标签来标记，在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。

<header>

<hgroup>

<h1> Recall Fan Page </h1>

<h2> Only for people who want the memory of a lifetime. </h2>

</hgroup>

</header>

13.必要（Required）属性

表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：

<input type="text" name="someInput" required>

或者，更严谨：

<input type="text" name="someInput" required="required">

上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话， 输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性：

<form method="post" action="">

<label for="someInput"> Your Name: </label>

<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>

<button type="submit">Go</button>

</form>

如果输入是空的，表单将无法提交，突出显示文本框。

14. 自动对焦（Autofocus）属性

同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被"选择"或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

15. 音频支持

我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素<audio>。目前，只有最新的浏览器支持HTML5音频。 此时，最好还是提供一些向后兼容性。

<audio autoplay="autoplay" controls="controls">

<source src="file.ogg" />

<source src="file.mp3" />

<a href="file.mp3">Download this file.</a>

</audio>

说道音频格式，Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。

16. 视频支持

与音频元素 <audio>非常像，在新的浏览器上也支持HTML5视频。事实上，就在最近YouTube宣布了一项新的 HTML5视频嵌入。可惜的是，由于HTML5说明文件并没有为视频指出某个特定的编码器，所以都主要取决于浏览器来决定了。尽管Safari和IE9可以支持H.264 格式的视频，Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此，显示HTML5视频的时候，你必须提供两种格式。

17. 视频预先加载

你首先需要决定是否需要浏览器来预先加载视频。是否有需要？假设，一个访客进入某个专门用来显示视频的页面，那么就非常有必要预先加载这个页面节省一点等待的时间。你可以通过设置 preload="preload"来预先加载视频，或者之间添加preload也可以。

<video preload>

18. 显示控件

你可能已经注意到，用上面的代码的话，视频将只会显示成一个图片，而没有任何可控制的元件。为了获取这些播放控件，我们必需在视频元素里指定这些控件属性。

<video preload controls>

19. 正则表达式

对亏了新模式的属性，我们可以直接在代码中插入一个正则表达式。

<form action="" method="post">

<label for="username">Create a Username: </label>

<input type="text"

name="username"

id="username"

placeholder="4 <> 10"

pattern="[A-Za-z]{4,10}"

autofocus

required>

<button type="submit">Go </button>

</form>

如果你比较熟悉正则表达式的话就会注意到这个新模式： ［A-Za-z］{4，10}只接受大小写字母。这个字符串最少必需有四个字符，最多是十个字符。

20. 检测浏览器对属性的支持

前面提到过并非所有的浏览器都支持这些属性，那是否有什么方法能够判断浏览器是否能够识别它们呢？这个问题问得非常好，这里给大家介绍两种方式，第一个选择是使用Modernizr来检测，或者你也可以创建并剖析这些元素来看看浏览器都有什么能力。例如，在前面的例子里，如果我们要确定浏览器是否能够执行pattern属性，就可以在页面上添加JavaScript：

alert( ‘pattern’ in document.createElement(‘input’) ) // boolean;

实际上，这是确定浏览器兼容性的一种非常常用的方法。jQuery库利用了这个技巧。上面的代码里，我们创建了一个新的输入元素，并确认pattern属性是否能够被识别。如果能够识别的话，浏览器就支持这个功能，否则就不支持。

<script>

if (!’pattern’ in document.createElement(‘input’) ) {

// do client/server side validation

}

</script>

记住，这将需要依靠 JavaScript来实现！

21. Mark元素

<mark>元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索"Open your Mind" ，我可以使用在<mark>标签里使用JavaScript 来包裹每一次动作。

<h3> Search Results </h3>

<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

22. 何时使用<div>

是否还需要使用<div>标签呢？当然需要。例如，如果你想在一个元素里将一段代码包裹住，特别是为了内容的定位，<div> 将会是非常理想的选择。不过，如果不是上述情况而是要包裹博客文章、或者页脚的链接列表，建议你分别使用 <article>和<nav>元素。

责怪糟糕的代码（或不良代码对象）并不能帮助您发现瓶颈，提高 Java™ 应用程序速度，猜测也不能帮您解决。Ted Neward 引导您关注 Java 性能监控工具，从5 个技巧开始，使用Java 5 的内置分析器JConsole 收集和分析性能数据。

当应用程序性能受到损害时，大多数开发人员都惊慌失措，这在情理之中。跟踪 Java 应用程序瓶颈来源一直以来都是很麻烦的，因为 Java 虚拟机有黑盒效应，而且 Java 平台分析工具一贯就有缺陷。

然而，随着 Java 5 中 JConsole 的引入，一切都发生了改变。JConsole 是一个内置 Java 性能分析器，可以从命令行或在 GUI shell 中运行。它不是完美的，但是当尖头老板来问你关于性能的问题时，用它来应对还是绰绰有余的——这比查询 Papa Google 要好得多。

在本期 5 件事 系列中，我将向您展示 5 个方法，使您可以轻松地使用 JConsole（或者，它更高端的 “近亲” VisualVM ）来监控 Java 应用程序性能和跟踪 Java 中的代码。

1. JDK 附带分析器

许多开发人员没有意识到从 Java 5 开始 JDK 中包含了一个分析器。JConsole（或者 Java 平台最新版本，VisualVM）是一个内置分析器，它同 Java 编译器一样容易启动。如果是从命令行启动，使 JDK 在 PATH 上，运行 jconsole 即可。如果从 GUI shell 启动，找到 JDK 安装路径，打开 bin 文件夹，双击 jconsole。

当分析工具弹出时（取决于正在运行的 Java 版本以及正在运行的 Java 程序数量），可能会出现一个对话框，要求输入一个进程的 URL 来连接，也可能列出许多不同的本地 Java 进程（有时包含 JConsole 进程本身）来连接。

使用 JConsole 进行工作

在 Java 5 中，Java 进程并不是被设置为默认分析的，而是通过一个命令行参数 — -Dcom.sun.management.jmxremote — 在启动时告诉 Java 5 VM 打开连接，以便分析器可以找到它们；当进程被 JConsole 捡起时，您只能双击它开始分析。

分析器有自己的开销，因此最好的办法就是花点时间来弄清是什么开销。发现 JConsole 开销最简单的办法是，首先独自运行一个应用程序，然后在分析器下运行，并测量差异。（应用程序不能太大或者太小；我最喜欢使用 JDK 附带的 SwingSet2 样本。）因此，我使用 -verbose:gc 尝试运行 SwingSet2 来查看垃圾收集清理，然后运行同一个应用程序并将 JConsole 分析器连接到它。当 JConsole 连接好了之后，一个稳定的 GC 清理流出现，否则不会出现。这就是分析器的性能开销。

2. 远程连接进程

因为 Web 应用程序分析工具假设通过一个套接字进行连通性分析，您只需要进行少许配置来设置 JConsole（或者是基于 JVMTI 的分析器，就这点而言），监控/分析远程运行的应用程序。

如果 Tomcat 运行在一个名为 “webserve” 的机器上，且 JVM 已经启动了 JMX 并监听端口 9004，从 JConsole（或者任何 JMX 客户端）连接它需要一个 JMX URL “service:jmx:rmi:///jndi/rmi://webserver:9004/jmxrmi”。

基本上，要分析一个运行在远程数据中心的应用程序服务器，您所需要的仅仅是一个 JMX URL。更多关于使用 JMX 和 JConsole 远程监控和管理的信息，参见 参考资料。）

3. 跟踪统计

JConsole 有许多对收集统计数据有用的选项卡，包括：

Memory：在 JVM 垃圾收集器中针对各个堆跟踪活动。

Threads：在目标 JVM 中检查当前线程活动。

Classes：观察 VM 已加载类的总数。

这些选项卡（和相关的图表）都是由每个 Java 5 及更高版本 VM 在 JMX 服务器上注册的 JMX 对象提供的，是内置到 JVM 的。一个给定 JVM 中可用 bean 的完整清单在 MBeans 选项卡上列出，包括一些元数据和一个有限的用户界面来查看数据或执行操作。（然而，注册通知是在 JConsole 用户界面之外。）

使用统计数据

假设一个 Tomcat 进程死于 OutOfMemoryError。如果您想要弄清楚发生了什么，打开 JConsole，单击 Classes 选项卡，过一段时间查看一次类计数。如果数量稳定上升，您可以假设应用程序服务器或者您的代码某个地方有一个 ClassLoader 漏洞，不久之后将耗尽 PermGen 空间。如果需要更进一步的确认问题，请看 Memory 选项卡。

4. 为离线分析创建一个堆转储

生产环境中一切都在快速地进行着，您可能没有时间花费在您的应用程序分析器上，相反地，您可以为 Java 环境中的每个事件照一个快照保存下来过后再看。在 JConsole 中您也可以这样做，在 VisualVM 中甚至会做得更好。

先找到 MBeans 选项卡，在其中打开 com.sun.management 节点，接着是 HotSpotDiagnostic 节点。现在，选择 Operations，注意右边面板中的 “dumpHeap” 按钮。如果您在第一个（“字符串”）输入框中向 dumpHeap 传递一个文件名来转储，它将为整个 JVM 堆照一个快照，并将其转储到那个文件。

稍后，您可以使用各种不同的商业分析器来分析文件，或者使用 VisualVM 分析快照。（记住，VisualVM 是在 Java 6 中可用的，且是单独下载的。）

5. JConsole 并不是高深莫测的

作为一个分析器实用工具，JConsole 是极好的，但是还有更好的工具。一些分析插件附带分析器或者灵巧的用户界面，默认情况下比 JConsole 跟踪更多的数据。

JConsole 真正吸引人的是整个程序是用 “普通旧式 Java ” 编写的，这意味着任何 Java 开发人员都可以编写这样一个实用工具。事实上，JDK 其中甚至包括如何通过创建一个插件来定制 JConsole 的示例（参见 参考资料）。建立在 NetBeans 顶部的 VisualVM 进一步延伸了插件概念。

如果 JConsole（或者 VisualVM，或者其他任何工具）不符合您的需求，或者不能跟踪您想要跟踪的，或者不能按照您的方式跟踪，您可以编写属于自己的工具。如果您觉得 Java 代码很麻烦，Groovy 或 JRuby 或很多其他 JVM 语言都可以帮助您更快完成。

您真正需要的是一个快速而粗糙（quick-and-dirty）的由 JVM 连接的命令行工具，可以以您想要的方式确切地跟踪您感兴趣的数据。

结束语

Java 性能监控不止于 JConsole 或 VisualVM — 在 JDK 中隐藏着一整套工具，只是大多数开发人员并不知道。 本系列 中的下一篇文章将深入探究一些实验性的命令行工具，可以帮助您挖掘更多的您所需要的性能数据。因为这些工具通常只关注特殊数据，比一个完整的分析器更小更轻巧，所以它们的性能开销要小一些。

导读：就开源本身而言，它就是个成功案例。它不仅受个人喜欢，而且众多知名企业也青睐于它。

虽然开源计划和开源产品数不胜数，但哪一个才是最成功的呢？这里所说的“成功”的定义是：应用广泛+众所周知。而在众多成功的开源产品中，只有少数领头羊，而其他产品基本只能望其项背。

Linux

上榜理由：Linux + GNU = GNU/Linux 。从Linus Torvalds在1991年宣布他在Minix基础上创建一新OS内核到现在已经接近20年了。在这段时间内，大部分网络服务器都是Linux系统。

BSD

上榜理由：长久以来，FreeBSD, NetBSD和OpenBSD是服务器众操作系统之中广为人知的3个OS。上世纪90年代，三者均是脱胎于伯克利的Unix系统，故把三者组团上榜。另外，Apple的Mac OS脱胎于FreeBSD。

MySQL

上榜理由：MySQL是全球使用范围最广的数据库系统。2009年，全球的MySQL安装数量已达1千1百万。它是LAMP架构（Linux, Apache, MySQL, PHP）中的M。众多知名网站和产品均使用MySQL，比如：维/基百科、Facebook、Google和Wordpress。（Google和Facebook均改造了MySQL，以满足自身需求。）

Apache

上榜理由：Apache HTTP服务器从它诞生的1996年开始，它是全球使用最为广泛的Web服务器，其市场占有率远远超过第二名的IIS。2009年，全球超过1亿个网站使用Apache。

据Netcraft2010年8月11日的数据统计表明，全球目前已有119,664,128个网站使用Apache；目前Apache市场占有率为54.90%，IIS为25.87%。

图1：Web 服务器市场占有率

Firefox

上榜理由：目前为止，它是Mozilla的最成功产品。2004年11月9日，FireFox1.0问世。目前Firefox虽无法撼动IE的霸/主地位，但它是众多技术人员的首选浏览器。Firefox浏览器进化史：2002年9月23日Phoenix -> 2003年5月17日改为FireBird -> 2004年2月9日改为FireFox。

根据Net Market Share 2010年7月份最新统计，Firefox市场占有率为22.91%，IE为60.74% 。

图2：浏览器市场占有率

WordPress

上榜理由：从2004年Wordpress作为b2博客软件一分支面世后，它开始主宰博客平台市场。据Pingdom 2009年的调查表明，全球Top 100博客中27%使用Wordpress。如果加上Wordpress.com和Automattic的Wordpress服务博客，该数据上升至32%。

2010年8月份，Wordpress 3.0下载量已超过1250万。

BIND

上榜理由：BIND（Berkeley Internet Name Domain Server）是现今互联网上最常使用的DNS服务器软件，使用BIND作为服务器软件的DNS服务器约占所有DNS服务器的90%。BIND的第一个版本要追溯到20世纪80年代，它由伯克利大学的4位研究生共同开发，它和4.3 BSD一起发布。可以这样说，它就是全球的标准DNS服务器。

不接触Linux的朋友应该很少听过BIND。因为全球大多数服务器的OS均为Linux/Unix，而这些Linux/Unix均绑捆BIND，所以BIND的份额才非常高。

Ubuntu

上榜理由：2010年4月28日，Ubuntu首个版块发布。迄今为止，它是Linux流传最广的分支，尤其是其出色的桌面系统。鉴于Ubuntu近些年来的巨大成功，榜上有名，应受之无愧。

后记——无处不在的开源产品

看到这里，你是不是发现，这8个产品中有6个在开源历史上的九个重大事件中出现过呢？其实，这也从另一个角度说明，这些开源产品对IT业界产生了重要影响。比如：Facebook背后就有非常之多的开源产品在支撑。

我们平时上网可能不会太注意，其实这些开源产品真的是无处不在。你访问的网站，大部分是使用Apache的Web服务器；你访问的网站，大部分操作系统是Linux或BSD；你访问的网站，大部分都是使用MySQL；你提交DNS查询请求由BIND服务器分析处理；你访问的博客很可能就是Wordpress的；说不定你现在就是用Firefox在阅读这篇文章。

在线工具集

• 书籍类：
  • Book Shelf 2.0 beta —— 荐，分类很清晰，下载很方便
  • Book Go!
  • 原版图书免费下载链接收集站
  • 51CNNET.NET
• JavaScript类：
  • Beautify JavaScript —— JavaScript格式化工具，效果很理想
  • AJAX Libraries API
  • Regex Tester
  • Compressor Packer —— 以前一直用这个压JS，自从有了TBCompressor，就放弃他了
• CSS类：
  • CSS选择器性能测试
  • CSSTidy —— CSS格式化工具
  • CSS Compressor —— CSS压缩
• 其他：
  • GUID 生成器 —— 做某些东西(Firefox插件)时需要唯一资源标志符时用
  • W3Counter
  • WebWait – Benchmark Your Website

常用Firefox插件

• 支付宝安全控件 和 旺旺协议 —— 网购专用，Firefox+浦发网银，无敌了
• Firebug —— 这个不用介绍了吧，附空帏的外部编辑器乱码修正版
  • Firecooike —— 支持Cookie的查看和编辑
  • Jiffy —— 调试性能的，用起来比较麻烦，没试过
  • YSlow —— Why Slow? YUI出品
  • Pixel Perfect —— 把设计稿直接拖到Firefox里进行对比
  • Rainbow for Firebug —— JS高亮，性能不是很理想
• Fiddler 开关 —— 简化在Firefox里切换Fiddler的操作，感谢Taobao UED的空帏同学
• Web Developer
• DevBoi —— 把Html, Dom, JavaScript等手册放在侧栏里，可以自定义增加，快捷键Ctrl+F9。可以在这里找到更多的Package。
• RefControl —— 针对每个站点发送想要的HTTP Referer
• GreaseMonkey —— 看某个网站不爽，写个小脚本来优化下还是不错的
• HttpFox —— 查看当前Http链接状态，类似IE下的HttpWatch
• User Agent Switcher —— 切换User-Agent，同时开发iphone和web版本的时候很方便
• FoxyProxy —— 穿墙工具，配合专业代理公布器使用很和谐

IE下的调试工具

• Fiddle2 —— 非常强悍的一款http流查看工具，默认支持IE，其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持插件。
• IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能，IE8自带了一个加强版的。
• Microsoft Script Debugger + Companion.JS —— 调试JS用，虽然报错还是有误差，但是我已经满足了。安装顺序是：Microsoft Script Debugger，Companion.JS，在”IE选项-高级”里取消禁用脚本调试。
• 多版本IE共存两种方案：
  • IE7/8 + IE Tester —— 大众型配置，可以基本满足日常需要。
  • IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代，我还是推荐这种方案，因为只有神奇的原装IE 6，才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话，建议再装个IE 8 + IE Tester，因为IE 8下的Developer Toolbar还是有很大改进的，调试起来会方便一些。
• 以下三个软件相对不重要些：
  • HttpWatch —— http流查看
  • Instant Source —— 可查看JS生成的源码
  • NetLimiterPro —— 网速限制

参考手册

• XHTML、CSS & DOM W3C 手册 —— 玉伯整理的版本，包含了W3C手册以及其他有用的资料。
• 苏昱的CSS中文手册和Dom中文手册
• JScript语言参考
• XML指南
• XMLHTTP参考手册
• jQuery 1.2.6 API和jQuery and jQuery UI Reference 1.2
• Apache 2.2 中文版参考手册在线版
• MySQL 5.1 参考手册 (在线版)
• PHP手册
• YUI Cheatsheet
• Cheat Sheet Roundup – Over 30 Cheatsheets for developers
• 23个Cheatsheet打包下载

批处理工具

• TBCompressor —— 淘宝UED的JS/CSS压缩工具，详见玉伯的介绍
• pngOptimizer —— png优化工具
• jpegTran —— jpeg去冗余meta工具

IDE及其他工具

• Editplus v301 汉化版
• Tortoise SVN
• 移动版本的 Apache + PHP —— 灰常灰常好用，灰常灰常移动，见明城的说明
• …

Bookmarklet(右键另存)

• Firebug Lite —— 官方介绍
• Xray —— 官方介绍
• MRI —— 官方介绍
• ‘+ window.document.documentElement.outerHTML+ ””>查看生成的源码，‘+ window.document.documentElement.outerHTML+ ”);})()”>打开新窗口查看生成的源码 —— for IE

开发者社区及权威网站

• Mozilla Developer Center (MDC)
• YAHOO! Developer Network (YDN)
• Dev.Opera
• Apple Developer Connection
• MSDN
• IBM Developers中国 (Web 前端开发技术专题)
• WebKit
• AOL Developer Network
• SlideShare – Share PPT —— 在线PPT分享，资源丰富
• Google Doctype —— Web开发人员的百科全书
• W3C (香港，中国)
• Position Is Everything
• HTML Dog
• 维基百科

推荐订阅的博客和网站(排名不分先后)

• 国外
  • 内容聚合：A List Apart，Ajaxian，Smashing Magazine，456 berea street，Script & Style，CSS Globe，CSS-Tricks，SitePoint
  • 团队Blog：Yahoo! User Interface Library (YUI)，IEBlog
  • 个人Blog：John Resig，PPK: QuirksMode，Douglas Crockford，Dean Edwards，Nate Koechley，Julien Lecomte，Eric A. Meyer，Andy Budd，Steven Levithan，HedgerWow
• 国内
  • 内容聚合：Blueidea，无忧脚本，网页设计师(W3CN)，JavaScript教程网
  • 团队Blog：淘宝，口碑，阿里巴巴国际站，阿里巴巴中文站，阿里巴巴中文站前端开发团队(方凳)，阿里妈妈，支付宝，阿里软件，19楼，九天音乐，金蝶与友商网
  • 个人Blog，这里列出的是原创并更新相对频繁的博客，如有遗漏，请告之(sorrycc#gmail.com)：怿飞，手气不错，Realazy，old9(需穿墙术)，沙滩凉鞋(空帏)，射雕(玉伯)，Aether，振之，嗷嗷，JunChen，爆牙齿，秦歌，克军，5key，小志，Rage(正淳)，麦鸡，云烈，老冒，番茄红了，Joyqi，卢力，CSS森林(Ghost)，Twinsen，Gulu77，Rlog，Dlog，子鼠，西风坊 …

It’s hard to believe that a year has passed since our last WordPress theme collection, but there you have it — the time has come again. Once a year we feature the most useful and interesting WordPress-themes that we are collecting over months and present them in a nice quick overview. The collections from 2007,2008 and last year are still useful, but some of the themes are outdated or updated now.

Looking back over these previous theme articles, you can clearly see how and why WordPress has rapidly matured into the CMS powerhouse it is today. With all of the features that have been added and improvements made with every new WordPress version and with its ever-increasing popularity among the design and development community, the quality of free themes is evident. Developers are continually pushing WordPress’ boundaries, giving us today’s outstanding free theme collection.

Today, we present a fresh collection of useful WordPress themes. Please notice that some themes are a bit older, but they are included because we haven’t featured them last time. This round-up picks up where we left off last year: most themes below were released between June 2009 and August 2010. We’ve also split this collection into the following categories: gallery and portfolio themes, themes for bloggers, e-Commerce WordPress themes, clean themes, magazine-style themes, minimal themes, mobile themes; pre-launch themes; and finally “Themes That Take WordPress Beyond.”

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Gallery And Portfolio Themes

Cumulus (Free version) (demo)
Cumulus is a very clean and calm portfolio theme. It contains a large block for featured projects and images and a nifty blog posts navigation in the sidebar.

Imbalance (demo)
Free wordpress theme in modern-minimalist style. Imbalance is a very user friendly, jQuery powered theme which looks really well under any browser and OS. Perfectly fits for your blog, online magazine or portfolio websites. It is optimized for high-loads, contains WordPress 3.0 menu support, Twitter widget, jQuery-based gallery and WP Post Thumbnails support.

Shaken and Stirred Theme (demo)
This theme is perfect for you if you’re in need of a gallery/portfolio website or if you just want a website with a unique grid layout that not many websites have taken full advantage of yet. “Shaken Grid” uses the jQuery Masonry plugin which “arranges elements vertically then horizontally according to a grid.” The result is a gap-less layout even if you have varying post heights.

AutoFocus+ (demo)
The theme is designed on an 800px, 8 column grid layout that truly allows your images to shine. The theme boasts a sharp typographic approach with a 22px baseline grid, and a Garamond/Helvetica (Times/Arial for you PC users) font stack that’s much easier to read.

Fotofolio Landscape (demo)
A nice dark WordPress theme with sidebar navigation and jQuery-powered lightbox for images. A good choice for photographers who want to feature their works in an online portfolio.

FolioGrid (demo)
This theme contains a fluid grid-based layout, jQuery-based transitions and automatically resizing thumbnails. Also, you can choose between various page tamplates, and the theme has a widget-enabled area, too.

Mansion (demo)
Mansion is a free photoblogger’s theme for WordPress. It features a flexible-width thumbnail grid for both images and photo journal entries. Mansion is perfect for those who want to primarily showcase their photographs and occasionally write blog posts.

PhotoView (the link is currently unavailable due to server problems of the theme’s author) (demo)
PhotoView was designed for displaying photos and videos in a simple and clean manner. The theme has an integrated lightbox. Also, a PSD file is included for easy customization.

SimpleFolio (demo)
SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider. It has 2 different widget areas and threaded comments, and also supports paged comments and has 2 different page templates for advanced usage. The control of images is done from the post page.

Smashing Multimedia (demo)
This theme was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This WordPress Theme comes with layered PSD source files, a visual help guide and is fully localized ready for you to translate it into your target language.

Fullscreen Photo and Multimedia (demo)
Fullscreen is a free one-column photography and multimedia theme for WordPress that can be used for portfolios, photoblogs, videoblogs, and virtually anything else where you want your content to be front and center. It provides visual artists a unique way of presenting their latest work online using a minimalist side-scrolling homepage.

Brave Zeenat (demo)
A clean Portfolio Theme ideal for photographers, artists and designers to showcase their portfolios.

Monokrome (demo)
This grid-based theme is widget ready and has a Twitter stream and Flickr integration. The column width adapts to the width of the images and the width of the browser viewport.

Portfolio WPESP Theme (live demo)
Portfolio – WPESP Theme is a “minimalist” Theme based on the idea of portfolio created by DAILYWP. The Theme is a starting point in the creation of portfolios, using WordPress as CMS.

Selecta (demo, WordPress 3.0+ compatible)
Selecta’s rounded edges and bold, modern color palettes make for a fresh theme that’s best suited to blogs where video will be the main focus. The wider-than-usual frames around thumbnails and videos bring to mind the retro-cool of Polaroid photographs and old home movies.

Work-a-holic (demo)
Work-a-holic is a free two and three column WordPress theme that focuses mainly on showcasing portfolios for artists, web designers, photographers and illustrators.

BlueBubble WordPress Theme (demo)
The theme is clean and simple, contains a theme options page, uses post image thumbnail plugin, has 2 widget ready sidebars and uses jQuery/PHP-based contact form with easy customization. Requires WordPress 2.9+.

WordPress Themes For Bloggers

Lap of Luxury (demo)
This theme uses gold in the logo, and white and black are used as the main colors. The 2-col theme contains a sidebar on the right that allows for a large square ad up top, and splitting into 2 columns below that. Comes fully widgetized. A special feature of this theme is the logo changer.

Katana (demo)
This theme has a simple layout based on anime or game niche. Theme will be suitable for blogs of such niches. Theme has features like featured post section, post thumbnails, banner ads, adsense, twitter widgets etc. Theme uses custom fonts for various titles. It has an intuitive theme option page which lets you configure the theme.

Koi Theme (demo)
Koi is a simplified version of N.Design Studio’s theme (2009 redesign). Key features: multi-level dropdown menus, social media buttons, threaded & paged comments, and sidebar widget plus three footer widgets. This theme includes an option page to manage dropdown menus, favicon, footer tracking code, and social media buttons. Requires WordPress 2.9+.

Bueno
Bueno is a clean, minimalistic design which sophistication in both its typography and structure. It uses a grid-based design, has integrated banner ad management, widgetized sidebar and 7 different color schemes. Also, the theme is packaged wth a .po file for easy theme integration.

Notepad Theme (demo)
The theme is inspired by the iPhone’s Notes.app. This new theme is widget compatible with threaded comments, social media buttons, and multi-level dropdown menus. It has been tested on WordPress 2.9 with Firefox, Chrome, Safari, and IE7+. It also includes some nice CSS3 enhancement such as rounded corners and drop shadow.

Strukture (demo)

Peacekeeper (demo)

The Seven Five (demo)
A minimalist blogger/social theme including several customization and layout options.

Simplo (demo)

Galaxy (demo)
The Galaxy WordPress theme is a two column theme that supports banner ads and the WP-PageNavi plugin. Perfect theme for personal blogs.

Aparatus (demo)

Zexee (demo)

Cyangant Elegant (demo)

Obscure (demo)
A dark magazine wordpress theme suitable for any site nitche and best fit for community-based sites.

MonkeyPr (demo)

Designpile (demo)

Obscorp (demo)

The Side Blog Theme (demo)
A free blogging theme with all sorts of customization and content management options.

E-Commerce WordPress Themes

e-Commerce Theme: Kelontong (demo)
The theme has a simple layout, clean, professional look, is integrated with WP e-commerce and features a slideshow for products.

Dangdoot (e-commerce theme: free version) (demo)
Dangdoot is a free e-commerce theme for WordPress and requires the e-Commerce plug-in.

AppCloud (e-commerce theme: free version) (demo)
AppCloud is another free e-commerce theme for WordPress. (It too requires the e-Commerce plug-in).

Clean WordPress Themes

Blissful Blog (demo)

The Ideal Website
The Ideal Website is designed to fit Fibonacci’s Golden Section – otherwise known as the divine proportions. These measurements are said to be the most pleasing to the eye, and have been widely used for everything from judging beauty of a face, to the design of bank notes.

Un.complicated Theme (demo)
The layout is minimalist, clean, and organized into three 320px columns. This theme, are built on Starkers and implements the The Golden Grid. here is a wigetized sidebar, which looks like a regular three column row. I have also integrated twitter within the theme, using javascript. All the user has to do is find this line in the index.php page.

Voidy (demo)
Voidy is the perfect theme for your great blog. It is clean, clear and beautiful. It is minimalistic two-cloumn theme with the widgets all arranged in the right sidebar. Voidy was designed to make your content stand out and make everything else get out of the way.

Clear (demo)
Clear is the perfect theme for great authors. It is clean, clear and beautiful. It is minimalistic one-cloumn theme with the widgets all arranged at the bottom. Clear was designed to make your content stand out and make everything else get out of the way.

Delicate (demo)

Boldy (demo)
A free theme that includes support for WordPress 3.0 Menu Management, has in-built slideshows, jQuery-based forms and live form validation as well as a widget for Twitter.

Smooth (demo)

Inuit Types (starter edition) (demo)

Titan Theme (free edition) (demo)

YouAre Theme (demo)

Simple Organization (demo)

Neutra (demo)
Neutra is a simple and elegant theme for WordPress. Grid-based with focus on simplicity and typography.

The Erudite (demo)
A theme for writers who want readers, not visitors, traffic, click-throughs, CPMs or what-have-you. Carefully crafted typography and generous use of whitespace lets your writing shine. Version 2 includes a dark theme option.

Magazine-Style Themes

The Columnist
The Columnist WordPress theme is inspired by traditional newspaper layouts and the grid structures and typography techniques they employ. It has WordPress thumbnail support, widget support, CSS3 column structure, jQuery animations, custom fields for images and featured latest post area.

The Structure Theme (the link was removed because the pricing was changed after the article was published,demo)
The Structure Theme is a free WordPress theme with a modern minimalist design. There are 4 themes included with the Structure Theme download; a white theme, black theme, two column blog and a single column blog design. The theme was created with a simple and clean aesthetic meant to easily adopt the style of the content added to the site. The Structure Theme is also designed with customization in mind. Meaning, with a little work, the theme can be completely personalized to suit your brand.

Aurelius (demo)

Tanzaku (demo)

The WhatsUp (demo)

WPCount (demo)

Maimpok (demo)

Malleable (demo)

Furvious (demo)
A nice theme coming with 5 color styles, powerful admin framework and featured posts area.

Newspress (demo)

Minimal WordPress Themes

Modernist

Reptile

WP-Notes (demo)

Satoshi (demo)

Ulap Theme (demo)

Manifest
The goal with Manifest was to create a clean and streamlined theme that focused on the content and not the distractions. It utilizes a single column, 500 pixel wide layout. No sidebars. No widgets.

Miniml Press Theme (demo)

Functionalism (demo)

LifeStreaming White (demo)

Vostok (demo)
Vostok is for those who don’t want attention to be distracted from content. Colors and typography have been carefully chosen to achieve maximum legibility with minimum eye fatigue. Also, code has been written with extreme care for web standards and accessibility.

Mini (demo)

Mobile Themes For WordPress

WordPress Mobile Pack (demo)

WordPress Mobile Pack
The WordPress Mobile Pack includes the following: a mobile switcher to select themes based on the type of user visiting your website; a selection of mobile themes; extra widgets; device adaptation; and a mobile administration panel to allow users to edit the website or write posts while out and about.

WordPress Mobile Theme
This is a minimalist theme that can be used to target mobile users. The theme works with any mobile phone of any resolution. And with its light weight, it also drastically reduces loading times.

Möbius
Möbius is compatible with iPhone (and iPod Touch), Android, BlackBerry, Windows, Palm Pre and Symbian touchscreen mobile phones.

News Press Mobile
The News Press theme is a simple and elegant solution for creating an iPhone-friendly news, blog or other text-centric WordPress website. It comes complete with all the standard WordPress blog features: search, log-in, categories, tags, archives, photos and more.

Carrington Mobile
Carrington Mobile is an elegant mobile theme that supports advanced touchscreen browsers (iPhone, Android, BlackBerry, Pre) and that is also backwards-compatible with older mobile devices.

Pre-Launch WordPress Themes

BEBACKWP (demo)

Ice Breaker (demo)

Ready2Launch! (demo)

WP Blueprint

Themes That Take WordPress Beyond

GuruQ (demo)
GuruQ is a basic theme designed to be used for Q&A websites. Visitors post questions to the guru, and the guru answers via the WordPress admin screen.

P2 (Like Twitter in a Box)
P2 is a theme for WordPress that transforms a mild-mannered blog into a super-blog, with features like inline comments on the home page, a posting form right on the home page, inline editing of posts and comments, real-time updates (to display new posts and comments without reloading) and much more.

Driftwood Contact Manager (demo)
Driftwood is a contact manager theme built for WordPress. This easy-to-use theme gives you an effortless way to track interaction with your clients and contacts.

Aggregator (demo)
Aggregator is a theme that aggregates feeds of any kind in one place and in an attractive format.

GTD (private theme for teams to collaborate)

MiniCard (demo)
The MiniCard theme supports hCard and vCard microformats, it supports a ton of social networks, it can accommodate some portfolio items (optional), and it does much more, all from the dedicated theme configuration page.

LiveTwit (demo)

WordPress Theme Tools

Elastic Theme Editor
The awesome Elastic is a visual theme editor and engine for WordPress. It takes a completely innovative approach to theme development. To get an idea of what it can do, check out this video:

Divine (Convert PSD to WordPress)
Divine is a Photoshop plug-in that allows you to assign WordPress roles to your main elements (e.g. #footer, #header, etc.). The plug-in then prepares all the files you need. Once you set up FTP access, the tool uploads the theme automatically to your server. Look at this video for insight into how Divine works:

WordPress Debug Theme
The WordPress Debug theme allows you to check early on for any possible issues you might have with your WordPress installation. It is quite simple for now, doing only a few things, but it does them very effectively.

Starter And Blank WordPress Themes

Starkers HTML5 WordPress Theme Kit
Starkers is a bare bones WordPress theme created to act as a starting point for the theme designer… Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect ‘blank slate’ for your projects, as it’s a stripped-back version of the ‘Default’ theme that ships with WordPress

WP-Constructor
WordPress Constructor is a many-in-one theme. It contains 6 sidebar variations and three layouts (and you can create new is easy). You can configure colors and fonts. The theme also has post thumbnails (WordPress 2.9+) and navigation menu customization options (WordPress 3.0+).

Buddymatic Theme Framework
Buddymatic is a highly extensible theme framework for WordPress and WordPress MU blogs, including BuddyPress-enabled home and member blogs.

ET Starter Theme for WordPress
The ET starter theme lets you easily choose between a one-, two- and three-column layout. It supports the WP-PageNavi, Twitter Tools and Contact Form 7 plug-ins and also includes a built-in jQuery drop-down menu.

WordPress Skeleton Theme
The feature-rich WordPress Skeleton Theme has been developed to speed up and streamline your WordPress development. One of its outstanding out-of-the-box features is CSS support for the iPhone and iPad (both portrait and landscape); simply edit the iPhone.css and iPad.css files.

Paintbox CMS (demo)
Paintbox CMS is a grid-based CMS theme layered on my actual theme-canvas Paintbox. It comes with a smooth 960 grid layout plus some creative jQuery effects for content loading.

BLANK
Blank is a theme with all the functionality of a typical WordPress theme but almost none of the styling. The idea is that using this as your base theme is far easier than using one that is already styled.

无论我们身处专业领域深造研究还是个好学的网友，有一天迫切想找能指导自己学习的课件，来到verycd的教育频道，打出关键字，回车，一个简洁漂亮的菜单，玲琅满目的相关课程。嗯，点击红框，速度不错，这就是我要的。

这就是教育
频道的意义，省去在网络上苦苦搜寻教程无果的遗憾，我们想要做的就是来verycd就是一个习惯，用最快的速度找到了自己想要的资源，不会失望而归。这个
看似简单的小事背后，将是我们教育频道庞大的资料库，而丰富充实资料库都是无私热心网友所编辑所共享，我们会因为资源下面一条条的回复感谢而激动不已，如
此地简单可爱。

感谢每一个用心去分享的朋友，感谢兢兢业业一丝不苟的字幕组。希望你也能参与进来，
参与查漏补缺资源发布：手边的教程，下载的学习视频，所在学校的课件都会让你成为一个独一无二的楼主，为教育频道贡献自己的力量，我们现在做的都是崭新
的！

这是我们一小部分的成果：

麻省理工、台湾国立交通大学、斯坦福大学、TTC课程和耶鲁大学的
优秀开放课程资源，以及一小部分中科院研究生课程VeryCd U资源索引

麻省理工 (MIT)

麻
省理工开放课程主页：http://ocw.mit.edu/courses/

一.
理学院

*生物学(Biology)

1.MIT
开放课程：生物学导论 MIT OpenCourse:7.012 Introduction to Biology

课程链接：http://www.verycd.com/topics/2829182/

*
化学(Chemistry)

1.MIT开放课程： 固态化学导论 MIT
OpenCourse:Introduction to Solid State Chemistry

课程链接：http://www.verycd.com/topics/2828243/

*
物理学(Physics)

1.麻省理工电磁学视频课程
MIT–Physics–Electricity and Magnetism–Video Lectures

课程链接1：http://www.verycd.com/topics/2807625/

课
程链接2：http://www.verycd.com/topics/2807625/

2.
美国麻省理工之经典力学 classical mechanics

课程链接：http://www.verycd.com/topics/2745060/

*
脑与认知科学(Brain and Cognitive Sciences)

1.MIT开
放式课程:心理学导论2004秋季学期  MIT OpenCourseWare,9.00 Introduction to
Psychology,Fall 2004

课程链接：http://www.verycd.com/topics/65161/

二.
工程学院

*电机工程与计算机科学(Electrical Engineering and
Computer Science)

1. MIT计算机科学及编程导论 MIT Introduction to
Computer Science and Programming

课程链接：http://www.verycd.com/topics/2830263/

2.MIT
算法导论 MIT Introduction to Algorithms

课程链接1：http://www.verycd.com/topics/2812654/

课
程链接2：http://www.verycd.com/topics/87348/

3.
数字通信原理  Principles of Digital Communications-MIT

课程链接：http://www.verycd.com/topics/2829316/

三：
高中开放式课程

1.哥德尔，埃舍尔，巴赫：一次心灵太空漫游  Godel,
Escher, Bach: A Mental Space Odyssey

课程链接：http://www.verycd.com/topics/2834837/

斯坦福大学 (Stanford)

斯
坦福开放课程主页：http://see.stanford.edu/see/courses.aspx

Stanford
Engineering Everywhere：

斯坦福大学的“Stanford Engineering
Everywhere
”免费提供学校里最受欢迎的工科课程，给全世界的学生和教育工作者。得益于这个项目，我们有机会和全世界站在同一个数量级的知识起跑线上。

*
计算机科学导论

1.斯坦福大学-计算机软件学习课程 Stanford
Engineering Everywhere – Programming Methodology&AProgramming
Abstractions

课程链接1：http://www.verycd.com/topics/2826147/

课
程链接2：http://www.verycd.com/topics/2735796/

2.
斯坦福大学-编程方法 Programming Methodology

课程链接：http://www.verycd.com/topics/2820089/

*
附属工程学院课程

1.斯坦福大学iPhone开发教程 Stanford –
iPhone Application Programming

课程链接：http://www.verycd.com/topics/2751791/

*
人工智能

1.斯坦福大学网络视频课程之机器人学 Introduction to
robotics

课程链接：http://www.verycd.com/topics/432023/

2.
斯坦福大学-机器学习课程 Stanford Engineering Everywhere-MachineLearning

课
程链接：http://www.verycd.com/topics/2727693/

*
斯坦福迷你医学课堂

1.斯坦福迷你医学课堂：人类健康之动态 Stanford Mini
Med School : The Dynamics of Human Health

课程链接：http://www.verycd.com/topics/2825599/

2.
斯坦福迷你医学课堂：医学、健康及科技前沿 Stanford Mini Med School：Medicine, Human Health,
and the Frontiers of Science

课程链接：http://www.verycd.com/topics/2824928/

*
斯坦福大学近现代物理专题课程

1. 斯坦福大学近现代物理专题课程-经典力学
Stanford Modern Physics – Classical Mechanics

课程链接：http://www.verycd.com/topics/2802330/

2.
斯坦福大学近现代物理专题课程-狭义相对论 Stanford Modern Physics – Special Relativity

课
程链接：http://www.verycd.com/topics/2777708/

3.
斯坦福大学近现代物理专题课程-广义相对论  Stanford Modern Physics – Einstein’s Theory

课
程链接：http://www.verycd.com/topics/2780010/

4.
斯坦福大学近现代物理专题课程-统计力学 Stanford Modern Physics – Statistic Mechanics

课
程链接：http://www.verycd.com/topics/2809139/

5.
斯坦福大学近现代物理专题课程-宇宙学 Stanford Modern Physics – Cosmology

课程链接：http://www.verycd.com/topics/2789959/

6.
斯坦福大学近现代物理专题课程-量子纠缠-part1 Stanford Modern Physics – Quantum
Entanglement, Part 1

课程链接：http://www.verycd.com/topics/2811769/

7.
斯坦福大学近现代物理专题课程-量子纠缠-part3 Stanford Modern Physics – Quantum
Entanglement, Part 3

课程链接：http://www.verycd.com/topics/2813882/

*
线性动力系统教程

斯蒂芬博伊德 线性动力系统教程 Stephen Boyd
Course | Linear Dynamical Systems

课程链接：http://www.verycd.com/topics/2735036/

*Steve
Jobs在2005年对Stanford毕业生的演讲

Steve
Jobs在2005年对Stanford毕业生的演讲  Steve Jobs’ 2005 Commencement Address

课
程链接：http://www.verycd.com/topics/189277/

台湾国立交通大学 (NCTU)

台湾国立交通大学开放课程开页：http://www.tocwc.org.tw/

*
理学院

1.普通物理 台湾国立交通大学

课程链接：http://www.verycd.com/topics/2815424/

2.
国立交通大学 普通物理实验  Physics experiment

课程链接：www.verycd.com/topics/2819715/

3.
台湾国立交通大学开放课程：微积分1 NCTU Open Course Ware:Calculus1

课程链接：http://www.verycd.com/topics/2760639/

4.
向量分析  Vector analysis

课程链接：http://www.verycd.com/topics/2819715/

5.
复变函数论  Complex Variables and Applications

课程链接：http://www.verycd.com/topics/2820566/

6
国立交通大学 偏微分方程(一) Partial Differential Equations

资课程链接：http://www.verycd.com/topics/2815420/

7.
国立交通大学 偏微分方程(二)  Partial Differential Equations

课程链接：http://www.verycd.com/topics/2815876/

*
讲座

1全球化与爱情

课程链接：http://www.verycd.com/topics/2834171/

TTC course

The Teaching Company
美国最著名的大学教育课程制作公司之一，专门聘请世界一流大学的顶尖级教授讲授大学程度的各种课程，并推出课程的磁带，录像带，CD，DVD和学习手册，
因注重学术性，教育性和娱乐性，符合终身学习的时代观念，在业界享有盛誉。由它推出的课程简称为TTC course。

1.TTC
课程集 The Teaching Company

课程链接1：http://www.verycd.com/topics/108732/

课程链接2：http://www.verycd.com/topics/2771002/

课程链接3：http://www.verycd.com/topics/108401/

课程链接4：http://www.verycd.com/topics/2763612/

课程链接5：http://www.verycd.com/topics/319300/

2.TTC
& TMS课程集 TTC & TMS Courrses

课程链接：http://www.verycd.com/topics/2763436/

3.
激情：感情的哲学与智慧教程  TTC The Passions Philosophy And The Intelligence Of
Emotions-YYePGiSO

课程链接：http://www.verycd.com/topics/107802/

4.TTC
课程：二十世纪的乌托邦及其恐怖行为  TTC – Utopia and Terror in the 20th Century

课程链接：http://www.verycd.com/topics/2808748/

5.TTC
& TMS莎士比亚相关课程 A Collection of TTC & TMS Courses on Shakespeare

课程链接：http://www.verycd.com/topics/2762013/

6.
经济学第3版 TTC VIDEO – Economics 3rd Edition

课程链接：http://www.verycd.com/topics/2823677/

耶鲁大学 (Yale)

耶鲁大学开放课程主页：http://oyc.yale.edu/

*
天文 (Astronomy)

1.耶鲁大学开放课程：天体物理学之探索和争议 Open
Yale course：Frontiers and Controversies in Astrophysics

课程链接：http://www.verycd.com/topics/2820193/

*
生物医学工程 (Biomedical Engineering)

1.耶鲁大学开放课程：
生物医学工程探索 Open Yale course：Frontiers of Biomedical Engineering

课程链接：http://www.verycd.com/topics/2825693/

*
化学 (Chemistry)

1.耶鲁大学开放课程：新生有机化学 Open Yale
course：Freshman Organic Chemistry

版本1: MOV 高清版 更新完毕

课程链接：http://www.verycd.com/topics/2824129/

版本2: 耶鲁开放式课程/中文字幕/更新到第八课

课程链接：http://www.verycd.com/topics/2834322/

*
古典 (Classics)

1.耶鲁大学开放课程：古希腊历史简介 Open Yale
course：Introduction to Ancient Greek History

版本1: MOV 高清版 更新完毕

课程链接：http://www.verycd.com/topics/2827190/

版本2: [YYeTs人人影视出品][中英双语字幕][更新第1节]

课程链接：http://www.verycd.com/topics/2832522/

*
生态学和进化生物学 (Ecology and Evolutionary Biology)

1.
耶鲁大学开放课程：进化，生态和行为原理  Open Yale course：Principles of Evolution, Ecology,
and Behavior

版本: MOV 高清版 更新完毕

课程链接：http://www.verycd.com/topics/2823010/

2.
耶鲁大学开放课程：生物医学工程探索 Open Yale course：Frontiers of Biomedical Engineering

版
本1: [YYeTs人人影视出品][中英双语字幕][更新第1节]

课程链接：http://www.verycd.com/topics/2834278/

版本2: [TLF出品, 简/繁/英字幕](更新至第二集)

课程链接：http://www.verycd.com/topics/2832411/

*
经济学 (Economics)

1.耶鲁大学开放课程：博弈论  Open Yale
course：Game Theory

版本1: 更新完毕[MOV]

课程链接：http://www.verycd.com/topics/2819856/

版本2: [YYeTs人人影视出品][中英双语字幕][更新第1节]

发行时间: 2010年06月30日

课程链接：http://www.verycd.com/topics/2832107/

版本3: 压缩包[mp3]含课堂板书和笔记

课程链接：http://www.verycd.com/topics/2761377/

2.
耶鲁大学开放课程：金融市场 Open Yale course：Financial Markets

版本1:
[YYeTs人人影视出品][中英双语字幕][更新第4节]

课程链接：http://www.verycd.com/topics/2830134/

版本2: 高清双语版[MOV]

课程链接：http://www.verycd.com/topics/2815985/

*
文学 (English)

1.弥尔顿   Milton, Fall 2007

2.
耶鲁大学开放课程：1945年后的美国小说 Open Yale course：The American Novel Since 1945

版
本1: 更新完毕[MOV]

课程链接：http://www.verycd.com/topics/2813721/

版本2: 耶鲁开放式课程/中文字幕/更新第二课

课程链接：http://www.verycd.com/topics/2834197/

3.
耶鲁大学开放课程：文学理论导论 Open Yale Course：Introduction to Theory of Literature

版本: 更新完毕[MOV]

课程链接：http://www.verycd.com/topics/2827779/

04

现代诗歌   Modern Poetry, Spring 2007

*历史
(History)

1.耶鲁大学开放课程：美国内战与重建，1845-1877 Open
Yale course：The Civil War and Reconstruction Era，1845-1877

版本: 更新完毕[MOV]

课程链接：http://www.verycd.com/topics/2813920/

2.
耶鲁大学开放课程：欧洲文明 Open Yale course：European Civilization

版本1: MOV
高清版 更新完毕 中文字幕更新第二讲

课程链接：http://www.verycd.com/topics/2823243/

版本2: [TLF出品,简/繁/英字幕](更新至第三集)

课程链接：http://www.verycd.com/topics/2831074/

版
本3: [YYeTs人人影视出品][中英双语字幕][更新第1节]

课程链接：http://www.verycd.com/topics/2832611/

3.
耶鲁大学开放课程：1871年后的法国 Open Yale course：France Since 1871

版本: MOV
高清版 更新完毕

课程链接：http://www.verycd.com/topics/2826754/

*
艺术历史 (History of Art)

1.耶鲁大学开放课程：罗马建筑 Open
Yale course：Roman Architecture版本: MOV 高清版 更新完毕 更新第一讲中文字幕课
程链接：http://www.verycd.com/topics/2824114/

*
意大利语言和文学 (Italian Language and Literature)

1.
解读但丁 Dante in Translation, Fall 2008

*分子，细胞和
发育生物学 (Molecular, Cellular and Developmental Biology)

1.
全球人口增长问题 Global Problems of Population Growth, Spring 2009

*
音乐 (Music)

1.耶鲁大学开放课程：聆听音乐 Open Yale
course：Listening to Music

版本1: 更新完毕[mov]

课程链接：http://www.verycd.com/topics/2814513/

版本2: [YYeTs人人影视出品][中英双语字幕][更新第1节]

课程链接：http://www.verycd.com/topics/2832525/

*
哲学(Philosophy)

1.耶鲁大学开放课程—哲学：死亡 Open Yale
course—Philosophy：Death

版本1: [YYeTs人人影视出品][中英双语字幕][更新到03集]

课
程链接：http://www.verycd.com/topics/2824902/

版
本2: 26课全（含笔记，另附苏三博客中文章节概要笔记）

课程链接：http://www.verycd.com/topics/2761032/

*
物理(Physics)

1.耶鲁大学开放课程：基础物理 Open Yale
course：Fundamentals of Physics

版本1: MOV 高清版 更新完毕

课程链
接：http://www.verycd.com/topics/2825965/

版
本2: [YYeTs人人影视出品][中英双语字幕][更新第1节]

课程链接：http://www.verycd.com/topics/2834907/

*
政治学(Political Science)

1.政治哲学导论
Introduction to Political Philosophy

版本: 耶鲁开放式课程/中文字幕/更新到第七课

课
程链接：http://www.verycd.com/topics/2834189/

*
心理学(Psychology)

1.耶鲁大学开放课程：心理学导论  Open Yale
course：Introduction to Psychology

版本: 更新完毕[MOV]

课程链
接： http://www.verycd.com/topics/2824035/

版
本: [YYeTs人人影视出品][中英双语字幕][更新第4节]

课程链接：http://www.verycd.com/topics/2827597/

2.
心理学，生物学和食品政治 The Psychology, Biology and Politics of Food, Fall 2008

*
宗教研究(Religious Studies)

1.耶鲁大学开放课程：旧约全书导论
Open Yale Course：Introduction to the Old Testament (Hebrew Bible)

版
本: 开放式课程更新第一集

课程链接：http://www.verycd.com/topics/2834690/

2.
耶鲁大学开放课程：新约及其历史背景 Open Yale course：Introduction to New Testament History
and Literature

版本: MOV 高清版 更新完毕

课程链接：http://www.verycd.com/topics/2826569/

中科院研究生课程

中科院研究生课程主页(非开放) http://210.76.200.32/

遗憾的是网址是中科院内部课件，非中科院的学生无法观看。所以特别感谢121786404同学珍贵的中科院课程资源，以下课程皆为121786404从淘宝
购买后个人发布分享，非常感谢,同时也希望有中科院课程的朋友可以分享给大家。主题贴：http://home.verycd.com/space.php?uid=2820590&do=thread&id=54132

计算机控制系统:

http://www.verycd.com/topics/2834350/

算法设计与分析:

http://www.verycd.com/topics/2834326/

矩阵分析:

http://www.verycd.com/topics/2834343/

数值分析:

http://www.verycd.com/topics/2834723/

模式识别:

http://www.verycd.com/topics/2834722/

小波与傅里叶分析:

http://www.verycd.com/topics/2834339/

小波域图像处理:

http://www.verycd.com/topics/2834337/

小波与滤波器组:

http://www.verycd.com/topics/2834813/

视觉分析和理解进展:

http://www.verycd.com/topics/2834331/

现代计算机视觉:

http://www.verycd.com/topics/2834158/

数字图像处理与分析:

http://www.verycd.com/topics/2834274/

数字图像处理与通信:

http://www.verycd.com/topics/2834816/

机器学习与图像视频分析:

http://www.verycd.com/topics/2834156/

信号及图像处理的框架和伪框架方法:

http://www.verycd.com/topics/2834721/

1. document.form.item 问题
(1)现有问题：
现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在Firefox(火狐)下运行
(2)解决方法：
改用 document.formName.elements["elementName"]

2. 集合类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，Firefox(火狐)不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

3. window.event
(1)现有问题：
使用 window.event 无法在火狐浏览器上运行
(2)解决方法：
火狐 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)： <br /><input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/><br />…<br /><script language="javascript"><br />function gotoSubmit() {<br />…<br />alert(window.event); // use window.event<br />…<br />}<br /></script>

新代码(可在IE和火狐中运行)： <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/><br />…<br /><script language="javascript"><br />function gotoSubmit(evt) {<br />evt = evt ? evt : (window.event ? window.event : null);<br />…<br />alert(evt); // use evt<br />…<br />}<br /></script>
此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在火狐中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。

5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在火狐中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。

6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 火狐 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE中能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

7. event.x 与 event.y 问题
(1)现有问题
在IE 中，event 对象有 x, y 属性，火狐中没有。
(2)解决方法
在火狐中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在IE与火狐中都有，具体意义有无差别尚未试验。

8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame，火狐中不行
(2)解决方法
在frame的使用方面火狐和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而火狐只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
火狐： 只能这样window.top.frameName来访问这个window对象

另外，在火狐和ie中都可以使用 window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = ‘xx.htm’来切换frame的内容
也都可以通过window.top.frameName.location = ‘xx.htm’来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试

9. 在火狐中，自己定义的属性必须getAttribute()取得

10.在火狐中没有 parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes的下标的含义在IE和火狐中不同，火狐使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和火狐对parentNode的解释不同，例如
<form>
<table>
<input/>
</table>
</form>
火狐中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

火狐中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。

12. body 对象
火狐的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding
在js中如果书写url就直接写&不要写&amp;例如var url = ‘xx.jsp?objectName=xx&amp;objectEvent=xxx’;
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&amp;
一般火狐无法识别js中的&amp;

14. nodeName 和 tagName 问题
(1)现有问题：
在火狐中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。

15. 元素属性
IE下 input.type属性为只读，但是火狐下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题
(1)现有问题：
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

17.最简单的鼠标移过手变型的css要改了

cursor:pointer;/*ff不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了，标准的是pointer

18.ff不支持滤镜 最常见的半透明不支持。

filter: Alpha(Opacity=50); /* for IE */
opacity: .5;/* for Firefox */

style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"

19.ff不支持expression 例如去掉链接的边框要分别写不同的css

a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */

20.ff不支持div滚动条的颜色设置，目前还没有找到替换的 好方法。

.contendiv {
position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;
line-height:120%;text-align:left; font-family:"宋体";word-break : break-all; color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}

这个在ff里面完全没有效果了。

21.ie下面显示在文字下面横线的

border-width: 0px 0px 1px 0px;在ff里面跑到文字上面去了。（查了手册还是没有找到解决的办法感觉莫名奇妙～～ 原来是ff的容错能力太差了，是下面的width: 186px;height: 0px;宽高 引起的，其实a:haver已经继承了上级的属性了，只要定义不同的样式就可以了，看来ff有助于制作标准化，简洁化的网页啊，对css的理解也更深刻， 对提供css来说是个很好的帮助）

.onelinksdiv a:hover {
display: block;border-style: solid;color: #ff0000;border-width: 0px 0px 1px 0px;
/*
display: block;border-style: solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
*/
}

//下面的写法在ie下面正常，但在ff下是错误的

.onelinksdiv a:hover {
display: block;border: #ff0000 solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
}

相关参考资料：

border-width:border-top-width border-right-width border-bottom-width border-left-width;

p#fourborders
{
border-width:thick medium thin 12px;
}

如果定义四个值,那么这四个值就分别是上,右,下,左边框的宽度值(从上边框开 始,以逆时针的顺序遍历).

等价于下面的定义

p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}

22.ff不支持<body scroll="no" > scroll属性

必须定义overflow:hidden;而且要在html标签下，不能在 body下

html{
overflow:hidden;
}

23.ff不支持数据岛绑定

<xml id="news" src="news.xml" ></xml>在ie下可以加载进数据，但到了火狐就加载不进数据了，开始以为可能是因为内容行文字太多导致不能断行不能加载，但删除 只剩几个字以后一样不行。

24.style="word-break:break-all"在网页中的单元 格里的内容超出一行时,在ie浏览器里定义的换行样式能够正常使 用,但在firefox里却不能被支持了.style="word-break:break-all" 是MS扩展的IE专有属性，并未成为W3C标准，因而 Firefox 还不能支持它。不过MS已经将其提交到了W3C，而在W3C的CSS3的候选方案中也能看到它。希望这个属性在被W3C最终定案的为CSS3标准 后，Firefox可以支持吧。这之前，可以试试
style="table-layout:fixed;word-wrap: break-word" （当它是英文的时候就不能正常换行了）

25.目前FF2.0为止都不支持IE的name锚 点

像这种写法都是不支持的：<a href="###" onclick="history.go(-1)">go back</a>
原来根据W3C的语法，<a>标签始终都会查找href地址并跳转过去，现在onclick事件与###这个地址又有冲突。

为了让Firefox与IE部分元素属性兼容，那个费劲，我无意中发现 Firefox对空格敏感：
<a onclick="window.location.href =’faq.php?page=messages#2′"> //有空格，锚点作用
<a onclick="window.location.href=’faq.php?page=messages#2′"> //无空格，锚点无作用

锚点的写法又十分讲究，比如<a name=#1>，Firefox不支持锚点，得加上id=#1
静态同页面引用时必须这样写：<a href="#1"></a>，<a href="static.html#1"></a>就不行，动态页面要用JS

后遗症来了，考虑到鼠标样式和浏览器兼容又开始折腾：
<a href="###" onclick=""> //不兼容
<a href="javascript:;" onclick=""> //不兼容
<a href="javascript:function();">   //没有{…},属于脚本的非法书写
<a style="cursor:hand" onclick=""> //没照顾到自定义系统鼠标样式的用户
<a href="javascript:onclick=”"> //状态栏会显现，href有多长显示多长
<a href=# onclick=""> //我用的

26.ff火狐下面不支持document.all 属性的，必需用document.getElementById(‘idName’);

以下是我的动画切换效果，在ie下正常，到了火狐里面就不动了，修改后可以切换图 片但渐隐渐现的效果就没有了。原因是火狐不支持滤镜filter,只好用半透明的div来实现了。

   /*
company page
*/
function playcompanyimg()
{

window.setInterval(‘changecompanyimg();’, interval);
}
function changecompanyimg()
{
/*
火狐下面不支持document.all属性的，必需用document.getElementById(‘idName’);
*/
    //if (document.all)
//{

   /**
   以下两句是在切换效果前切换背景图片的代码，number、image和idtemp要设置全局变量才可以
   */
number = Math.floor(Math.random() * image.length);
   idtemp.src=image[number];
   //alert(number+" ii "+idtemp.src)
   /**
   以下两句是实现幻灯片切换效果的
   */
   //alert(do_transition);
   //document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)";
   /*
   document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
   document.all.companyimg.filters[0].Apply();
   document.all.companyimg.filters[0].Play();
   */
   var companyimgidtmep = document.getElementById(‘companyimg’);
   companyimgidtmep.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
   companyimgidtmep.filters[0].Apply();
   companyimgidtmep.filters[0].Play();
    //}
}

参考资料：核 心：FILTER:revealTrans(duration=1,transition=23); 一个IE滤镜，  
在其它的非IE浏览器虽然不支持这个滤镜，但是支持透明滤镜的，你可以分一下，IE下继续使用你这个效果，而在非IE浏览器下用透明滤镜：

style.opacity
opacity = 0.5 CSS3

style.MozOpacity
-moz-opacity: 0.5 Mozilla 里等同上面这个滤镜 这个滤镜也适用于Netscape

style.KHTMLOpacity
-khtml-opacity: 0.5 Safari 里的透明滤镜。

IE：
obj.filters.alpha.opacity

to meizz(梅花雪)
其实我想过你那个问题的。但是透明 opacity 这个他不是一个渐变的过程。
一般这种图片过度特效最多持续一秒把，最多最多两秒 duration=2
超过2秒就很累赘，喧宾夺主了。
在2秒钟里面实现
g_img.style.filter="alpha(opacity="+i+")" 透明度的变化是比较累赘的事情。
要用 window.setInterval 改变 i 的值， 而且还要调用几十上百次window.setInterval
才能看到效果。
这样的话，我觉得得不赔失，是为了特效而特效了

另外一种考虑是，毕竟非ie浏览器是少数，即使在ff下 没有图片过度特效，其实也没什么，
还是很流畅，不过就是看不到ie里面的美而已。

27.ff下链接的onclick事件不起作用

<div id="bigwhatwedo" ><a href="javascript:onclick = display(‘whatwedo’)" target="">我们做什么</a></div> 在ie下没有问题，在ff下点击了没有反应。作了多次尝试，换成onclick="display(‘whatwedo’)"仍然不行，后来通过多次检 查，搜索仍然找不到门路，最后采用惯用的方法－－一步一步alert();出来看效果，原来他妈的是一个id的值写错了，但奇怪的是ie下面没有关系？是 ie的容错内容太强了还是火狐的容错内容太差了？不过还是喜欢火狐的严谨和标准哈。可以让人发现不少深层次的东西。哈哈。

28.ff中div定位不能通过js初始化

必须先设定值并且要设定度量单位 top:80px;left:212px;

29.ff不能用.click();方法打开链接， 终于暂时性的解决了

<div><a href="#" onclick="test1(2)" id="a3_a">hello</a> </div>
<div>
<a href="" onclick ="test2(1)" id="b3">hello2</a></div>
<div><a href="javascript:onclick =test2(1)" id="b3">hello3</a>触发事件放在href="javascript:onclick =test2(1)" 里面ff无效</div>
<div onclick="test2(1)" id="b3">hello3</div>    
<script language="javascript">
<!–
function test1(num)  
   {  
       window.alert(num);  
    }  
    function test2(num)  
    {  
var aaa_a = document.getElementById("a3_a");
       if(document.all)      {//if(getOs()=="MSIE"){//IE的处理
          aaa_a.click();      
    }        
     else
    {
      var evt = document.createEvent("MouseEvents");
       evt.initEvent("click",true,true);
       aaa_a.dispatchEvent(evt);
     }  
   } 

/*

判断浏览器类型

*/
function getOs()
{
    var OsObject = "";
   if(navigator.userAgent.indexOf("MSIE")>0) {
        return "MSIE";
   }
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
        return "Firefox";
   }
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
        return "Safari";
   }
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){
        return "Camino";
   }
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
        return "Gecko";
   }
}

//–>   </script>

<!– 由于这里的链接是index的iframe用href="#" 在ie中无法正常显示，
而用href="javascript:onclick = display(‘whatwedo’)"的方式火狐不支持打开第一个链接，火狐必须用onclick="display(‘whoweare’)"
本以为火狐浏览器使用的人很多，但从网站的统计分析来看火狐只有可怜的3.18%，但兼容他的标准确花费不少精力！不过标准化有利于以后的维护和扩展，有 利于技术的不断提示。
–>

30.OVERFLOW- Y:auto;OVERFLOW-X:hidden;在ie里面可以用no表示隐藏，但在ff里面必须用hidden

－－－－－－－－－－－－－－－－－－－－－－－－－

总结一下：目前有十个不兼容问题，还没解决的有：

1.ff不支持div滚动条的颜色设置，目前还没有找到替换的好方法，在许多标准 化的网站看到也是没有解决这个问题。

2.ff不支持数据岛绑定<xml id="news" src="news.xml" ></xml>在ie下可以加载进数据，但到了火狐就加载不进数据了，开始以为可能是因为内容行文字太多导致不能断行不能加载，但删除 只剩几个字以后一样不行。用w3c代码检测软件检测了一下，原来是自定义的xml标签通不过，所以火狐就不认了。

3.火狐不支持滤镜filter，无法实现图片切换中间变换的效果，只能通过透明 度来设置，但很麻烦.（这个目前暂不实现了）

每天学习一点点!