简单其实不简单

HTML的历史

HTML是Web统一语言，这些容纳在尖括号里的简单标签，构成了如今的Web，1991年，Tim Berners-Lee编写了一份叫做“HTML标签”的文档，里面包含了大约20个用来标记网页的HTML标签。他直接借用SGML的标记格式，也就是 后来我们看到的HTML标记的格式。本文讲述了HTML这门Web标记语言的发展简史。

从IETF到W3C：HTML4之路

HTML1并不曾存在，HTML的第一个官方版本就是由IETF（互联网工程任务组）推出的HTML2.0。问世之前，这个版本中的很多细则已经被 实现，比如，1994年的Mosaic浏览器已经实现了在文档中嵌入图片的方法，后来HTML2.0便吸纳了img这个标签。

后来，W3C取代IETF的角色，成为HTML的标准组织，1990年代的后半页，HTML的版本被频繁修改，直到1999年的HTML4.01， 至此，HTML到达了它的第一个拐点。

XHTML1：XML风格的HTML

HTML在HTML4.01之后的第一个修订版本就是XHTML1.0，其中X代表“eXtensible”，扩展，当然也有人将之解读为 “eXtreme”，极端。XHTML1.0是基于HTML4.01的，并没有引入任何新标签或属性，唯一的区别是语法，HTML对语法比较随便，而 XHTML则要求XML般的严格语法。

使用严格的语法规范并非坏事，要求开发者使用单一的代码风格，比如，HTML4.01允许你使用大写或小写字母标识标记元素和属性，XHTML则只 允许小写字母。XHTML1.0的推出刚好碰上了CSS的崛起，Web开发设计者们开始意识到Web标准问题，基于XHTML的严格语法规范被视为编写 HTML代码的最佳实践。

W3C推出XHTML1.1

如果说XHTML1.0是XML风格的HTML，XHTML1.1则是货真价实的XML。这意味着XHTML1.1无法使用 text/htmlmime-type直接输出，然而，如果Web开发者使用XMLmime-type，则当时的主流浏览器，IE则压根不支持。看上 去，W3C似乎正在与当时的Web脱节。

出力不讨好的XHTML2

对W3C而言，到了HTML4已经是功德圆满，他们的下一步工作是XHTML2，希望将Web带向XML的光明未来。虽然XHTML2听上去和 XHTML1类似，它们却有很多差别，XHTML2不向前兼容，甚至不兼容之前的HTML。它是一种全新的语言，赤条条来去无牵挂。这实在是一场灾难。

WHATWG：与W3C决裂

W3C闭门造车的作风引起了一些人的不满，来自Opera,Apple,以及Mozilla的代表开始表达反对声音。2004年，Opera的 Ian Hickson提议在HTML基础上进行扩展以适应新的Web应用，该提议遭到W3C的拒绝。于是，他们自发组织成立了超文本应用技术工作组，就是 WHATWG。

从WebApps1.0到HTML5

从一开始，WHATWG就和W3C走不同的路线，W3C对问题的讨论是集体投票，而WHATWG则由主笔IanHickson定度。表面上 看，W3C更民主，然而事实上，各种内部纷争会使一些决议限于泥潭，在WHATWG，事情的进展会更容易，不过，主笔的权力并非无限大，他们的委员会可以 对那些过于偏执的主笔进行弹劾。

一开始，WHATWG的主要工作包括两部分，Web Forms 2.0和Web Apps 1.0，它们都是HTML的扩展，后来，他们合并到一起成为现在的HTML5规范。

在WHATWG致力于HTML5的同时，W3C继续他们的XHTML2.0，然而，他们慢慢地陷入困境。

2006年10月，Web之父Tim Berners-Lee发表了一篇博客文章，表示，从HTML走向XML的路是行不通的，几个月后，W3C组建了一个新的HTML工作组，他们非常明智地 选择了WHATWG的成果作为基础。这一转变带来一些困惑，W3C同时进行这两套规范，XHTML2和HTML5（注意，W3C的HTTML5在5之前有 个空格，而WHATWG的HTML5则没有空格），而WHATWG也在进行着同样的工作。

XHTML已死：XHTML语法永存

这一混乱局面到了2009年开始变得清晰，W3C宣布终止XHTML2的工作，这是一份关于XHTML2的迟到的讣告。这一消息被那些XML的反对 者视为珍宝，他们借此嘲笑那些使用XHTML1规范的人，然而他们似乎忘记了，XHTML1和XHTML2是截然不同的东西。于此同时，XHTML1规范 的制定者担心，XHTML1中的严格语法规范会被HTML5弃用，这种担心后来证明是多余的，HTML5既支持松散语法，也支持XHTML1般的严格语 法。

HTML5路线图

HTML5的现状是，它不再象以前那样让人困惑，然而仍不够明朗。有两个组织在同时制定它的规范，这两个组织有着完全不同的行事风格，WHATWG 是先买后尝，W3C是先尝后买，他们形成了一个不太靠谱的联姻，最终人们必将面临一个HTML5还是HTML5的问题。

更让开发者困惑的是，他们什么时候才可以试水HTML5。

在一次访谈中，Ian Hickson提到了2022，表示要到那时HTML5才会形成"推荐标准"，此话一出，立刻招来Web设计者们的愤怒，尽管他们不知道推荐标准时什么意 思，但他们明白，2022已经是猴年马月的事了。

这还不算，更重要的是，这个推荐标准涉及两套规范，考虑到HTML5标准的规模，这个日期还是太乐观了，毕竟，各大浏览器以往对既有标准的兼容并不 遂人意，想当初，IE花了10年才接纳abbr这个标签。

2012年，HTML5会被接纳为候选标准，这将是HTML5真正开始发力的日子。对Web开发设计者来说，这并不重要，重要的是浏览器的支持，就 像CSS2.1，当有浏览器开始支持这一规范的时候，就有开发设计者在使用了，倘若必须等到所有浏览器都支持才开始入手，恐怕我们现在还在等待中。

HTML5也一样，并不会有一个时间点，宣布HTML5已经准备妥当，相反，我们会先开始使用它的部分功能，HTML5并不是一个从零开始全新的东 西，它是旧的HTML标准的改进，事实上，不管你正在使用的HTML是哪个版本，你已经在使用HTML5了。

用HTML工作几年了，还不太了解HTML的历史，惭愧，信在CB上看到的，转一下吧！

jQuery.contains()函数在Firefox下的'bug'

再来写点有关contains的事情，今天做项目时刚好可以用上contains，只是我的项目是基于jQuery的，就使用jQuery内部的jQuery.contains()函数了，但我发现这函数在Firefox有问题。

先看下测试Demo

$(document).ready(function(){
    alert( $.contains($('div.wrap')[0], $('#fdsfafd')[0]) );
    alert(4322);
    $('h1').click(function(){alert(111);});
});

在Firefox下，如果$('#fdsfafd')[0]不存在会导致整个页面的JS锁死，不再会执行任何代码了。

我现在的解决办法是是保证$.contains()中第二个参数存在，代码如下：

alert( $.contains($('div.wrap')[0], $('#fdsfafd')[0]||$('body')[0]) );

方法我知道很淫荡，但先这样了，没时间去改jQuery的内部实现。

contains()函数使用一例

今天看到的，让我了解了下compareDocumentPosition()、contains()函数，以后判断是否在元素上面就有新方法了。其它的也没什么好说，看下Demo吧！

window.onload = function () {
    document.getElementById('dropdown').onmouseover = openMenu;
}

function openMenu(e) {
    var evt = e || window.event;
    var tgt = evt.target || evt.srcElement;
    while (tgt.nodeName !== 'LI') {
        if (tgt.nodeName === 'HTML') {
            return;
        }
        tgt = tgt.parentNode;
    }
    var nested = tgt.getElementsByTagName('ul')[0];
    if (nested) {
        nested.className = 'open';
        tgt.onmouseout = function (e) {
            var evt = e || window.event;
            var related = evt.relatedTarget || evt.toElement;
            if (!nested.contains(related)) {
                nested.className = '';
                tgt.onmouseout = null;
            }
        }
    }
}

/* Bloody Firefox STILL doesn't support contains */

if (window.Node && Node.prototype && !Node.prototype.contains) {
    Node.prototype.contains = function (arg) {
        return !!(this.compareDocumentPosition(arg) & 16)
    }
}

汉化了下SQLyog Ultimate 8.32正式版

Update 2011-12-13：SQLyog Ultimate 9.3.3 简体中文正式版出来了，用新的去吧！

说实话SQLyog不好汉化，居多的资源，光非标部分ASCII、Unicode、UTF-8字符串都有，而且汉化很容易出bug。对ASCII的字符依然不知如何进行汉化，我直接写入汉字在运行后就会是乱码，这次我对Unicode、UTF-8进行了独立汉化，在汉化8.12版时的很多问题都解决了。所以这次汉化率会比上次高些，但仍然不是完全，我尽我最大努力了。

这个版本同样没有汉化完全，对非标字符的汉化还是很棘手，这次发现Athena-A能在译文比原字符长时使用挪位，但我只会使用“超写”的功能，而且当可用的空白位不够时同样不知如何处理，无奈！

快捷键对照表那块Athena-A无法找到，使用eXeScope到是能进行汉化，原本这一块已经汉化完了的，但在一次操作时覆盖掉了，所以就不再重复一次了，这次仍然是英文的。^0^ God！！！

来张汉化后的图

这次SQLyog更改了注册算法，以前的注册机没用了，但我找到个可用的注册码，也分享出来吧！

Name: Any
Registration Code: 26f359fc-e3f6-4727-8af1-72a1a4a0819d

差点忘了放汉化版的下载地址了，猛点这里 。地址已修改，不再放在自己的空间里，写博文时就把软件提交给绿色联盟了，原意是等收录了再改过去，但他们瞧不上我的分享一直不给收录，那算了放网络U盘里吧！一样可以下载。

2010年5月27日更新：收到网友邮箱说在XP下有点问题，小修正了下，下载地址在这里猛点这里。（感谢守护幸福的反馈） 很早了，睡觉去了！早安 ^..^

Update(2010-08-26)：今天有网友反应下载地址不能用了，这也很正常了，115网盘的共享有效期只有30天，今天再次共享下，有需要的朋友可以去下载。有朋友说SQLyog 8.6正式版出来了让我赶紧去汉化，但我最近没多少空余的时间去做汉化工作，再者我手上也没有英文正式版的文件，找正式版的原文件也是很费劲的，如有朋友找到了可以发给我，我争取抽点时间汉化出来。

轻量的JS模板

这JS模板实在是太轻量了，只是个简单替换，只因为我太不喜欢不同语言的东东相互拼接。

昨天偶然看一"blog"上个有轻量的JS模板，作者的目的也是为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。有兴趣的可去看看 《Tempo.js : 轻量的JS模板工具类》。

刚好我现做的项目有大量的HTML与JS的拼接，但作者的实现有对不适合我的代码风格，我做了些修改就运用到我的项目里，也把我修改后的代码放出来吧！写成这种形式是为了更方便的嵌入到我的项目中来，而且我也没用到更复杂的功能，最最简单的替换就够了，就像Tempo.js的作者想法：为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。

var Obj = {
    yyTemp: function(id, data, def){
        var dom = document.getElementById(id);
        var parseObj = dom[id] || (dom[id] = (function(html){
            html = html.replace(/([\'|\\])/gm,"\\$1")   //转义掉 \ 和 '
                        .replace(new RegExp('{([^{}]*)}','gim'), "'+(typeof data[\"$1\"] != 'undefined'?data[\"$1\"]:'')+'")  //转化为包括变量的字符串
                        .replace(/[\n\r]/gm,'');    //去除回车换行
            html = ["return '", html ,"';"].join('');
            console.log( html );
            return new Function('data',html);
        })(dom.innerHTML));
        if(data.length){
            for(var i=0,ar; ar=data[i]; i++){
                data[i] = parseObj(ar);
            }
        }else data[0] = def || '';
        dom.innerHTML = data.join('');
    }
};

使用方法更简单，模板这样写就可以了：

<ul id="asins">
    <li class="{class}">{title}</li>
</ul>

简单的使用：

var arr = [
    {title:'再简单不过的JS模板系统','class':'c'},
    {title:'也就一点点功能','class':'cl'},     
    {title:'够用就好，呵呵','class':'cls'},
];
Obj.setTemp('asins', arr, '<li>Null</li>'); 

我这里加了个默认值，虽然以这种方式写默认值不太喜欢，但也没想到更简单合理的方式。

更重要的一点改进是HTML中不用另外写个模板标签，要生成的代码就是模板所在的位置，更不用另外每次指定了。

如果不希望在HTML加载时看到模板代码，可以进行些改进：

模板改成这样：

<ul id="asins">
    <li style="display:none;" class="{class}">{title}</li>
</ul>

JS代码也改一点点就可以了，注意粗体部分：

这JS模板实在是太轻量了，只是个简单替换，只因为我太不喜欢不同语言的东东相互拼接。

昨天偶然看一"blog"上个有轻量的JS模板，作者的目的也是为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。有兴趣的可去看看 《Tempo.js : 轻量的JS模板工具类》。

刚好我现做的项目有大量的HTML与JS的拼接，但作者的实现有对不适合我的代码风格，我做了些修改就运用到我的项目里，也把我修改后的代码放出来吧！写成这种形式是为了更方便的嵌入到我的项目中来，而且我也没用到更复杂的功能，最最简单的替换就够了，就像Tempo.js的作者想法：为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。

var Obj = {
    yyTemp: function(id, data, def){
        var dom = document.getElementById(id);
        var parseObj = dom[id] || (dom[id] = (function(html){
            html = html.replace(/([\'|\\])/gm,"\\$1")   //转义掉 \ 和 '
                        .replace(/ style="display: ?none;?"/i,'')    //去除隐藏
                        .replace(new RegExp('{([^{}]*)}','gim'), "'+(typeof data[\"$1\"] != 'undefined'?data[\"$1\"]:'')+'")  //转化为包括变量的字符串
                        .replace(/[\n\r]/gm,'');    //去除回车换行
            html = ["return '", html ,"';"].join('');
            console.log( html );
            return new Function('data',html);
        })(dom.innerHTML));
        if(data.length){
            for(var i=0,ar; ar=data[i]; i++){
                data[i] = parseObj(ar);
            }
        }else data[0] = def || '';
        dom.innerHTML = data.join('');
    }
};

之所以写成这样是因为各浏览器对HTML代码渲染后的结果不一样！FF chrome Opera IE8 IE6下都没有问题。

在性能上比你的这种方式平均慢上10ms左右吧！还能接受，这种方式最主要是不用写多条语句实现目的，另外我对给出的数据加了个简单的判断，如果没有给出会留空而不像你的这种会在HTML中出现undefined字符。猛点这里查看Demo