‘前端开发’ 分类的存档

从gmail开始,前端总结出了ajax的概念,也让前端开发工程师们得到了更多的重视,前端技能是一个很庞大的体系,W3C标准,Dom结构,Css样式,Javascript编程 ……

没有评论kejun的HTML面试题答案揭晓

2010年3月28日

有这么一段HTML,请挑毛病:

<P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<br>不要迷恋哥,哥只是一个传说

这是原来雅虎一道笔试题(文字变了变),用了很多年了,还没有一个人完全答对过。
下周(3.27)交流会上我会公布答案  点击查看第六期WEB标准化交流会 总结

============== 解答部分 ================

出这道题的动机是,太多人觉得HTML太简单,但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理,直接影响到代码易不易维护,灵不灵活,同时事关网页性能,协作效率。碰到不少人认为前端开发就是javascript开发,大错特错啊。javascript, html, css这三个前端开发的基础支柱,性质完全不同又紧密关联,对它们的正确理解,合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS,但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握,不像学一般的编程语言那样,而是建立在丰富实践经验和体会的基础上,是前端的工程师的基本功。

这不是一道较真题或是装逼题,正经一道“画鸡蛋”的题(引自http://twitter.com/RageCarrier/status/10712084993)考的是基本功。代码如其人,对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点:

考点1:html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的,在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的,p,br需要闭合, 标签不允许大写,P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签,是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点,答对,你能拿到60分。

考点2:考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3:合理使用标签
br是强制折行标签,p是段落。原题用连续的br制造两个段落的效果,效果是达到了,但显然用的不合理,段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对,你就能拿到100分。

对原题改进的结果:
html 4.01:
<p>哥写的不是HTML,是寂寞。<p>我说:<br> 不要迷恋哥,哥只是一个传说

xhtml 1.0:
<p>哥写的不是HTML,是寂寞。</p><p>我说:<br /> 不要迷恋哥,哥只是一个传说</p>

加分:合理的用语义化标签
在前面的基础上合理的用语义化标签,对内容进行必要的标记,是加分的。但过度的使用标签,就画蛇添足了。如“我说”的话,可以用q标签标注。

<p>哥写的不是HTML,是寂寞。
<p>我说:<br> <q>不要迷恋哥,哥只是一个传说</q>

我觉得这就够了,如果再进一步,“我”用cite标注,“HTML” 用abbr或acronym标注(至于再讨论abbr和acronym的区别就太较真了),也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>,是寂寞。
<p><cite> 我</cite>说:<br> <q>不要迷恋哥,哥只是一个传说</q>

转自kejun的blog:http://hikejun.com/blog/?p=548

没有评论jQuery源码查看器

2010年3月19日

收藏一下:http://james.padolsey.com/jquery/

还不错,可以按版本查看 jquery每个方法的实现

如果能有用原生js来模仿jquery每个方法的站点就好了 哈哈:) 好贪啊

没有评论各浏览器中cookie限制

2010年3月19日
  Firefox Opera chrome IE6 IE7/IE8
最多key个数 50个 30个 53个 20个 50个
key个数超出时 随机删除旧的 先进先出方式删除旧的
单key字节数 4097 4051 4051 4096 5072
单key字节超出时 不进行写入操作
总字节数限制 204850 4997 本地无cookie 4096 10239
总字节超出后 不写入新的 - cookie无法读写
  • 注①:包括key及value,以及分号、等号
  • 注②:总字节数也受HTTP Server的设置影响;
    Apache用这2个参数调整:
    LimitRequestFieldSize 限制客户端发送的请求头的字节数 【默认 8190】
    LimitRequestLine 限制接受客户端发送的HTTP请求行的字节数【默认 8190】
    当cookie超出Server的设置大小后会出现400 Bad Request

结论:我们应该保证cookie key数量<=20,单key字节<=4000b,总字节数<=4000b

感谢vfresh同学整理:)

没有评论IE9 预览版发布下载:WEB开发者的福音还是悲哀?

2010年3月18日

微软发布预览版IE 9 面向Web开发者

  北京时间3月17日消息,据国外媒体报道,微软当地时间周二发布了面向Web开发者的预览版IE 9(下载地址)。

  微软IE团队总经理迪恩·哈克莫维奇(Dean Hachamovich)今天发表声明称,IE 9与以往的IE版本有很大不同。他表示,微软将每8周对预览版IE 9进行一次升级,第一次升级将在5月中期。但哈克莫维奇没有披露正式版IE 9的发布时间。

  微软称,预览版IE 9还不是一款完整的浏览器,目前还不包括地址栏等用户导航工具以及安全功能。微软发布了一个它称之为“Test Drive”的网站,方便网站设计人员、应用开发者了解预览版IE 9的功能。

  预览版IE 9只支持Windows 7、Windows Vista SP2和Windows Server R2。IE 9可以利用图形处理器的处理能力加速文本和图形的渲染。

  用户可以从Test Drive网站下载大小为31MB的预览版IE 9。(阳光)

  附:IE 9预览版下载地址:http://ie.microsoft.com/testdrive/

1 条评论一个在线JS代码调试器:jsfiddle

2010年3月10日

从朋友的blog发现一个好玩的:)
一个在线编译代码的调试器,很强大支持自己添加框架,目前内置的框架有的:MOOTOOLSJQUERYPROTOTYPEYUI GLOWVAILLA.此调试器界面比较清晰,HTML、CSS、JS、显示结果都分别排列在一起,随时可以看到调试的结果,选择某种框架后就可以直 接在JS的输入框里输入对应的代码,点运行后在结果框里就能立即看到效果,此外它还支持IFRAME的站外引用,如果想给你的博客添加一个便捷的在线脚本 或者页面调试器,那这一款Web playground肯定十分适合你。

jsfiddle

尝试一下?http://jsfiddle.net/

外部调用演示: