【转】你真的了解HTML吗?–雅虎面试题

本文转自:http://hikejun.com/blog/2010/03/19/%E4%BD%A0%E7%9C%9F%E7%9A%84%E4%BA%86%E8%A7%A3html%E5%90%97/

转载请注明出处,尊重原作者,尊重原创!!!!

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

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

这是原来雅虎一道笔试题(文字变了变),用了很多年了,还没有一个人完全答对过。

下方有公布答案,不过请各位还是先各自答题比较好

出这道题的动机是,太多人觉得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>

启示:有时候我们忽略一个简单的道理:很多东西,尤其是你熟悉的东西被潜意识的当成了理所当然了!!

【转】你真的了解HTML吗?–雅虎面试题

时间: 2024-10-12 11:11:58

【转】你真的了解HTML吗?–雅虎面试题的相关文章

一道经典面试题(雅虎面试题)你真的了解HTML吗?

有这么一段HTML,请挑毛病: <P>  哥写的不是HTML,是寂寞.<br><br>  我说:<br>不要迷恋哥,哥只是一个传说 出这道题的动机是,太多人觉得HTML太简单,但它恰恰又是前端开发中最基础最重要的部分.HTML结构设计的合不合理,直接影响到代码易不易维护,灵不灵活,同时事关网页性能,协作效率. 这道题的考点: 考点1:html和 xhtml的区别这行代码在html 4.01 strict下是完全正确的,在xhtml 1.0 strict下是错

雅虎笔试题

1. 端口22协议 2. 操作系统线程和进程不共享的是() 3. 给出前序中序遍历的结果,求后序遍历的结果. 4. 死锁的必要条件. 5. 8个人分成2组,每组4人,问某两个人在一组的概率是(): 6. 有一种疾病,患病的概率是1/100000,医生诊断的准确率为99%,问如果一个人被诊断出患这种病,那么他真患这种病的概率是多少? 7. 大端小端的问题: 8. C++程序编译出错的地方: 9. A(m,n)= n+1 (when m == 0) = A(m-1,1) ( when n == 0)

HTML+CSS Interview

(1) <img>元素的alt和title有什么异同? 这两个属性是有些重复了.在不同浏览器里面表现有些不同.在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字. (2) 编写一个两列布局的网页,要求右侧宽度为200px,左侧自动扩展. body { width: 960px; margin: 0 auto; //相当与居中显示body } 第一种 #right { float:right; width:200px; } #left { marin-r

C/C++ 笔试题

/////转自http://blog.csdn.net/suxinpingtao51/article/details/8015147#userconsent# 微软亚洲技术中心的面试题!!! 1.进程和线程的差别. 线程是指进程内的一个执行单元,也是进程内的可调度实体.与进程的区别:(1)调度:线程作为调度和分配的基本单位,进程作为拥有资源的基本单位(2)并发性:不仅进程之间可以并发执行,同一个进程的多个线程之间也可并发执行(3)拥有资源:进程是拥有资源的独立单位,线程不拥有系统资源,但可以访问

雅虎34条军规

官方原地址:http://developer.yahoo.com/performance/rules.htmlmooc:视频教程另附 SAE CDN:http://lib.sinaapp.com/ 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法

雅虎35条优化黄金守则

Excetional Performance 团队总结出了一系列可以提高网站速度的方法.可以分为 7大类 35条.包括内容 .服务器 . CSS . JavaScript .Cookie .图片 .移动应用 ,七部分. 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 避免 404错误 1.尽量减少 HTTP请求次数 终端用户响应的时间中,有 80%用于下载各项内容.这部分时间包

雅虎网站页面性能优化的34条黄金守则(转)

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中

雅虎网站页面性能优化的34条黄金守则

雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件

雅虎36条优化准则

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中