岁月如歌共有35篇文章被收藏推荐
鲜果类别：
IT.科技
收录于2007-09-07
认领
报错
推荐
天天用Firebug，常用功能就不多啰嗦，下面是Taobao UED前端们的私家珍藏秘笈：
快速查看背景图
大部分情况下，Firefox自带的右键就搞定了：
但有时，只能通过CSS找到背景图片地址：
通常做法是：
要准确无误的选中URL部分，即辛苦又没成就感……
秘技：
Ctrl + 左键点击URL部分，图片自动就在Firefox新页面中打开了，嘿嘿。
本质：在Firebug的HTML和CSS视图中，任何出现URL的地方，Ctrl+左键点击都能快速打开链接。
快速更改CSS数值型属性值
传统的做法是，在CSS视图中，点击属性值，然后修改数值，回车确认，反复重复操作，以查看效果，苦不堪言。
秘技：
编辑状态下，按 Up/Down 方向键就可以快速改变数值型属性值了，还可以用 PgUp/PgDn 每次改变10.
缩写的多个属性值，也可以将光标定位到要改变的数值属性处，通过 Up/Down 快速调节：
也许是常用的
下面这些，稍微爱折腾Firebug的估计都知道：
- console.assert, 最简单的js单元测试，更多资料：Firebug Console Object and API
- CSS视图，双击空白处，快速添加属性
- 选中某个DOM节点后，在CSS视图空白处右键，Edit Element Style… 快速添加内联样式
- DOM树上，可以通过上/下方向键快速导航，左/右方向键折叠。更多资料：Keyboard and Mouse Shortcuts
- DOM树上选中某个节点，右键，Copy HTML, Copy innerHTML, Delete Element, 通常很有用
- 双击DOM树上的节点，立刻进入编辑状态
- 点击Script等Tab的下拉箭头，可以选择性激活功能
- Firecookie, YSlow, Jiffy等Firebug的插件只嫌少不嫌多……
- 记住非Firefox浏览器下，可以使用Firebug Lite, 虽然不那么好用，但有比没强
最后分享一个最无敌的秘技：
上图曲解了editor，不过这样用更实际。注意默认是有问题的，需要写个cmd代理一下，或者期待UED空帷大侠的独立插件吧。
最最后，如果不缺那么点银子，Donate…会让中国人更有味！
有不少朋友在Blog回复和IM留言中希望有个群组交流讨论。
QQ群太娱乐，MSN群则太烂，想来想去，还是旺旺群简单纯粹。
阿里系的前端也多，因此建了这个旺旺群，让大家有个一块说话的地方：
旺旺群号：45912363
验证信息里请提供blog链接或作品展示。
只加入真正对前端有一定研究的人，以保证群的质量。
em 和 strong 的区别，可以从三个层次上来谈。
首先看 HTML 4.01 中的说明：
EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.
em 表示强调，strong 表示更强烈的强调。言简意赅，表明了 em 和 strong 的命名来历。并且在浏览器中，em 默认用斜体表示，strong 用粗体表示。这是第一个层次上的区别。
第二个层次上，在 Emphasis in context versus overall highlighting 和 em vs. strong 这两篇文章中，做了很好的总结：
1. em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em.
2. strong is for global highlighting. When somebody looks at your document, at a glance, certain words and phrases should jump out. These are the words and phrases that make up the gist of the content — the highlights.
em 用来局部强调，strong 则是全局强调。从视觉上考虑，em 的强调是有顺序的，阅读到某处时，才会注意到。strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果，因此也就成了 em 和 strong 的默认样式。
感觉上面已经解释得很清楚了？我们再来看看第三个层次上的区别。HTML5 草案中做了详尽解释：
1. The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.
2. The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance），strong 不会改变所在句子的语意，em 则会改变所在句子的语义。并且举了一个非常好的例子：
<p><em>Cats</em> are cute animals.</p>
强调猫，讨论的是哪种动物聪明可爱。
<p>Cats <em>are</em> cute animals.</p>
强调是，讨论的是猫是不是聪明可爱。
<p>Cats are <em>cute</em> animals.</p>
强调聪明可爱，讨论的是猫究竟是聪明可爱呢还是愚蠢讨厌。
<p><strong>Warning.</strong> This dungeon is dangerous. <strong>Avoid the ducks.</strong> Take any gold you find. <strong><strong>Do not take any of the diamonds</strong>, they are explosive and <strong>will destroy anything within ten meters.</strong></strong> You have been warned.</p>
strong 表示的是重要性上的强调，不会引起句子意思的变化。最后注意 em 和 strong 都可以有多重，比如可以用两个 strong 来表示内容很重要。
可以看出，第二个层次上所说的局部强调和全局强调是不够准确的。em 和 strong 区别的玄妙处，在 HTML5 草案里才得到淋漓尽致的阐释。推荐大家有时间的时候，仔细阅读 HTML5 草案。有很多元素的语义，都阐释得非常清楚，对于我们如何在最恰当的地方使用最恰当的标签，非常具有价值。
最后，在 前端与民工 一文的回复中，以及收到的邮件里，很遗憾的没有发现有谁知道第三个层次上的区别。因此准备的礼品（我还真准备了10份），很落寞的发不出去了。不过这篇文章仅是个引子，接下来准备用一系列文章来探讨HTML中元素的语义。礼品的承诺继续有效，留给下一个话题：
请阐述dl的语义，并列举至少5种使用场景。
可以查阅资料，将结果贴在回复里，或邮件发送给我都可以，礼物有限，前10个答对的必送。
补充：和一些朋友又讨论了下，最后我的看法是：
- em 是句意强调，加与不加会引起语义变化。
- strong 是重要性强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。
最近看到一个很让沮丧的比喻：程序员是IT中的民工，而前端则是IT民工中的掏粪者。我们来分析一下究竟有没有道理。
可以把网页的开发比作成楼房的修建。修建楼房，首先得有建筑图纸，这是网页开发中的原型（prototype）。有了图纸，就可以用钢筋水泥搭建楼房了，这些毛胚房是网页中的结构。毛胚房还得装修，这是CSS。相同结构的毛胚房可以装修成各种不同风格的住房，这便是CSS禅意花园的秘密。JS则可以看成是楼房里的电梯和中央空调等玩意。没有电梯的楼房，有楼梯依旧可住，只是电梯会让住户更方便一些。在网页中，电梯和楼梯反映的就是渐进增强的开发思想。等装修都弄好后，欢欢喜喜的终于可以乔迁新居了，这些入住的居户就是网站的用户。
好像没啥可讲的了，网站的前端开发就上面这点玩意儿。中国的毛胚房，都是雇用极其廉价的民工来搭建的，砖瓦水泥等材料也没啥新花样。毛胚房的搭建，技术含量很低，民工们很可怜。作为前端，咋一想，在大部分公司的地位极低，所用的砖瓦，无非也就是HTML的90多个元素，因此一类比，非常明显地可以得到一个结论：前端就是民工。
太让人沮丧了！…… 等等，我们来分析一点有意思的差异。
第一，我们的砖瓦比建筑民工多。我们有90多种元素可用，什么时候该用什么，建筑民工们不用思索，照着规律来就行。但是作为一名前端开发工程师，我们没有明确的规则可以参考。如果不去思考，那我们就真的和民工无异。但只要一去思考，我们就有可能变成文坛巨豪，或者成为绘画大师。海明威的《老人与海》，我们每一个字都认识，但要自己也去写一本出来，绝大部分人就傻冒了。海明威的魔力究竟在哪？从纯文字上讲，用词的精简和选词的恰当是海明威的魅力所在。想要成为一个优秀的前端，也必须在选词和用词上花大功夫。比如，em和strong的区别，我敢打赌你不知道其中的微妙（如果你确信你很明白，请联系我，我会送一份礼物给你。我的答案过几天后会在博客上阐述）。
第二，我们的装修能力比民工强。民工只会按照既定的方案粉墙刷漆，流程非常工业化。然而作为前端，虽然视觉图（mockup）是视觉设计师设计的，但如何装修，采用什么方案装修，这是前端自主选择的。比如布局方案，采用经典的float布局还是先进的双飞翼布局（自己的东西如果自己都不夸，就不会有人夸了），这取决于我们对CSS知识的掌握程度和涉猎的广度，学习成本比民工高多了。
第三，民工们只会安装电梯和空调，我们前端是能做电梯和空调的。在一些公司，将前端分为重构工程师和JS工程师，就是因为看到了做电梯和安装电梯的区别。但这部分公司依旧没看透的是，JS固然威力巨大，但光有电梯和空调是无法构成楼房的。同理，如果有没结构良好且富含语义的HTML代码，JS就是空中电梯，只能看看，真要坐上去，从上面一走出来就会摔得很惨。
铁肩担设计，妙手写网站。前端是一个目前还未被大众理解的但迟早将熠熠生辉的新生职业，我们不是民工。
在IE Developer Toolbar中，可以通过Disable -Script禁用JS:
一切看起来很美妙。紧接着，调试完毕，想启用JS. 左点右击，全都不行。火了，禁用掉IE Developer Toolbar, 依旧不行。满怀绝望与希望重启系统后，结果还是不行！恼得不行啊，去枪杀Bill.Gates的心都有了……
团队的力量是强大的，最后在IE的选项里找到了解决方案：
结论：IE的Add-Ons, 小心使用，出了问题，很可能要到IE自身的选项上去还原，甚至可能要到Windows的组策略或其它什么莫名其妙的地方去找答案。
为了表达我对IE的强烈不满，找两张图发泄一下：
