分类目录归档：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> 加分：合理的用语义化标签 … 继续阅读 →