易栈网-膘叔

shawphy说到：圆角？抱歉，你的浏览器不支持。请升级以获得更好体验。
为此，他写了一篇博客，当然也有人有不同意见。所以有就有了这样的回复，当然他的回复不是为了针对内容的：

shawphy这样回复：

原文地址为：http://shawphy.com/2009/08/sorry-you-should-upgrade-your-broswer.html

之前写过一篇博客，问是否敢对IE6说不。实际上，我虽然自己没有公然抗议，暗自的还是有一些的。

最常见的就是:hover伪类了。除了二级菜单这类关键部位之外，其他地方一律用此处应当使用的标签，而不滥用a。其:hover伪类IE6无法支 持，大不了少了点效果而已，不会有功能损失。想获得更好体验？请升级。为此写脚本做兼容？抱歉，我没时间。实际上，很多时候需求方并不在意这些细节交互地 方。他们都不在意，你在意什么？

圆角？对不起，我可不高兴用一堆标签弄出圆角来。九宫格之类的办法不是不会，只是嫌麻烦。一堆标签自己看得心烦。直接用border-radius，浏览器要支持你就圆角，不支持就方的好了，没什么了不起的。除非需求方强烈要求，那在说

阴影？呵呵，同样对不起，阴影如果方便直接背景就背景，不方便实在抱歉……我给一个box-shadow已经很不错了，兼容Chrome Firefox 3.5呢。没了阴影功能又不会缺失，可有可无。

文字阴影？text-shadow伺候，如果需求方执意要求，那只能做背景图了……只是Chrome下文字阴影效果真是颗碜。。。

其实CSS3有很多很美妙的特性，利用这些特性可以非常轻易制作很出众的效果，何苦为了一些效果而花费大量时间呢？
适当跟需求方说明这些。告诉他们实现这些所要消耗的人力成本有多高。让他们自己决定哪些一定要，哪些可以放弃一部分低级浏览器用户。
在完善的沟通下，才能说服老板，说服需求方逐步抛开低级的浏览器，才能促进整个大环境的改变。

Gracecode网上的文章，好象研究了比较深。
本文的亮点写在了内容中，但我觉得argements.callee这个用法还是很有特色的。以前都是用this之类的来解决。。。

还有一个亮点就是document.Fragment这个东西。。。

不废话看原文：

异步 innerHTML

innerHTML 插入节点的性能的问题，通常是我们最关注的。在回答这问题时，James Padolsey 给出了他的解决方案，看到上述代码不仅赞叹了下：

JavaScript代码
function asyncInnerHTML(HTML, callback) {  
    var temp = document.createElement('div'),  
        frag = document.createDocumentFragment();  
    temp.innerHTML = HTML;  
    (function(){  
        if(temp.firstChild) {  
            frag.appendChild(temp.firstChild);  
            setTimeout(arguments.callee, 0);  
        } else {  
            callback(frag);  
        }  
    })();  
}  

1. 充分利用闭包解决 IE6 的内存溢出问题
2. 使用延时 0 将操作从队列中拉出，防止浏览器假死
3. Document Fragment 给予我们个相当好的沙盘，只是我们经常忘记了它
4. 回调的节点可以使用 DOM 标准的手法（appendChild）插入

了解了参数就很容易调用，例如

JavaScript代码
var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';  
asyncInnerHTML(htmlStr, function(fragment){  
    document.body.appendChild(fragment);  
});  

再次不禁赞叹下！

组织 innerHTML 字符串

说到 innerHTML ，通常在这操作之前会有大部分的字符串操作用于连接节点。考虑下面的三种做法，有何不同

方式一

JavaScript代码
var arr = ['item 1', 'item 2', 'item 3', ...];  
for (var i = 0, l = arr.length, list = ''; i < l; i++) {  
    list += '<li>' + arr[i] + '</li>';  
}  
list = '<ul>' + list + '</ul>';  

方式二

JavaScript代码

1. var arr = ['item 1', 'item 2', 'item 3', ...];  
2. for (var i = 0, l = arr.length, list = []; i < l; i++) {  
3.     list[list.length] = '<li>' + arr[i] + '</li>';  
4. }  
5. list = '<ul>' + list.join('') + '</ul>';  

方式三

JavaScript代码

1. var arr = ['item 1', 'item 2', 'item 3', ...];  
2. var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';  

详细的对比测试在这里（没错，还是 James Padolsey 那小子的 Blog）。同时，PPK 也整理了份有关 innerHTML 的速度测试报告。

IE 的陷阱

对于 IE，innerHTML 有个不大不小的陷阱（via），就是在 tbody 中插入 innerHTML 时，会报莫名的“未知的运行错误”。

测试地址在这里（经过测试，在 IE8 中仍然如此）。有兴趣的同学可以参看更详细的信息。

其实这个还是很好认的啦。呵呵
this，如果是取得元素的话，则对应当前元素的对象
$(this)则是当前元素被jQuery处理的对象。

看看作者是怎么写的，来源：http://www.cnblogs.com/RuiLei/archive/2009/08/20/1550804.html。

起初以为this和$(this)就是一模子刻出来。但是我在阅读时，和coding时发现,总不是一回事。

What is "this"?

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

$("#textbox").hover( 
      function() { 
           this.title = "Test"; 
      }, 
      fucntion() { 
          this.title = "OK”; 
      } 
);

这里的this其实是一个Html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了，Error--报了。

Error Code：
$("#textbox").hover(
       function() {
          $(this).title ＝ "Test";
       },
       function() {
          $(this).title = "OK";
       }
);

这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：

正确的代码：
$("#textbox").hover(
      function() {
         $(this).attr(’title’, ‘Test’);
      },
      function() {
         $(this).attr(’title’, ‘OK’);
      }
);

使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。

参考：http://remysharp.com/2007/04/12/jquerys-this-demystified/

 --EOF--

一般来说，在代码中，尽量使用$(this)，一来代码更规范一点，二来，jQuery的函数你也就可以直接调用了。如$(this).children()之类的。。

8个手册，8张图片，懒得一张张的COPY，于是直接复制过来。主要的还是那8个链接，我就在想，我是否仅保留链接而不留图片呢？又怕帕兰映像说我不负责。
原文地址为：http://paranimage.com/8-html-cheat-sheets/，图片也挺标准，大小也差不多。。。

HTML做为一门基础的前端开发技术，简单易学。但元素属性过多，也记不过那么多来，比如我就一直记不得常用HTML实体字符的代码。本文收集整理一些HTML手册，包含HTML实体字符手册，HTML标签手册，XHTML手册和HTML5手册等等。

HTML 4.01 / XHTML 1.0 参考手册（HTML）

面向PHPuk3i.@F(Bk

W3CShool提供。按字母顺序列出的HTML 4.01/XHTML 1.0在线标签手册，以及显示每个标签在哪种DTD中是被允许的，点击每个标签都有详细的注解。

c Yo4I(ucW-pT!l1

#xee t!N X3DV-Y8M1

U+Ph8Q*h5{2?r1

HTML颜色速查表(PDF)

面向PHPN1`2r#H[~3BlE

'N:Ao+N^wI_~1

HTML5 Canvas速查手册

g#t%l)Kr7k1

"M1?8lS Jp7uA1

HTML 字符实体手册（PNG+PDF)

/?%Zh.O Gb1面向PHP
bJ.|:X(q7A

HTML帮助手册

d9i e'SQ"o$U-}&C1liquidicity制作的手册都比较漂亮，感觉兴趣的还可以看看我们之前介绍的他们制作的WordPress模板代码帮助手册(简易版和高级版)。面向PHP7Xo+_rQ%[JN[_f

d4qJ5{3i(^*n%n+a1面向PHP&d(Y"GQKU^D

简易的HTML标签手册

面向PHPdl8P/io'`'K5U-r3r

一套简易HTML手册，包含了常用标签，字符实体，空标签，属性和事情等。含PDF和PNG版本。
z.I8o&X_){[1

Zyh~�vL7a1

HTML 5手册

T ]'s];g`p6`7QBi N1Smashing Magazine发布的一份HTML 5标签速查手册。面向PHP9vOon9n
G

HTML元素手册

最终我还是把地址整理一遍，方便大家查看或下载

1. HTML 4.01 / XHTML 1.0 参考手册（HTML）

2. HTML颜色速查表(PDF)

3. HTML5 Canvas速查手册

4. HTML 字符实体手册（PNG+PDF)

5. HTML帮助手册（简易版和高级版）

6. 简易的HTML标签手册

7. HTML 5手册

8. HTML元素手册

帕兰映像又改版了，把我喜欢的下部浮动层去掉了。。

为了这个下部浮动层。我还自己画了几个原型图。只是没有实现成HTML而己。。。

不多说，看文章，地址：http://paranimage.com/list-of-html-5/

HTML 5最近被讨论的越来越多，越来越烈。尽管HTML5离我们其实还挺远的， 我们绝对犯不着浪费时间现在就去学习HTML5的特性和应用 — 那是Google这等走在技术前沿有实力有干劲的家伙才干的事儿。但任何一个设计开发爱好者都不能忽视它，至少应该有个大概的了解。

HTML 5可谓集万千宠爱于一身，各种高帽戴的不亦乐乎。当然，只要是值得讨论的事情，总有不同的声音。也有一些人并不看好他，或者至少对HTML5没那么兴奋。

本文就收集整理一些有关HTML5的相关知识、热门评论和新闻动态，帮助你进一步的了解HTML。

什么是HTML 5？

HTML 5 的历史背景

HTML 5

HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发 布。[1]WHATWG表示该规范是目前正在进行的工作，仍须多年的努力。wikipedia

WHATWG，这个HTML5背后的组织，用下面的话描述自己：“2004年由Apple，Mozilla基金会，Opera软件中的人员创建，他 们的矛头直指W3C直属的XHTML，认为HTML缺少乐趣，对现实世界的需求置之不理。这些组织中的有识之士决心改变这一切，所以超文本应用技术工作小 组 (WHATWG的英文全称)应运而生”。HTML5预计在2012年正式登上W3C候选标准的舞台。但是这并不意味着你到那时才能使用。一些技术已经成 熟，一些部分已经足够稳定，一些功能实现已经接近尾声，所以我们现在就可以体验它们的新特性了。 当前，市场正一步一步加速WHATWG项目的进程。via

注: W3C 日前宣布将从2009年底起终止同 XHTML 2 工作组的合约。

HTML 5的新标记

关于HTML5中对元素和标记的更新，我把它们划分为三部份:

1. HTML5结构元素: 新增了更具语义化的标签，比如<header>表示页面的头部，<footer>表示底部，<nav>表示一个链接导航集合等。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。
2. HTML5 交互元素: 我们上面说过，HTML5的前身名是Web Applications 1.0。 所以HTML5当然不只是随便加几个标签，让代码结构更具语义化这么无聊。另外一些新增的元素，诸如<details>, <datagrid>等，可以实现控制数据和内容展示等交互能力。input元素的新属性：日期和时间，email, url，可以轻松制造一个Webforms 2.0。
3. 删除的HTML4元素: HTML5删除了HTML4中纯粹用来显示效果的一些标记，比如<font>和<center>，因为它们已经被CSS取代。

看着上面的这些HTML5特性，就不禁让人想到XHTML，XHTML到底做了些什么呢？为什么近几年来，我们老爱跟HTML4划清界线，钟爱XHTML？这有篇文章说的很好：XHTML 鼓励良好的代码习惯，所有标签都需要完整，严谨，XHTML 可以产生比 HTML 4 更干净的代码。也就是说，XHTML相对HTML4，就起到了一个更严格的约束作用，但事实上，用HTML4也可以写出很干净的代码，用XHTML也有人把代码写得一团糟。

当然，我等鼠辈都是墙头草，还特喜欢落井下石。HTML5没热腾起来的时候，也没谁寒碜XHTML，更多的却是讨论要用Transitional还是Strict。废话少，如果你想具体了解HTML新增的元素和属性标记，可以查看下面这些文章:

• HTML 5简介
• 细谈HTML 5新增的元素
• HTML 5新元素全接触

HTML的新API

除了原先的DOM接口，HTML5增加了更多样化的API。包含了设计师们需要的很多东西，本地的音频，视频支持，多栏布局工具，离线数据库，本地的矢量图支持等等。

HTML 5的试验

HTML 5的标准还八字才有一撇呢，后面一撇还得慢慢描。但已经有诸多的先锋部队开始拥抱它了。很多主流浏览器的最新版本都已经开始支持HTML5中的部份特性，除了IE。

如果你确实很迫不及待的也想做下技术先驱，下面的一些实例和资源可能会对你有用：

• HTML 5 Reset Stylesheet

  一份特别针对HTML 5所写的CSS样式重置。同时，HTML5Doctor这个网站是国外一个专门介绍和研究HTML5的网站。

• Bespin

  Mozilla Lab的一个项目，这是一个使用了html5技术的代码编辑器。

• 如何在IE中使用HTML元素

• HTML 5 Features at a Glance

  一份HTML 5的浏览器兼容功能列表

HTML 5的争论

关于HTML 5的争论多种多样，其中最大的争论点在于业界对HTML 5取代Flash、Silverlight这些RIA主力军。下面听听一些声音吧。

Opera称HTML5将使得Flash变得可有可无

Opera首席执行官Jon von Tetzchner近日在接受采访时表示，下一代HTML语言将使得Adobe Flash技术显得很多余，HTML 5的开放Web标准提供了除Flash之外的富媒体网络内容发布方法。

von Tetzchner表示，HTML 5处理富媒体的能力意味着Flash可有可无，“你可以用它实现大多数(Flash)现在做的事，从某种方面说，你可能不再需要Flash。”

von Tetzchner补充说，这并不意味着Flash会消亡，“我喜欢Adobe，他们是一家非常棒的公司，我想Flash还会存在很长很长一段时间，但是 Web标准演变地越来越丰富是‘自然法则’，你可以选择使用Web标准也可以选择使用Flash(发布富媒体内容)。”

编程大师Bruce Eckel不看好HTML5

《Thinking In Java》和《Think in C++》的作者Bruce Eckel最近在博客中评价了在开发团队选择现有技术时所需要掌握和了解的知识资源体系。 他指出web开发者花费了过多的精力来使CSS/HTML/JavaScript程序兼容各种浏览器，非IT行业的公司不会有太多人手维护主页，这往往导 致他们无法考虑兼容问题，最终结果是主页只支持IE。即使等到HTML5发布，这种状况也未必能有所改变。对于一般公司而言，如果想兼容各种平台，最好的 解决方案是使用flash/flex。

更多的HTML新闻和动态

• Flex的合作竞争对象:HTML5‎
• Safari 4.0.3 完善HTML5视频标签稳定性
• 微软称愿分享对HTML5的看法并参与制定标准
• HTML5 File API：把文件从桌面拖放到 Web
• HTML5将弃用开源影音编码标准Ogg