你真的了解HTML吗

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

<P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<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>

Tags:

86 Responses to “你真的了解HTML吗”

  1. Willko Says:

    只找到普通的

  2. 喻白 Says:

    1:p标记应该小写并且关闭。
    2:br没有结束,
    3:$nbsp;应该写成$#160;

  3. yubo Says:

    这个问题好玩
    不过也真的能考验你真的是否了解html

  4. 崔凯 Says:

    用了很多年了,还没有一个人完全答对过...........

  5. 葫芦居士 Says:

    正在努力更加了解HTML

  6. Rage Says:

    P标签是定义段落,会忽视标签内的格式和表现。所以,p标签内建议没有html标签和nbsp等控制表现的字符出现。
    不知道我回答的对不对,因为我非常非常少用p标签!

  7. evan Says:

    xHTML 还是 HTML?

  8. suweihua Says:

    HTML4 下是没错的
    xhtml1 下 标签不闭合
    应该不是这么简单吧? 难道还要分两个段落 写text-indent?
    哥,给发下答案吧。

  9. Eric xu Says:

    不必合 缩进用text-indent 说的内容用

  10. kejun Says:

    分开分析是对的。如果足够了解html的话,应该分开给出答案。

    具体分解还是要等到交流会上,这关子先卖会,大家尽可能的想,如果你看到这样的代码,你怎么改它?

  11. 哈哈 Says:

    啥破问题啊 吹毛求屁了

  12. kejun Says:

    目前还没有答全的。

  13. Tin Says:

    哈哈,这道题还挺神秘的。大部分浏览器都应该可以按照作者的基本意图来渲染这段文字。而且dom结构应该也和预想的一样。
    问题在于标准,按照标准,这简单的一段html里面的确有很多不好的习惯(但是在没有header确定它的doctype的时候我们也不能断定它不符合标准吧?),它没有把html作为结构的载体,而是把它当作格式的载体。不知道我这样想思路对不对?

  14. hha Says:

    你这破问题 连考点都不告诉人家 你这跟树上骑个猴地上俩猴考别人有啥区别啊

    你要问语义化咱就说语义化的 你要问web标准 咱就说web标准

    你这啥破玩意啊

  15. kejun Says:

    用html更好的描述信息的结构,目的是更灵活,易维护和高性能。 这题一点也不较真

  16. kejun Says:

    @hha 考的是你的综合应用能力。你要把你对web标准的理解,语义化的理解,综合起来考虑。这些都是考点

    换句话说,你看到这行代码,你应该怎么改写它?

  17. Justice Says:

    是不是可以这样
    <blockquote><p>哥写的不是HTML,是寂寞。</p></blockquote>
    <p><cite>我</cite>说:<q>不要迷恋哥,哥只是一个传说</q></p>
    换行缩进都可以用 CSS 来设

  18. kejun Says:

    应该像@justice一样用认为最合理的写法写出来。但@justice改的不好,没把握到关键

  19. tomie Says:

    html4下不用闭合p,xhtml下是错误的用法..
    br闭合..
    另外不用nbsp吧..
    搜出来几个链接:
    http://www.webmasterworld.com/forum83/1777.htm
    http://www.webmasterworld.com/forum83/1787.htm
    http://www.w3.org/TR/html4/struct/text.html#edef-BR

  20. kejun Says:

    @tomie 答对一部分,还不全

  21. leonam Says:

    哥写的不是HTML,是寂寞。我说:不要迷恋哥,哥只是一个传说

    这样不最好了?

  22. leonam Says:

    晕!!我打的HTML显示不出来,没过滤啊!!

  23. kejun Says:

    @leonam 首先展现上就不一致。再想想

  24. leonam Says:

    @kejun 展现上怎么不一致了?用CSS可以控制啊!

  25. kejun Says:

    @leonam 只用了一个cite怎么控制第一段的缩进啊

  26. Justice Says:

    我不知道题目本意是想说不该用这几个元素,还是说在用这些元素的时候该怎样用才对

  27. 则名 Says:

    哥写的不是HTML,是寂寞。我说:不要迷恋哥,哥只是一个传说
    虽然html不严格要求tag闭合,但遇到flow content类型的tag我还是习惯给闭合了。
    如果按照语义理解应该分2段来表述:
    哥写的不是HTML,是寂寞。
    我说:不要迷恋哥,哥只是一个传说

  28. leonam Says:

    @kejun margin-left

  29. kejun Says:

    @justice 首先基于原题考虑标签用的有没有问题或其他,这个答对就是100分,其次,怎么写可以更好,这个可以加分。 @leonam先答对基本,再考虑怎么加分

  30. kc Says:

    占楼等答案!

  31. kejun Says:

    没有命中要害

  32. khsing Says:

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

  33. khsing Says:

    忘了闭合一个p标签了

  34. kejun Says:

    @khsing p里用blockquote不合理

  35. army8735 Says:

    算了,我肯定不及格。

  36. lifesinger Says:

    有意思的题目,我的答案:

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

    css 就不给出了。

  37. kejun Says:

    @lifesinger 看来雕兄看出了我的一些考点,哈。q是inline的,要换行必须改成block的,放在p容器里不妥,不如前面加个br

  38. 苦瓜 Says:

    q IE8前不支持 不管是否断行 直接pass

    语义型强的话

    哥写的不是HTML,是寂寞。

    说不要迷恋哥,哥只是一个传说

    如果 哥写的不是html 是对话的一部分

    哥写的不是HTML,是寂寞。

    我说

    不要迷恋哥,哥只是一个传说

    注:对话是有顺序的,所以用ol,判断是否用ol很简单,只要把前后顺序颠倒下是否合理。如果是xhtml1过渡版,blockquote里头可以不必须包含块元素,直接写文本。cite HTML5不推荐用来引用作者,上面可以用在xhtml1严格版

    实际开发中,大概只有装逼的时候这么写~

    实际开发中,我大概会这样~~~
    哥写的不是HTML,是寂寞。
    我说:不要迷恋哥,哥只是一个传说

    注:p在过渡版和html5中的闭合是可选的

    !doctype html 推荐大家使用,交流会上我很想发表,第二次没法去,第三次没法表态

    1 代码精简
    2 可以不给属性加引号
    3 可以部分不闭合甚至不写标签 html body head p dd等等
    4 自身闭合标签 可以不用 /
    5 为未来做准备
    6 在新手面前装逼,满足一下XX心里
    7

  39. mockee Says:

    嘿嘿,补充个缩写标签
    HTML

  40. 苦瓜 Says:

    q IE8前不支持 不管是否断行 直接pass

    语义型强的话
    <blockquote><p>哥写的不是HTML,是寂寞。</p></blockquote>
    <blockquote><p><cite>我</cite>说</p><p>不要迷恋哥,哥只是一个传说</p></blockquote>

    如果 哥写的不是html 是对话的一部分

    <ol>
    <li>
    <blockquote>
    <p>哥写的不是HTML,是寂寞。</p>
    </blockquote>
    </li>
    <li>
    <cite>我说</cite>
    <blockquote>
    <p>不要迷恋哥,哥只是一个传说</p>
    </blockquote>
    </li>
    </ol>

  41. 苦瓜 Says:

    q IE8前不支持 不管是否断行 直接pass

    语义型强的话
    <blockquote><p>哥写的不是HTML,是寂寞。</p></blockquote>
    <blockquote><p><cite>我</cite>说</p><p>不要迷恋哥,哥只是一个传说</p></blockquote>

    如果 哥写的不是html 是对话的一部分

    <ol>
    <li>
    <blockquote>
    <p>哥写的不是HTML,是寂寞。</p>
    </blockquote>
    </li>
    <li>
    <cite>我说</cite>
    <blockquote>
    <p>不要迷恋哥,哥只是一个传说</p>
    </blockquote>
    </li>
    </ol>

    注:对话是有顺序的,所以用ol,判断是否用ol很简单,只要把前后顺序颠倒下是否合理。如果是xhtml1过渡版,blockquote里头可以不必须包含块元素,直接写文本。cite HTML5不推荐用来引用作者,上面可以用在xhtml1严格版

    实际开发中,我大概会这样~~~

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

    注:p在过渡版和html5中的闭合是可选的

    !doctype html 推荐大家使用,交流会上我很想发表,第二次没法去,第三次没能表态

    1 代码精简
    2 可以不给属性加引号
    3 可以部分不闭合甚至不写标签 html body head p dd等等
    4 自身闭合标签 可以不用 /
    5 为未来做准备
    6 在新手面前装逼,满足一下XX心里

  42. 阿肆 Says:

    哥写的不是HTML,是寂寞。
    说:不要迷恋哥,哥只是一个传说

    更具体的就要看实际情况了,如DTD。还有CSS,既然原文用空格“布局”了,肯定需要还原这点。
    @kejun 我觉得用可以,这里本来就是引用的一句话。p.s:firefox等浏览器会自动加引号,好像也更耦合中文习惯。

  43. 阿肆 Says:

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

    更具体的就要看实际情况了,如DTD。还有CSS,既然原文用空格“布局”了,肯定需要还原这点。
    @kejun 我觉得用>q<可以,这里本来就是引用的一句话。
    p.s:firefox等浏览器会自动加引号,好像也更耦合中文习惯。

  44. 阿肆 Says:

    <p>哥写的不是<abbr title="HyperText Markup Language">HTML</abbr>,是寂寞。</p>
    <p><cite>我</cite>说:<br><q>不要迷恋哥,哥只是一个传说</q></p>
    更具体的就要看实际情况了,如DTD。还有CSS,既然原文用空格“布局”了,肯定需要还原这点。
    @kejun 我觉得用<q>可以,这里本来就是引用的一句话。
    p.s:firefox等浏览器会自动加引号,好像也更耦合中文习惯。

  45. zhangcl.com Says:

    html有几个标签没必要合并,比如p
    哥写的不是HTML,是寂寞。
    我说:不要迷恋哥,哥只是一个传说
    缩进应该要用css控制,1em就够了

  46. zhangcl.com Says:

    html有几个标签没必要合并,比如p
    <p>哥写的不是HTML,是寂寞。
    <p>我说:<br><q>不要迷恋哥,哥只是一个传说</q>
    缩进应该要用css控制,1em就够了

  47. scofield Says:

    把上面的整理下
    就是 p br &nbsp 的问题了。

  48. zz Says:

    我说:<br>不要迷恋哥,哥只是一个传说
    为什么要加个换行呢?

  49. jkfzero Says:

    只看出来标签关闭和大小写的问题。

    3:$nbsp;应该写成$#160;

    这个是为啥?

  50. suweihua Says:

    悲剧,我看到上面的blockquote 就想说 q 了 没想被克军 射雕抢占了 。。。不过说话内容用q 这个的确没实际用过,一看真是应该要这样。看来之前理解的语义化还是不够。等27号了。。。

  51. suweihua Says:

    哥写的不是HTML,是寂寞。
    貌似这个还得加h1... 标题

  52. 王承石 Says:

    不加说明的话应该没错啊.

  53. munn Says:

    没有
      不对
    应为
    我说:后面应该使用引用

  54. munn Says:

    昏死,标签全部过滤了
    P没有结束
    :nbsp不对
    br要加/

  55. bility Says:

    最重要的是br不可以用在p里

  56. Demon Says:

    &nbsp 用来设置首行缩进不对,
    双 br 用来做行高不对。

    如果在xhtml里,br 应该加 "/" , p 应该有结束标签。

    不知道我说的对不?

  57. chesanqi Says:

    表现上来说两个br是需要两个回车的效果吗?但实际效果只有一个。

  58. Evance Says:

    没有错呀 - 光就html这一个范围内,没有更细的要求的话。

  59. Insen Says:

    p标签的大小写和结束符
    br的闭合以及不当的换行使用
    HTML的abbr
     不当的缩进使用
    语义上的某些话需要引用blockquote

    还有什么...

  60. 王承石 Says:

    主要这个题问的不详细啊.
    如果是让按照语义重新设计标签的话.2个br替换成新的p更合适一些.因为两个换行等于一个新段落.去掉两个空格换css控制首行缩进,恰巧两个段落也会形式统一.我说:不要迷恋哥,哥只是一个传说可以用dldtdd的组合,但是用br也没什么说不过去的.
    要是从html标签来看的话.而且只是片段的话,本身没有错.

  61. 扬扬 Says:

      哥写的不是HTML,是寂寞。  我说:

    不要迷恋哥,哥只是一个传说

  62. uoian Says:

      哥写的不是HTML,是寂寞。  我说:不要迷恋哥,哥只是一个传说

    个人感觉:
    应该有结束,而且应该小写
    应该是
    不应该用 作为前导空格
    不应该用调整行距

    不知道正确否?希望指正。
    楼上还有一位兄弟说里面不能放,我觉得不对,最简单的思路,段落里难道就不能换行了?

  63. 可乐加糖 Says:

    1.标签必须要小写
    2.字符串开头的2个字符的缩进应该使用text-indent代替
    3.P没有结束标签
    4.文字元素是不是使用span元素套起来会更好点?(个人意见)
    5.改成

  64. 可乐加糖 Says:

    我的第五点为什么没出来???
    《br》改成《br/》

  65. uoian Says:

    怎么编码都看不到了。
    再来:

    个人感觉:
    p应该有结束,而且应该小写
    应该是br/
    不应该用& nbsp作为前导空格
    不应该用调整行距 br /

    不知道正确否?希望指正。
    楼上还有一位兄弟说p里面不能放br /,我觉得不对,最简单的思路,段落里难道就不能换行了?

  66. nozer0 Says:

    p,br没有闭合标签都是可以的,合法的,可以参看google首页的代码;
    p里面包含br也是合法的,br是inline element,而p只可以包含inline elements,包含div才是不合法的。
    关键没说清楚是语义上的问题还是本身语法上的问题。

  67. vitrum Says:

    p是允许不闭合的,
    题外话,所谓的不合法,这个法中国还没施行呢

  68. 修远兮  Says:

    呵呵,期待明天公布答案。

  69. laozhang Says:

    这是两段,不是一段。
    "我说",后面的话应该用引号括起来,这里没有。

    这里的错误就是里面那些标签全部都应该删掉。嘿~

  70. Evance Says:

    从上面同学的回答以及克军的解答说明两点。
    1.现在已经有很多人都是从xhtml起步的了。
    2.此题作为面试题,论质量只能够打65分。
    对于一个面试者来说,精准的理解题意非常必要:
    “一段html里面挑毛病”, 但是出题者期望得到css相关的回答,个人认为结果会让人失望的,楼上同学的回答说明了这一点。

    面试过大概十多位应聘的前端,对于面试者的心态大概有一些了解。
    单步渐进,纵向分析题目的思路占更多数。
    明确立题在“html”,还去css上面去考虑的人,可能不会太多-尽管很多人非常清楚  br Tag作为排版不合适。

  71. 苦瓜 Says:

    克军,考点上落下了兼容性上的考虑,IE8前是不支持q标签的,abbr IE7前不支持,另一个所写acroymn什么的,IE6前是不知此后的。
    http://www.w3schools.com/tags/tag_q.asp

  72. 苦瓜 Says:

    evance你错了

    第一种现在已经不是html4,而是html5,可以看看之前我的回答

    考点 1 html基本语法,各个版本的dtd
    2 样式控制,对于这点,如果第一点答对,也就是说出那些情况怎么写标签是对的,CSS部分,我想考官会清楚你已经不需要写出来了,可以给你满分
    3语义
    4浏览器兼容性,对标签的处理,是否渲染
    5经验,正如你说,br不用来排版,你知道b sub 之类的仍然在严格版可以通过验证么,但是就这么一句,搞了一堆标签再加上css控制,你觉得开发效率维护效率以及性能更高么

    或许还有一些人不知道xhtml 在mime类型为 text/html 时候 仍然不是真正的XHTML,也就是我们平时使用的

    也不要觉得XHTML就高级到哪去,我们用的不是完完全全的xhtml,把mime类型改成application/xhtml+xml的时候才是真正的xhtml文档,也知道怎么做,也很简单,在服务器或者仅仅几行代码即可搞定,但为什么不这么做呢,那么给你带来的就是无法处理的表单,任何一点错误都将停止解析等等等等一系列问题,想当初还满怀希望的盼着。。。。不是我,而是W3C

    W3傻了吧唧的搞了xhtml1.1把什么都模块化了,到了2更是臃肿,傻了,不知道怎么往前走了。。。妥协了

    今天会还是有些收获的,我更加肯定了现在写了十多天的规范,对于沟通而言,文档约定的,没必要沟通,因为上面已经注明就是你的错,就是你的事。

  73. 怪兽 Says:

    其实缩进为什么不能用空格实现呢?

    有时候使用空格更符合用户体验(个人觉得)

    我是做CMS模板的,在使用P的地方往往用户调用的是文章内容,在内容未确定的情况下,使用text-indent放而不好。

  74. kejun Says:

    @Evance @怪兽 这题除了考html常识外,更是针对写html最常犯的问题,像样式分离和正确使用标签,html结构简洁,不是考css, 只要知道把表现的部分剔除就行。

    一个段落在不同设计需求下,可能有缩进可能没有,最好是能分离就分离出去。

  75. yoom Says:

    图中这篇文档[点击我的名字],已经通过了w3c的xhtml效验。

    问题:

    h1宽度是多少。
    “web标准测试”会换行吗。
    样式表中有哪些语法错误,或者通过样式表提供的线索可以发现哪些错误。
    虽然xhtml通过了w3c效验,但还有什么地方需要调整

    去年自作做的一个测试题,还很得意,不过还是相对简单的。

  76. 潇洒 Says:

    好吧... 上次看完题,被吓到了。只是自己试着玩了下。没敢回....
    这次看了答案,安慰了些,除了加分部份木有考虑到外,别的还好都完成了。
    看来我需要更多的自信和勇气。

    留个脚印。马克之...回家继续好好巩固下这些基础。

  77. 可乐加糖 Says:

    哈哈,答对了一大半。不过HTML真的是一切前端开发的基础,没有好的HTML支持的话,做浏览器兼容真的很痛苦,用正确的标签,能大大减少使用CSS渲染时候产生各式各样的Bug.

  78. PorkFat Says:

    看来我只能得一百分,加分的事项要看情况,看文章内容,如果是技术文章之类加上一些语义化标签可以提高阅读质量,但如果内容是 UCG 网站的用户产生的,考虑到样式维护的成本、对内容编程的情况(截段、再展示)、将内容输出的情况(API、RSS),在文章段落中只需要使用简单通用的标签就好,语义化体现在网站的信息结构上更好

  79. yoom Says:

    看了回复,还有更好的题么?
    题目上下文环境不明确,事实上有很多人了解XHTML的嵌套规则,但或许根本就不了解HTML的规则。这就好比很多人知道IE6的某些Bug,但不知道IE5.5的Bug。假设某个人是前年开始学习的XHTML,假设他并不了解HTML4.0,但了解XHTML标记嵌套规则,那么你说的基本考点,算及格不呢?因为他没有回答:此段代码在HTML环境下是完全合法的。

    感觉此题的主观因素太多,也说了:“没有一个人完全答对过的题目”,但并不代表就是一个好题目。

    事实上,换了我是初学者,我会把这段代码拷贝到DW,进行验证,就知道错误了,至少也能落得个及格分数。

    一个比较好的题目思路:给一段能通过验证的,XHTML过渡性声明的代码,然后来让别人排错。

  80. yoom Says:

    所以我只能回答:我不了解HTML。

  81. idd.chiang Says:

    我曾经以为是考查标签语义化,即....去完成一个对话,其实也说的通,本身这个问法我认为是没有唯一的答案,从代码简洁和符合html4.01标准还是........,所以姜还是老的辣!顶克军。

  82. kejun Says:

    @yoom 做为前端工程师,xhtml和html的特点都要了解,这是最起码的常识。哪有什么主观因素。
    “XHTML过渡性声明的代码,...排错”,汗,兄弟你真的不懂html。你还没体会到html的真正要点,多体会吧

  83. LINA Says:

    很让人感动的文章诶!
    好像在守护着国内的前端开发一样。呵呵。貌似很煽情的话。
    xhtml原来真的更接近xml,标签都必须要闭合。真不知道少写一个会发生什么问题,页面会不会飞?
    不过,我觉得如果我来写一个浏览器,我会把xhtml 和html 首先解析成xml,
    然后用一些包或者找些函数来生成dom,然后进行渲染...
    毕竟xml和dom像许多语言,都支持解析和转化。

    一起加油吧:)

  84. yoom Says:

    也难怪,多年来没有一个人答对。
    这道题很难。

  85. xname Says:

    xxxx
    xxxx
    xxxx
    xxx

    这个应该怎样用css控制每一段都缩进两个字符?

  86. mathew Says:

    追求完美

Leave a Reply