你真的了解HTML吗
有这么一段HTML,请挑毛病:
<P> 哥写的不是HTML,是寂寞。<br><br> 我说:<br>不要迷恋哥,哥只是一个传说
这是原来雅虎一道笔试题(文字变了变),用了很多年了,还没有一个人完全答对过。
下周(3.27)交流会上我会公布答案 http://www.w3ctech.com/
============== 解答部分 ================
出这道题的动机是,太多人觉得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>
建议继续学习:
- Ruby 解析 HTML (Nokogiri) (阅读:3908)
- HTML5是什么东东 我们为什么要关注 (阅读:3849)
- HTML页面布局基础 (阅读:3683)
- 为什么不压缩 HTML (阅读:3473)
- HTML优化 (阅读:3104)
- Ajax和WEB服务数据格式:XML SOAP HTML (阅读:3039)
- 在HTML中获取正确的URL属性值 (阅读:2922)
- 自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快! (阅读:2840)
- 从HTML 2.0到HTML5 (阅读:2838)
- HTML特殊字符大全 (阅读:2539)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:kejun 来源: Kejun's Blog
- 标签: html xhtml
- 发布时间:2010-04-12 23:48:33
- [56] Oracle MTS模式下 进程地址与会话信
- [56] IOS安全–浅谈关于IOS加固的几种方法
- [55] 如何拿下简短的域名
- [54] 图书馆的世界纪录
- [53] android 开发入门
- [53] Go Reflect 性能
- [50] 读书笔记-壹百度:百度十年千倍的29条法则
- [49] 【社会化设计】自我(self)部分――欢迎区
- [38] 程序员技术练级攻略
- [33] 视觉调整-设计师 vs. 逻辑