1.函数的return语句.

原文:函数的return语句将停止函数的运行,并把表达式的值返回给函数调用者,如果函数不包含return语句,它就执行函数体中的每条语句,然后返回给函数调用者undefined;

备注:为了便于链式操作,return返回的值应该考虑其重用度.通常我们使用语句if(condition) return;让不具备执行条件的函数终止运行.

2.函数的参数

原文:函数调用时,先要计算括号之间指定的所有表达式,然后把他们的结果作为函数的参数;

备注:None

3.构造函数Function()

原文:传递给构造函数Function()的参数中没有一个用于说明它要创建的函数名,用Function()构造函数创建的未命名函数有时被称为匿名函数;

备注:使用直接量/字面量也可以创建匿名函数;

原文:Function构造函数允许我们动态地创建和编译一个函数,它不会将我们限制在function语句预编译的函数体中,负面效应是每次调用一个函数,Function()构造函数都要对它进行编译

备注:预编译原理,待填充

4.函数直接量/字面量

原文:function语句/Function()构造函数和函数直接量定义三个基本相同的函数

function f(x){retrun x*x};
var f = new Function('x','return x*x');
var f = function(x) {return x*x};

备注:函数直接量与Function构造函数的区别(第四版11.5)

• (1)构造函数允许在运行时动态的创建和编译代码,但是函数直接量却是程序结构的一个静态部分;
• (2)每次调用构造函数都会解析函数体并且创造一个新的函数对象,如果对构造函数的调用出现在一个循环中,或者出现在一个经常被调用的函数中,这种方法的效率就非常低;
• (3)使用构造函数Function创建的函数不使用词法作用域,相反的,它们总是被当做顶级函数来编译.

原文:函数直接量创建的是匿名函数,但是语法规定它可以指定函数名,这在编写调用自身的递归函数时非常有用;

var f = function fact(x){if (x < 2) {return 1} else {return x*fact(x-1)}}

备注:等同于 var f = function(x){if (x < 2) {return 1} else {return x*arguments.callee(x-1)}};

5.arguments对象的length属性

原文:可以给arguments的length属性赋值;

备注:虽然可以更改arguments的length值,但与array不同的是,更改后并不影响参数的访问和调用.

e.g.

var f = function() {
arguments.length = 1;
console.log(arguments.length);
console.log(arguments[1])
}
f(1,2);

6.arguments与局部变量

原文:Arguments对象的数组元素是存放函数的局部变量的同义词.arguments[]数组和命名了的参数不过是引用同一变量的两种不同方法.通过arguments[]数组改变参数的值同样会改变用参数名获取的参数值

备注:

e.g.

var f = function() {
arguments[0] = 2;
console.log(arguments[0])
}
f(1);
var fn = function() {
var x = 2;
console.log(x)
}
fn(1);
var func = function(x) {
arguments[0] = 2;
console.log(x)
}
func(1);

7.函数的length属性

原文:函数自身的length属性是只读的,返回的是函数需要的实际参数的数目,也就是在函数的形式参数列表中声明的形式参数的数目;

备注:原文中给出例子检查传递的参数的个数是否与函数声明时设定的形式参数的数目相同,主要用到arguments.callee方法;

8.call()和apply();

原文:call()和apply的第一个参数都是要调用的函数的对象,在函数体内这一参数是关键字this的值;

备注:call和apply经常用在函数回调以及将array-like转换为array时使用.

第四版第八章 对象

1.属性的枚举

原文:for/in循环列出的属性并没有特定顺序,而且虽然它能枚举出所有的用户定义的属性,但是却不能枚举出没有预定义的属性或方法;

备注:与in语句不同的是in会检查对象的原型链;

2.属性的删除

原文:删除一个属性并不仅仅是把该属性设置为undefined,而是真正的从对象中移除了该属性.用for/in循环可以证明两者之间的区别,它枚举的是已经被设为undefined的属性,但是不会枚举被删除的属性.

备注:None

3.类(构造函数)属性/方法

原文:类属性/方法是一个与类关联在一起的方法,而不是和类的实例关联在一起的方法.要调用类方法,就必须使用类本身,而不能使用该类的特定实例;

备注:类属性如Number.POSITIVE_INFINITY,类方法如Date.parse等,*查阅core javascript reference;

4.constructor属性

原文:每个对象都有constructor属性,它引用的是用来初始化该对象的构造函数.

备注:在以原型为基础的库/框架里,这是由原型链特征,原型对象的constructor需要重置.

5.toLocaleString()方法

原文:在ECMAScript v3中,Array,Date和Number都定义了自己的toLocaleString()方法.

备注:查阅后填充.

6.hasOwnProperty()方法

原文:如果对象局部定义了一个非继承的属性,属性名是由一个字符串实际参数指定的,那么该方法将返回true;

备注:in语句会检查原型链,而不只是用户自定义的属性;

7.对象局限性的方法;

hasOwnProperty(),propertyIsEnumberabel()方法都带有一定的局限性,都不会去检查原型链.

/**
FILE: YUI.JS
LINE: 120-124,682-686
TAG: NONE
COMMENTS:for in 与hasOwnProperty在Y.Object中分别对应hasKey和owns方法,根据MDC的解释,与in操作符不同的是hasOwnProperty并不会去检查in对象的原型链,但是for in 函数只会遍历用户定义的属性(显式),在yui.js中,下面出现的代码片段中作为循环用.
MDC参考:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object/hasOwnProperty
::CODE START::
var o = {};
console.log(‘toString’ in o);
console.log(o.hasOwnProperty(‘toString’));
console.log(‘length’ in o);
for (var i in o) {
console.log(i);
};
::CODE END::
*/

for (j in m) {
    if (m.hasOwnProperty(j)) {
        mods[j] = m[j];
    }
};
for (i in p) {
    if (1) { // intenionally ignoring hasOwnProperty check
        YUI[i] = p[i];
    }
}

/**
FILE: YUI.JS
LINE: 254-257
TAG: applyTo
COMMENTS:return用在函数中,是将表达式的值传递给函数调用者,并停止函数运行,如果函数不包含return语句,则返回给调用者undefined(犀牛书第四版第七章),在yui2以及yui3中,会使用到return null,出于直白还是链式操作的考虑?;
e.g.
::CODE START::
var unknown_undefined = function() {return}(); //undefined
var known_undefined = function() {}(); //undefined
var unknown_null = function() {return null}(); //null
::CODE END::
*/

applyTo: function(id, method, args) {
    if (!(method in _APPLY_TO_WHITE_LIST)) {
        this.log(method + ': applyTo not allowed', 'warn', 'yui');
        return null;
    };
    /**some code*/
}

/**
FILE: YUI.JS
LINE: 1384-1387
TAG: YArray.test
COMMENTS:array-like的一些特征判断,array-like通常为函数的arguments,HTMLElement,当前版本的test方法未对HTMLElement进行处理, alert方法用于排除window,size方法用于排除file类型;对于array-like,犀牛书对此的解释是包含length属性的对象,并给出建造array-like的例子.
e.g.
::CODE START::
:::FLAG 1st
console.log(‘window.length’ + window.length + ‘window has alert’ + (“alert” in window));
var fsoActiveX = new ActiveXObject(“Scripting.FileSystemObject”),
fileActiveX = fsoActiveX.getFile(dir:\\filepath\\filename);
console.log(fileActiveX.length);
:::FLAG 2nd code source:https://developer.mozilla.org/en/DOM/File.size
var fileInput = document.getElementById(“myfileinput”);
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
alert(files[i].name + ” has a size of ” + files[i].size + ” Bytes”);
};
:::FLAG 3rd 犀牛书第五版第七章 7.8 Array-Like Object
var a = {}; // Start with a regular empty object
var i = 0;
while(i < 10) {
a[i] = i * i;
i++;
}
a.length = i;
::CODE END::
*/

if ("length" in o && !("tagName" in o) && !("alert" in o) &&
    (!Y.Lang.isFunction(o.size) || o.size() > 1)) {
    r = 2;
}

/**
FILE: YUI.JS
LINE: 1657-1671
TAG: YArray.each,YArray.some,YArray.indexOf
COMMENTS:YArray.each,YArray.some,YArray.indexOf分别对应javascript 1.6版本中的forEach,some,indexOf方法,yui3在实现上没有使用MDC所采取改变Array.prototype的方法,避免了对原生对象的污染.
MDC地址:https://developer.mozilla.org/en/New_in_JavaScript_1.6
e.g.
::CODE START::
NONE
::CODE END::
*/

YArray.each = (Native.forEach) ?
    function (a, f, o) { 
        Native.forEach.call(a || [], f, o || Y);
        return Y;
    } :
    function (a, f, o) { 
        var l = (a && a.length) || 0, i;
        for (i = 0; i < l; i=i+1) {
            f.call(o || Y, a[i], i, a);
       }
       return Y;
   };
YArray.indexOf = (Native.indexOf) ?
    function(a, val) {
        return Native.indexOf.call(a, val);
    } :
    function(a, val) {
        for (var i=0; i
            if (a[i] === val) {
                return i;
            }
        }
        return -1;
    };
 YArray.some = (Native.some) ?
     function (a, f, o) { 
         return Native.some.call(a, f, o);
    } :
     function (a, f, o) {
         var l = a.length, i;
         for (i=0; i
             if (f.call(o, a[i], i, a)) {
                 return true;
             }
         }
         return false;
     };

/**
FILE: YUI.JS
LINE: 1657-1671
TAG: Y.cached
COMMENTS:判断arg2的存在替代使用arguments.length的方法,简洁而高效;
e.g.
::CODE START::
NONE
::CODE END::
*/

Y.cached = function(source, cache, refetch){
    /**some code*/
    return function(arg1, arg2) {
        var k = (arg2) ? Array.prototype.join.call(arguments, DELIMITER) : arg1;
        /**some code*/
    };
};

/**
FILE: YUI.JS
LINE: 2670-2671
TAG: clearAttributes
COMMENTS:clearAttributes主要作用为移除节点属性,当前只有Internet Explorer支持,而对于style属性以及脚本类型的属性,id属性都不会移除.由于对于HTMLELEMENT类型的对象,设置其属性,在IE下使用delete移除将会抛错,抛错信息为此类对象不支持此方法;
关于clearAttributes可参考
MSDN: http://msdn.microsoft.com/en-us/library/ms536350%28VS.85%29.aspx
QuirksMode: http://www.quirksmode.org/dom/w3c_core.html
e.g.
::CODE START::
NONE
::CODE END::
*/

if (node.clearAttributes) {
    node.clearAttributes();
} else {
    for (attr in node) {
        if (node.hasOwnProperty(attr)) {
            delete node[attr];
        }
    }
}

/**
FILE: YUI.JS
LINE: 2668-2686
TAG: _purge
COMMENTS:移除节点前移除绑定在节点元素上的方法,防止内存泄露,通常在此情况防止内存泄露的方法为将属性(方法)值重置为null;
e.g.
::CODE START::
node.attr = null;
::CODE END::
*/

for (i=0; i
    node = n[i];
    if (node.clearAttributes) {
        node.clearAttributes();
    } else {
        for (attr in node) {
            if (node.hasOwnProperty(attr)) {
                delete node[attr];
            }
        }
    }
    h.removeChild(node);
}

/**
FILE: YUI.JS
LINE: 2670-2671
TAG: INSTANCE.log
COMMENTS:opera中的javascript控制台输出信息的方法,opera.postError;
opera开发者社区参考

http://dev.opera.com/articles/view/how-to-debug-javascript-problems-with-op/

e.g.
::CODE START::
NONE
::CODE END::
*/

if (typeof console != UNDEFINED && console.log) {
    f = (cat && console[cat] && (cat in LEVELS)) ? cat : 'log';
    console[f](m);
} else if (typeof opera != UNDEFINED) {
    opera.postError(m);
}

/**
FILE: YAHOO.DEBUG.JS
MODULE: YAHOO.env.ua
COMMENTS:前增符号和后增符号的区别
e.g. CODE:
var i = 1;
console.log(i++); //print 1
console.log(i); //print 2
*/

var numberfy = function(s) {
    var c = 0;
    return parseFloat(s.replace(/\./g, function() {
        return (c++ == 1) ? '' : '.';
    }));
}

/**
FILE: YAHOO.DEBUG.JS
MODULE: YAHOO.LANG
COMMENTS:NaN的特殊性
e.g. CODE:
console.log(typeof NaN); //print ‘number’
console.log(isFinite(NaN)); //print false
*/

isNumber: function(o) {
    return typeof o === 'number' && isFinite(o);{
}{

/**
FILE: YAHOO.DEBUG.JS
MODULE: YAHOO.LANG
COMMENTS:修复ie中无法对派生对象(DO)中javascript原生(函数)方法(navtive function)进行枚举,即使在派生对象中这个方法已经被覆盖;
e.g. CODE:
var o = {
toString: function() {
alert(“toString”);
},
valueOf: function() {
alert(“valueOf”);
},
noNative: function() {
alert(“noNative”);
}
};
for (var i in o) {
console.log(‘o enmuerate: ‘ + o.hasOwnProperty(i) && i);
};
*/

_IEEnumFix: (YAHOO.env.ua.ie) ? function(r, s) {
    /**some code*/
} : function() {}

/**
FILE: YAHOO.DEBUG.JS
MODULE: YAHOO.LANG
COMMENTS:注意构造器链(constractor chain),原型链(prototype chain)以及实例化,此函数实为犀牛书中”子类与超类”一章的副本,
犀牛书章节: 9.5 Superclasses and Subclasses
e.g. CODE:
YAHOO.lang.extend(PositionRectangle,Rectangle,{});
*/

extend: function(subc, superc, overrides) {
    /**some code*/
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:document.compatMode = BackCompat || CSS1Compat,分别对应浏览器渲染的两种方式Quirks Mode和Standards Mode,主要取决于为文档类型doctype的声明.在Dom脚本中的表现主要为对元素盒模型的解释问题进行处理,主要应用在元素坐标和高宽的几个方法上.
e.g. CODE:
*/

NONE

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:为了避免一些函数的重复执行,考虑到重用度,创建缓存对象.
e.g. CODE:
*/

var reCache = {};
_getClassRegex: function(className) {
    var re;
    if (className !== undefined) { // allow empty string to pass
        if (className.exec) { // already a RegExp
            re = className;
        } else {
            re = reCache[className];
            if (!re) {
                /**some code*/
                re = reCache[className] = new RegExp(C_START + className + C_END, G);
           }
       }
    }
    return re;
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS: GET_BOUNDING_CLIENT_RECT = getBoundingClientRect,方法支持IE(above 5),在Firefox(above 3)中开始支持,返回数组对象,通过top,bottom,left,right.
e.g. CODE:NONE
*/

_getXY: function() {
    if (document[DOCUMENT_ELEMENT][GET_BOUNDING_CLIENT_RECT]) {
        /**some code*/
    } else {
        /**some code*/
    }
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS: Elements.offsetParent 表示元素坐标原点所指向的元素.一般情况下元素指向Document元素 也就是body;当子元素样式position属性为非static且父元素亦非static时,子元素的offsetParent为父元素;
table中的tr和td元素的offsetParent指向table元素
e.g. CODE:
#c {
position:relative;
}
#d {
position:fixed;
top:1px;
right:1px;
}
<div id=”c”>ContainerC<div id=”d”>ContainerD</div></div>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ id=”e”>
<tr><th>Header</th></tr>
<tr id=”f”><td id=”g”>Data</td></tr>
</table>
*/

(function(){
    /**some code*/
})();

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:
e.g. CODE:
*/

//Line 734

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:
e.g. CODE:
*/

generateId: function(el, prefix) {
    var f = function() {
        /**some code*/
    }
    // batch fails when no element, so just generate and return single ID 
    // 代码的严密性 
    return Y.Dom.batch(el, f, Y.Dom, true) || f.apply(Y.Dom, arguments); 
} 

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:Element.compareDocumentPosition 和 Element.contains分别为Firefox和其他浏览器检测父级元素是否包含某个指定的子元素方法,参考资料:

http://www.quirksmode.org/blog/archives/2006/01/contains_for_mo.html

e.g. CODE:
*/

isAncestor: function(haystack, needle) {
    haystack = Y.Dom.get(haystack);
    needle = Y.Dom.get(needle);
    var ret = false;
    if ( (haystack && needle) && (haystack[NODE_TYPE] && needle[NODE_TYPE]) ) {
        if (haystack.contains && haystack !== needle) { // contains returns true when equal
            ret = haystack.contains(needle);
        }
        else if (haystack.compareDocumentPosition) { // gecko
            ret = !!(haystack.compareDocumentPosition(needle) & 16);
        }
    } else {
        /**some code*/
    }
    /**some code*/
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:除去执行函数外,提供有效的返回值.YUI中大部分函数方法都会提供合适的返回值,便于链式操作
e.g. CODE:
*/

batch: function(el, method, o, overrides) {
	var collection = [];
	/**some code*/
        for (var i = 0; i < el.length; ++i) {
            collection[collection.length] = method.call(scope, el[i], o);
        }
    /**some code*/
    return collection;
}

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:获取document的scrollHeight,scrollWidth,clientHeight,clientWidth属性和当前文档显示模式有关,如果浏览器是safari或者chrome也会有一些区别.主要考虑横向或者纵向滚动条出现的问题
出现滚动条时,Safari的clientWidth以及clientHeight是不包含滚动条的宽度
e.g. CODE:
*/

 var width = self.innerWidth,  // Safari
    height = self.innerHeight, // Safari, Opera
    scrollWidth = (document[COMPAT_MODE] != CSS1_COMPAT || isSafari) ? 
                      document.body.scrollWidth : documentElement.scrollWidth

/**
FILE: DOM.DEBUG.JS
MODULE: YAHOO.DOM
COMMENTS:replace方法 string.replace(regexp, replacement) 其中replacement如果为函数,可传递多个参数,第一个参数为匹配正则的的字符串,第二个为匹配分组的字符串,第三个为匹配字符串出现的位置,最后一个为字符串本身.
e.g. CODE:
*/

_toCamel: function(property) {
	/**some code*/
    function tU(x,l) {
        return l.toUpperCase();
    }
    return /**some code*/ property.replace( /-([a-z])/gi, tU );
}

/**
FILE: EVEVT.DEBUG.JS
MODULE: YAHOO.EVENT
COMMENTS:使用call或者apply方法将arguments由类数组转换为数组
e.g. CODE:
*/

var args=[].slice.call(arguments, 0);

检视了一下CSS 2.1文档,Normal Flow,指正常文档流,在W3官方的CSS  2.1文档中并没有直观的表述,而是阐述了它与元素上下文环境的关系:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.

正常文档流中的盒模型属于格式化过的块元素上下文环境或者是行内元素上下文环境,块元素处于块元素上下文环境中,而行内元素则处于行内元素上下文环境中.

对于块元素关系环境,W3在CSS 2.1文档中的解释比较模糊:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

浮动元素,使用绝对定位的元素(position属性值为absolute或fixed),另外display属性值为inline-block,table,table-cell,table-caption以及overflow属性值为auto,scroll,hidden的元素可以产生一个新的块元素上下文环境.

而在Mozilla Dveloper Center中有更详细的解释:

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

Block formatting contexts are important for the positioning and clearing of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

所谓的块元素上下文环境是网页样式渲染机制的一部分,它限定了块元素布局区域以及浮动元素相互影响的范围.

现象:正常文档流与元素定位

根据官方文档对于绝对定位,相对定位的解释以及例子,先对使用绝对定位以及相对定位元素与正常文档流的关系做出一个参考性结论.查看例子Example1;从左到右为Example1_N0-Example1_N6.

父级顶层容器(OUTER)通用样式

float:left;margin-right:20px;width:200px;line-height:25px;

父级次层容器(SUB_OUTER)通用样式

background:#eee url(line_mark_1.gif) scroll repeat-x 0 100%;

使用定位方法进行布局的子元素(INNER)样式见页面顶部黑色块状内内容.

Example1_N0为正常文档流,顶部绿色标记线与底部绿色标记线距离为500px;

Example1_N1中INNER使用相对定位,非块状,定位元素原空间空白占位显示,顶部绿色标记线与底部绿色标记线距离为500px;

Example1_N2中INNER使用相对行为,块状显示,定位元素原空间空白占位显示,占位空间为块状化后尺寸,顶部绿色标记线与底部绿色标记线距离为500+2(horiziontal border width)px

Example1_N3中INNER为相对定位,块状显示,高度减少25px,定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为(500-25)+2px;

Example1_N4中INNER为绝对定位,绝对定位元素以块状显示,高度减少25px,定位元素无空白占位空间,顶部绿色标记线与底部绿色标记线之间的距离为500-50px;

Example1_N5中INNER为相对定位,以块状显示,高度减少25px;宽度增加为210px;定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为(500-25)+2px;OUTER与SUB_OUTER可见宽度及内容宽度无变化(与overflow:visibile相关).

Example1_N6中INNER为绝对行为,绝对定位元素以块状显示,高度减少25px;宽度增加为210px;定位元素为块状化后并以最终计算高度以空白空间方式占位,顶部绿色标记线与底部绿色标记线距离为500-50px;OUTER与SUB_OUTER可见宽度及内容宽度无变化(与overflow:visible相关).

根据Example可以得出绝对定位和相对定位元素同正常文档流之间的关系的参考性结论,对于使用相对定位的元素,并未脱离正常文档流,而是相对正常文档流进行了偏移,偏移量受top/bottom,left/right值所限,同时并以元素最终计算尺寸以空白形式占位正常文档流.对于使用绝对定位的元素,从正常文档流中脱离,不占有正常文档流空间.另外还可以得出结论,在默认元素样式属性overflow的值为默认的visible(body的默认值为auto;)的情况下,不对其父及容器产生影响.

现象:正常文档流与块元素上下文环境

从Example1中我们得出使用绝对定位以及相对对元素进行定位后与正常文档流之间的关系,Example2对正常文档流与块元素上下文环境进行简要分析,得出参考性结论.查看例子Example2,从下之下为Example2_N0(_1-6)-Example2_N7.

红色为父级顶层容器(OUTER),通用样式如下:

width:400px;height:400px;background:#f00 url(ruler.gif) no-repeat scroll 0 300px;

绿色为父级次层容器(SUB_OUTER),通用样式如下:

width:500px;height:300px;background:#0f0 url(ruler.gif) no-repeat scroll 0 200px;

蓝色为使用绝对定位的子容器(INNER),通用样式如下:

width:800px;height:200px;background:#00f url(ruler.gif) no-repeat scroll 0 0;

样式差异见表格Example2_N*中的Property列.

Example2_N0,OUTER,SUB_OUTER,INNER存在于由BODY生成的默认块元素上下文环境中,主要作用为对照.在Firefox 2.0(Above),Opera 9(10)中OUTER的scrollWidth,clientWidth均为400px,SUB_OUTER的scrollWidth,clientWidth均为500px,Internet Explorer 6(7),Chrome 2,Safari 4 将OUTER,SUBOUTER的有效内容宽度scrollHeight增加到800px,也就是等于INNER的宽度,而在Internet Explorer 6 中,OUTER,SUB_OUTER的可视宽度clientWidth增加到800px,所以在Internet Explorer 6下OUTER,SUB_OUTER的实际显示的宽度为800px,这应该是Internet Explorer 6一直存在的一个解释上的Bug.

Example2_N1中,由于对SUB_OUTER使用相对定位,会在OUTER的空间中保留占位空间,相当于在OUTER中保留一个样式属性position值为static的SUB_OUTER,所有浏览器都以各自的正常情况显示.从这个例子来看,BODY为原始的块元素上下文环境,而INNER为元素级别的第一个块元素上下文环境,它的作用是将其所包含的子元素与INNTER所在的外部上下文环境所隔离,在本例中无实际作用.

Example2_N2中将SUB_OUTER样式属性overflow设置为auto;可以看到SUB_OUTER出现滚动条,由于SUB_OUTER此时的可视宽度clientWidth为500px,而INNER的scrollWidth有效内容宽度为800px,滚动条可拖动范围为(800-500)px.其他现象同Example2_N1.Example2_N3将SUB_OUTER样式属性overflow设置为hidden,各元素width值与Example2_N2相同,INNER超出SUB_OUTER的宽度被隐藏,值得注意的是,在Example2_N2中,Internet Explorer6(7)滚动条拖动时拖动对象还包含SUB_OUTER自身,而不只是对其包含的子元素,也就是INNER进行拖动.

Example2_N2以及Example2_N3共同点在于样式属性overflow的值均不等于visible.因此SUB_OUTER新建了一个块元素上下文环境,其所包含的子元素INNER便与SUB_OUTER的外部上下文环境相隔离,而此时SUB_OUTER的有效宽度scrollWidth等于INNER的有效宽度,为800px.

在Example2_N4中,将OUTER的样式属性overflow设置为auto,在Example2_N5中将OUTER的样式属性overflow设置为hidden,同理,此时OUTER将会新建一个块元素上下文环境,在Firefox 2.0(Above),Opera 9(10),Chrome 2,Safari 4 中 OUTER的有效内容宽度scrollWidth值为800px,等于INNER的宽度,在Example2_N4中,滚动条的可拖动范围为(800-400)px,包含SUB_OUTER(500-400)px.不过在Internet Explorer 6(7)下OUTER的有效内容宽度scrollWidth值为500px,可视宽度clientWidth的值变为400px,滚动条可拖动范围为(500-400)px,拖动对象为OUTER自身.

Example2_N6与Example2_N4,Example2_N7与Example_N5的区别相同,在OUTER添加了样式属性position,值为relative,而此时Internet Explorer做出与其他浏览器相同的解释,不过对于Example2_N6,Internet Explorer保留了与Example2_N2以及Example2_N4的相同现象,滚动条拖动对象包含自身.

从Example2中我们可以得出一个临时参考性结论,Firefox,Opera,Chrome,Safari当新的块元素上下文环境产生时,可以直接影响其包含的所有子元素,而Internet Explorer则受正常文档流的限制要多.

(未完)

原文:http://lifesinger.org/blog/?p=909

个人认为,em,strong的原始意义为在某个句子,段落或者整篇文章中强调某个单词或某个句子的重要性,按照西方的习惯和大部分字体设计,font-style为normal,italic,bold.分别正常字体,斜体和粗体,是递进性的语气.

那么建立在上面的理解基础之上,讨论em,strong的使用上的区别并没有太多的意义,因为限定了使用的环境为句子,段落和整篇文章.

其实大部分情况下,使用em,strong也只是为了减少class,id选择器的使用,如果只是单纯的为了页面高亮(highlight)之用,em不再是斜体,而strong也不再是粗体,既然这样,外观(appearance)就是样式表所控制的,em,strong和span的使用也再无任何语义上的区别.

另外,斜体在中文排版中是不适用的,中文的斜体很大程度上降低了可辨识性.

dl,dt,dd,作为定义列表和其他标签的区别:

1. 用作解释和诠释.也就是说dt和dd是语义上有等级层次之分,但是dt中的文本内容从结构上并不能够直接包含dd中的文本内容.借用w3schools的例子,对咖啡的解释就是如此,原文解释咖啡为热的黑色饮料.

黑色的表示颜色,热,饮料表示温度和状态,但热的黑色的饮料不一定就是咖啡.

2. 专业术语或者比较笼统,需要拆分解释的.例如Adobe的Adobe cs4产品页面中用到的定义列表用于解释新功能.例如对Fireworks4的新功能概括为 “使用 Adobe Fireworks CS4 制作 Web 原型和编辑图像”.那么有必要进行拆分解释.链接如下:

http://www.adobe.com/cn/products/creativesuite/mastercollection/features/

3. dl是列表,也就是集合性质的,考虑到样本容量,在多个定义存在的情况下才有必要使用,如果只是单个样本存在,是否可以考虑使用如下结构:

div-title-description,也就是div-h2,h3,h4-p,ul,div…

4. 如果dt和dd如果直接存在意义上的包含,可以考虑使用div-title-description结构,也就是div-h2,h3,h4-p,ul,div…

5. e.g. 淘宝的商品信息描述,如果单纯考虑到页面结构,页面可以用到定义列表,拆分为主的,而非完全解释性的.对一件商品进行描述.如一件衣服:

<dl/>

<dt/>销售信息可以分为:<dd/>-<ul/>-<li/>价格,运费,剩余时间…

<dt/>产品信息可以分为:<dd/>-<ul/>-<li/>尺码,大小,颜色…

毕竟只是个假设,可以看到现在商品信息页的结构并没有这么简单.

针对样式表置入方式不同,也有不同的使用方法.

使用链接方式的,可以设置media属性的值:

<link rel="stylesheet" media="screen" href="screen.css" type="text/css">

使用导入方法的,可以使用下面的方法:

@import url(screen.css) screen;

使用置入页面style标签中的以及使用链接或导入方式而将media属性设置为all的,可以在规则代码中这样设置:

@media screen {};

最近写CSS时特别针对Handheld Media Type设置了一下,自己测试了几款移动浏览器,包括Pocket Internet Explorer 7,Opera Mobile 8.65,Opera Mini 4,还有Mozilla的Minimo 0.2对Media Types设置的处理都有所不同.HtmlDog曾经提供过一个测试页面检测浏览器对screen和handheld Media Type设置的处理方式.链接:http://htmldog.com/test/handheld.html

Opera开发社区也提供了一个测试包,包含Media Queries的测试,下载地址:code_storey_operamini4.zip

对于CSS Queries的支持程度还有其他一些比较详细的信息可以在这篇文章中了解到,文章里面浏览器分析部分译文.

Opera Mobile

对CSS有相当高的支持度;
能够识别handheld,但是你不能将handheld混合在声明为all规则中;
支持Media Queries;
对没有设置Media Type为handheld的页面,默认识别为screen,不过页面会被重新格式化以适应屏幕显示,实际上只有一小部分的样式被应用;
用户可以设置某些选项以禁用重新格式化功能,取而代之的是使用和桌面浏览器版本相同的方式进行渲染;
在高分辨率的设备上不会以handheld样式现实,但是仍然会受限于Media Queries的设置;
可以被识别为手持设备浏览器.

Opera Mini

主要运行在小屏幕和低性能的手持设备中;
安装高性能设备中的Opera Mini 4高度支持CSS;
能够识别handheld,但是你不能将handheld混合在声明为all规则中;
支持Media Queries;
对没有设置Media Type为handheld的页面,默认识别为screen;
对于高性能设备上的Opera Mini 4,完全体会不到利用鼠标操作桌面版本的快感,文本被折叠起来以适应屏幕尺寸;
无论是在低于Opera Mini 3的版本中,或是高端以及低端设备中的Opera Mini 4,设置某些选项后,页面会被重新格式化以适应屏幕显示;
可以被识别为手持设备浏览器.

NetFront/Blazer

对CSS的支持不够好;
默认识别为screen,忽略Media Types设置,页面会被重新格式化以适应屏幕显示;
某些特殊版本只识别为handheld,如果你没有设置handheld样式,页面会以无样式显示;
@media实现不完全,经常会无视Media Types而出现错误的应用;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
会被识别为桌面浏览器.

Pocket Internet Explorer

对CSS支持差;
同时以screen和handheld样式显示,页面会被重新格式化以适应屏幕显示,只有相当少的样式会被应用到页面;
支持设置media属性的方法,但不支持@media和@import方法;
某些时候支持@media方法,但是并不可靠,大部分页面仍然不会正常显示,如果使用Media Queries,样式内容可能被忽略;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
可以被识别为手持设备浏览器,你可以使用CSS覆盖(重载)的方法使用handheld样式覆盖screen样式.

Series 60 Browser and Safari on iPhone

基于Safari engine,因此对CSS有相当高的支持度;
会被识别的screen,忽略Media Types设置;
某些更新版本支持Media Queries;
会被识别为桌面浏览器.

Minimo

基于Gecko引擎,对CSS有相当高的支持度;
默认识别为screen,忽略Media Types设置,页面会被重新格式化以适应屏幕显示;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
会被识别为桌面浏览器.

由于Opera Mini并不是采用直连服务器的方式,而是在Opera的代理服务器(Opera Mini Server)对所访问的网页进行转化压缩后才显示在屏幕上,所以它的特征显得比Opera Mobile要特殊一些,要详细了解可以看一下Opera在开发社区的这篇文章.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns.

微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性,它是建立在已经被广泛使用的标准之上的一套简单开放的数据格式.我们不需要抛开我们的工作习惯,因为微格式提供符合当前我们行为和习惯模式的简便方法去解决问题.

从上面的话中,我们可以分析出微格式是一种”数据格式”,它的存在是为了在兼顾机器和人类的条件下用最简单的方法去解决存储和表达数据的方法.然后从下面的一副图中,我们可以看到微格式的架构方式和表现形式,这幅图也是出自现在官方的解释页面.

从上面的图中,可以看到XML,XHTML,微格式的相互关系.XHTML是XML的一种衍生和补充,XHTML的基础是XML.XML是一种数据存储方法,而XHTML更偏向于结构的直观表现,XHTML的产生弥补了XML的不直观的特点,降低了终端用户使用XML的困难程度,但是也从一定程度上忽略了XML存储数据的特征.举一个简单的例子,如果将一本书的信息用XML表现,或许可以这样写:

<books>
<book>
<title>Books’s name</title>
<author>Book’s author</author>
</book>
……
</books>

如果我们直接使用(X)HTML表现:

<ul>
<li>
<span>Book’s name</span>
<span>Book’s author</span>
</li>
……
</ul>

排除故意极端简化XHTML代码,可以看到,XHTML只是呈现给人类看的,我们可以理解,这是一本书,书名是什么,作者是什么.但是反应给机器的只是一段代码,没有任何含义的代码.如果我们这样写这段代码

<ul class=”books”>
<li class=”book”>
<span class=”title”>Books’s name</span>
<span class=”author”>Book’s author</span>
</li>
……
</ul>

当然,上面的这段代码只是举例之用,不是微格式规范.排除使用DOM方法分析代码中的钩子(hook),机器也不可能从其中读取什么有效信息,但是至少这样有一种方法可以让机器读取代码中所反应的数据.对于class是否滥用可以看一下这篇文章的解释.而微格式的产生正是弥补了XHTML在数据存储上的弱点,可以说增强了XHTML的数据的机读性,或许我们也可以说增强了标签的语义表现.

到此为止了?微格式做的只是如此?当然不是.分析来看,第二段代码和第三段代码对终端用户看来并没有什么差别,在屏幕的表现是一样的.这样增强机读性,增强语义化产生不了任何作用,只是白白在代码中平添了几个字节,或许更有理由让人说我们这是在滥用class,我们继续,首先看看用微格式增强机读性后用来做什么.

Yahoo是微格式的大力提倡者.Flickr一个图片分享平台,用vcard微格式处理用户信息数据,通过应用软件直接获取页面上的用户信息数据后,将这些数据导出或者直接导入到其他的应用程序中,例如使用Firefox的operator插件可以分析和到处数据,然后根据提取的geo,location等地理信息在Google Map,Yahoo Map中定位用户,伴随着相关应用软件的开发,vcard数据可不只是能用作这些.再来看看Yahoo的对微格式的另外一个应用upcoming,是一个日历的事件管理应用,在获取页面的hcalendar微格式数据之后,它可以将数据导出或者直接导入到其他的web日历事件管理软件中.

Dopplr提供的或许更加让微格式的应用方向更加清晰.它提供的服务是将你的行踪与你的联系列表关联起来,方便你的朋友关注你的行踪,及时的为你提供帮助,主要方式为常规的RSS订阅和iCal订阅.你在网上的某些页面的hcard,hcalendar微格式数据可以导入到Dopplr中,然后可以将这些数据导入到支持Dopplr的微格式数据的程序中,当前主要为Mac机的iCal和支持多个系统平台兼容iCal数据格式的Mozilla产品Sunbird.

说到这里,使用微格式不只是web代码语义化那么简单.如何应用微格式是最重要的.对于微格式如何被解析,可以看看Brian Suda的一篇文章Parsing Microformats,或许有所帮助.到Brian Suda的个人网站上也可以找到更多有趣的东西.

网格的存在在字体设计中是因为要求字体具有良好的辨识性,而在传统的平面设计和排版行业中,除去作为信息载体的可读性的特征,网格系统的使用有助于生产效率的提升.而网页作为承载信息的新媒体,是传统媒体在屏幕上的表现形式,网格系统的使用同样能提升可读性和效率.而负责表现形式的表现层主要是由层叠样式表(CSS)来控制的.

网页网格系统组成元素(翻译自Web Standards Creativity一书)

宏观元素(Macro elements)表现:宏观元素主要负责网页结构(Structure)表现.主要包含内容分栏(Columns),网站头部(Master head),主导航(Main navigation)和网站底部(Footer).

微观元素(Micro elements)表现:微观元素主要为结构内部的填充元素表现.主要为侧栏元素(Sidebar elements),状态栏(Status boxes),标题(Headings),列表(Lists),表格(Tables),链接(Links),段落(Paragraphs),图片(Images)等.

网页网格系统的实现要点

由于网页主要显示载体为屏幕,不像传统的纸张一样具有固定的画布(canvas)尺寸,整个页面的比例(ratios)要求考虑到元素的度量,如画布,字体,图片,边距以及其他空白的单位设置.另外还需要考虑到网格系统的重用性(reusable),扩展性(flexible),兼容性(compatible)等要点.
[未完待续,详细看一下当前存在的几种网格布局(YUI Grid,Blueprint,YAML,960 Grid)的实现再写.]

文档名称:MicroFormats Cheat Sheet
作者:Brian Suda
文档语言:英语
版本号:r14
文档地址:http://suda.co.uk/projects/microformats/cheatsheet/
文档更新订阅:http://suda.co.uk/projects/microformats/cheatsheet/changelog.xml

文档名称:微格式快速参考表
作者:Soda
文档语言:简体中文
版本号:r14
文档地址:http://files.cheshirecat.cn/microformats.cheatsheet-zhCN.pdf
文档打印详细:PDF格式,生成程序illustrator CS3,CMYK四色,适合打印.纸张大小为A4

微格式的官方网站是这样描述微格式的产生和应用的:

微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性,它是建立在已经被广泛使用的标准之上的一套简单开放的数据格式.

因为微格式是建立在广泛采用的标准之上的,这就意味着发布者只需要为原始网页上的HTML标签添加一些额外的语义化的代码就可以了.微格式赋予了HTML元素超越其本身语意的含义,这是一个粉碎,混合以及聚合的过程.举个例子,通过在网页上为一个即将发生的事件添加一些语义化的标记,例如事件发生时间这些属性就会被类似个人事件管理器的这类服务或者软件所抓取.

微格式所涉及的全部是页面上的语义化信息的表现,它将信息以一种非直观的方法表达出来.将这种将语义化的信息直接放入到HTML代码中的方法并不是一个新鲜事物,在web产业化时期,人们就将这个概念讨论了不止十年,但是,直到在许多志愿者不断的发布文档,提供支持,编撰代码库和开发一系列工具之后,微格式才真正展现在我们眼前.

在本篇文章中,我只是就微格式自身的简单应用进行阐述,难度也就仅限于为一个HTML元素添加一个Class属性的程度.相信我,体会微格式的益处不过是轻而易举.

贯穿全文的两个案例都是最平常不过的,接下来我们看一下如何对人和事件信息进行微格式处理.

另辟蹊径

借用微格式官方网站的一个比喻,微格式在尝试铺设小路.你无时无刻都可以看到各种各种的小路,在图书馆附近,公园里和大学周围.人们总是习惯在原来的路上铺设出属于自己的捷径,然后日复一日,这些路就越来越明显.强制人们遵守约定俗成的方法倒不如另辟蹊径.

微格式尊重人们的选择,使用不断积累的各式各样方法去扩展那些已经发布的信息.微格式成功之处正是在此,它不强制人们去改变它们的习惯,要想修改你发布的信息,你只需要稍微修改一下HTML代码就完成了.

使用微格式处理用户信息

网上存在多少份用户信息?几乎在每个你所注册的站点上都会存在一个包含姓名,昵称,email,URL和其他联系信息的个人页面.使用微格式,我们可以让信息更加有用.你可以想象一下,你不用使用复制粘贴这种费时费力的方法,只需要使用导入就可以将你的用户信息导入到其他的应用程序之中,节约了你每次注册时都要填写重复信息的时间,而你的朋友只需要轻轻点击一下就能将你添加到他们的联系列表之中并且会随你信息的变化而更新联系列表.

hCard就是为了适应这种需求而产生的一种微格式,它是基于已经被广泛使用的vCard之上.你可能不会知道,当时使用你的移动电话进行联系人信息处理时,可能到现在为止你使用vCard对你的地址本进行导入导出操作已经十年了.当然,你就没有必要再去发明轮子,hCard的好处正是在这里,只需要一点必要的帮助能够读取vCard的程序也能轻松读取hCard信息.

hCard主要用来标记人,地点和组织信息.hCard必选的属性只是name一项,其他属性都是可选的.这里提醒一下,由于微格式的原则之一是不对已经发布的信息进行任何多余的修改,也就是说如果你在发布信息时,如果你没有设置电话,email和地址信息,hCard并不会强制你进行添加.

现在看下面这个简单的例子,这是一个很常见的朋友同事信息列表:

<li>
<a href=”http://suda.co.uk”>Brian Suda</a>
</li>

首先我们要做的就是在HTML中添加一个值为vcard的类(Class),这样数据就被封装在这个类中.

<li class=”vcard”>
<a href=”http://suda.co.uk”>Brian Suda</a>
</li>

vcard是一个容器,这样列表项(li)元素中的数据就被当作vCard类型数据.

可能现在有人会说,类(class)只是使用在CSS中的,你这不是滥用么?或许不是,根据HTML4规范,class属性只是浏览器的一个常规属性,而微格式只是可以接受class属性的使用而已,这里的class属性并没有真正应用CSS.接下来,我们为这个例子中的列表项(li)元素添加name属性:

<li class=”vcard”>
<a href=”http://suda.co.uk” class=”fn”>Brian Suda</a>
</li>

我们在这里为”a”元素添加了一个值为”fn”的class属性,”fn”相当于vCard值”FN”,它是”Formatted Name”的缩写,在大部分应用是是被用来显示名称的.在这里我们还可以添加其他的语义化属性值,我们刚才只是设置了”name”,但是这里还存在一个链接,于是我们还可以为”a”元素的class属性添加一个”url”的值.

<li class=”vcard”>
<a href=”http://suda.co.uk” class=”url fn”>Brian Suda</a>
</li>

你可能会有疑问,一个class属性可以有多个值么?答案当然是肯定的.class属性具有相当强的扩展性,你可以添加其他你想添加的值,只需要以空格进行分割就可以,这些值可以包含CSS类名称.对于HTML和微格式这都是有效的.

轻而易举,如此几下我们就使用hCard对一个列表进行了微格式处理.当任何能识别微格式的软件打开我们的网页时,它很容易就获取这些姓名和相关链接的信息.

更多hCard的信息你可以在微格式的官方站点上找到,站点上描述了几乎全部你可能会为一个人或者是地点,组织添加的信息,包含地址,电话号码email,网站和组织角色.作为一个信息发布人员,你可以自己去手动去添加,当然你也可是使用一些有用的插件去创建它们.它们算起来并不多,并且都富有一定的含义,所以理解起来很容易,这个列表可能会对你有所帮助.

使用微格式处理事件信息

当然信息不只是涉及到人和地点,常见的还有在线发布的提醒事件.人们发布着各种各样与时间相关的信息以方便记忆,为了给这些数据富有语意,志愿者们创建了hCalendar微格式.像hCard一样,hCalendar是建立在已经被广泛应用的iCalendar之上的.下面我们以常见的blog文章格式为例.

<p>
Hey everyone,
next week is my birthday party,
we should all meet up at my house for pizza.
</p>

你不用思考就可以看出在上面内容中所反应出来的信息,人类是聪明的,通过逐行的阅读,我们可以清楚上面事件的细节内容,例如事件发生的时间和地点.而我们的电脑,在这方面,可以说是愚蠢的.它们不会认为这是一个事件,而是只把它们当作一个文本段落,不过在添加hCalendar之后,它们就可以正确的获取这些重要的信息.接下来我们看如何为上面的文字段添加hCalendar标记:

<p class=”vevent”>
Hey everyone,
next week is my birthday party,
we should all meet up at my house for pizza.
</p>

第一步为p元素添加一个值为vevent的class属性,分析器将会认为包含在p元素中的数据都涉及一个事件.在上一个例子中,我使用的是li元素,微格式不会强制要求使用指定的HTML元素,但是附加语意能否正确应用取决与你所选择的元素.接下来我们为这个事件添加一个摘要(summary).

<p class=”vevent”>
Hey everyone,
next week is my
<span class=”summary”>birthday party</span>,
we should all meet-up at my house for pizza.
</p>

通过将”birthday party”封装在一个添加了值为”summary”的class属性的span元素中,我们可以说这个就是整个事件的摘要.我们使用相同的方法为此事件处理地点信息,只需要将地点信息封装在一个添加了值为”location”的span元素中就可以了.

<p class=”vevent”>
Hey everyone,
next week is my
<span class=”summary”>birthday party</span>,
we should all meet-up at
<span class=”location”>my house</span>
for pizza.
</p>

最后,最为重要的是为此事件添加一个发生的时间,这就体现了微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性的特征.人类可以理解什么是”next week”,但是电脑不行,我们需要对”next week”进行精确的表述.

ISO的日期标准格式”YYYY-MM-DD”,必须是一个四位数的年,两位数的月和一个两位数的日期,在计算机相关领域广泛使用,但是对人类来说它的可读性并不是最好的.ISO这种日期格式虽然解决了美国日期和欧洲日期存在的差异,但读起来不怎么自然.所以我采取一个折中的方法去解决这个人类的可读性和机读性的问题.

<p class=”vevent”>
Hey everyone,
<abbr title=”2008-05-29″ class=”dtstart”>
next week</abbr> is my
<span class=”summary”>birthday party</span>,
we should all meet-up at
<span class=”location”>my house</span>
for pizza.
</p>

通过使用一个class属性值为”dtstart”的abbr元素,我们可以理解这个日期是事件的起始日期,计算机在不明白”next week”的情况下会尝试去读去abbr中的title属性值去解释”dtstart”,然后就可以获取ISO日期.如果你不明白在这里我为什么选择abbr元素,你可以参考一下这里.

在进行上面的一系列处理之后,这些事件信息就很容易被各种各样的日历程序所获取.你可以将它们发送到电脑或者移动电话上,当然也可以使基于web的日历应用,或者和朋友分享,或者使用已经存在的接口应用程序去发布它们.

如何使用微格式

我在这里提供一些工具便于你对微格式进行有效的创建和信息获取.

hCard Creator会根据你在表单中所添加的信息动态的创建代码,然后你可以这些代码复制到你的网页中.自然而然,会有hCalendar Creator的程序.还有Dreamweaver,Textpattern,Wordpress的微格式插件和为数众多的hCard和hCalendar网上资源.

但是如果你对微格式不能进行获取和利用的话,创建就没有任何意义.自然,这里会有很多用于微格式获取和维护的程序.

Operator是firefox的一个插件,它会对你当前浏览的页面进行侦测并提供了相关选项和工具,以hCard为例,一旦hCard内容被侦测到,它就会列出一个列表并且显示一个”导入联系信息”的选项.Operator非常智能,它不只是会获取这些信息,同时也会提醒你当前页面存在微格式内容.

Technorati 提供hCard和hCalendar的微格式支持,如果你提交一个含有hCard和hCalendar信息的页面,其提供的微格式服务会返回vCard和iCalendar的等价信息.Technorati当前正在测试一项微格式搜索引擎服务.如果站点在Technorati的索引列表中,而网站的HTML包含任何微格式内容,数据就是可以被搜索到的.这样,你可以设置一个iCalendar订阅项,当你所在城市发生包含”jazz”,”tech”或”Frisbee”这些关键字的事件事,网络成为了一个你的数据库.这只是迈向语义化搜索的第一步,也是很多年前就已经被预料到的.

还有各种各样程序语言提供的库方便我们去获取HTML中的微格式,然后应用到web中.

MoFo for Ruby
Sumo for JavaScript
X2V in XSLT
hKit in PHP
Text::Microformat for Perl

真实世界中的hCard和hCalendar

现在一些组织已经开始微格式去处理他们的数据,有些你听说过,有些你可能没有.

Yahoo!是微格式的大力倡导者,在它旗下的众多站点中都可以看到微格式的踪影.例如图片分享站点Flickr,事件站点Upcoming,还有它的科技站和本地站.

Flickr,正如你在图1中所看到的,在用户信息页面上应用了微格式的hCard,也就是你可以直接将用户信息页面上的微格式数据导入你的地址本.如果你已经安装了Firefox的Operator插件,你就会看到可以将微格式数据导入到各种各样的地址本中,不管是桌面程序还是web程序.

Upcoming,如图2,在站点中使用了微格式的hCalendar去处理事件数据,这会让我们方便不少,当浏览Upcoming是就可以随时将事件数据导入到自己的日历事件管理器程序中.

在Yahoo!的科技站和本地站中,使用到hCard去处理本地公司数据.如果你在Yahoo!本地站搜索披萨店会返回hCard格式的数据,你很方便的就可以获取它们的电话号码去订购.

另外一个让人惊喜的微格式应用是柬埔寨黄页,这个公司将hCard用在电话目录中,创建了数百万的语义化数据实例,所做的只是改动一下内容管理工具的模板.

对于微格式在移动社会化网络中的应用,我们可以由Dopplr可窥一二.当前Dopplr还处于内部测试阶段,它面向的社会群体主要是那些频繁旅行的人.如果某一天它正式发布,你可以创建新账号,然后通过提交一个包含微格式数据的链接页面导入联系列表,Dopplr会自动分析页面,获取联系人信息并在它的数据库中查找你的联系人.它也可以导入hCalendar数据.如果你计划一个旅行,你可以通过提交一个使用了hCalendar的链接页面,Dooplr就会分析页面数据然后把它导入到你的计划表中,而你的朋友可是随时注意你的行踪.

最近,Microsoft也提供了一个简要的教程指导人们如何在SharePoint中使用hCard对联系人信息进行处理.

微格式展望

微格式的未来当然是光明的,一些网络主流公司让微格式的未来越来越明朗化.例如Yahoo!,它们在预见微格式的潜力之后将它应用到不同的产品中,而从浏览器厂商也开始表现出浓厚兴趣,不断的在其产品中添加功能以支持语义化标记.

你可以想象一下,你的移动电话或者掌上电脑可以自动获取一个页面上的hCard数据,它会在电话号码上添加一个菜单项方便你拨叫,如果配置适当的话,你可以将这个信息直接导入到电话本中.如果数据中包含一个邮政地址,浏览器会将这些信息发送到Google Map,并在地图上显示详细位置.

当然数据的自由移动可不仅仅限制于联系人信息,你可以对事件数据和其他结构的数据进行相同的应用.如果浏览器在一个页面上发现了hCalendar数据,它便将事件信息导入你所使用设备的日历事件管理程序上,添加一个提醒或在地图上标记位置.微格式的优点也在于对终端用户它是不可见的,并不是每个使用微格式的人都需要了解.从本质上将,微格式只是将数据自由化程度加大了.

RSS阅读器在这段时间非常流行,那我们是不是可以对地址本做一个类似订阅的功能.当前情况下,我们只能一遍又一遍的将朋友的email和网站复制到自己的地址本中.这是一项无聊透顶的工作.如果地址本使用RSS的推送功能,我的朋友很容易的采用用微格式创建了他们的联系信息页面之后,地址本应用程序便能在这些页面上搜索信息并能即使更新,他们也不必说每次有信息改变时就给他们地址本里的人群发通知.

这里所提到的例子都是微格式的简单应用,需要做的只是发布者在HTML添加语义化信息就可以了.不管上面的例子是如何实现的,终端用户只是应用就足够了,不必去究根问底.

微格式社区变得越来越强大,影响力也与日剧增.由于它的开放性,越来越多的人在Microformats Wiki上不断的添加案例和文档,最容易做的就是在你自己的站点上去使用微格式.使用微格式,你可以将你网站上呆板的文本内容变成你无法想象功能强大的信息包.