<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ilMilk.com &#187; 雅虎面试题</title>
	<atom:link href="http://www.ilmilk.com/tag/%e9%9b%85%e8%99%8e%e9%9d%a2%e8%af%95%e9%a2%98/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ilmilk.com</link>
	<description>i LoVe Milk-ilMilk&#039;s Blog</description>
	<lastBuildDate>Thu, 21 Apr 2011 05:46:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>雅虎面试题-你真的了解HTML吗?</title>
		<link>http://www.ilmilk.com/know-html.html</link>
		<comments>http://www.ilmilk.com/know-html.html#comments</comments>
		<pubDate>Mon, 19 Apr 2010 03:57:01 +0000</pubDate>
		<dc:creator>ilmilk</dc:creator>
				<category><![CDATA[CSS之美]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[xhtml]]></category>
		<category><![CDATA[雅虎面试题]]></category>

		<guid isPermaLink="false">http://ilmilk.com/?p=30</guid>
		<description><![CDATA[有这么一段HTML，请挑毛病： &#60;P&#62;&#38;nbsp;&#38;nbsp;哥写的不是HTML，是寂寞。&#60;br&#62;&#60;br&#62;&#38;nbsp;&#38;nbsp;我说：&#60;br&#62;不要迷恋哥，哥只是一个传说 这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。 这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题，考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。 言归正传。这道题的考点： 考点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: &#60;p&#62;哥写的不是HTML，是寂寞。&#60;p&#62;我说：&#60;br&#62; 不要迷恋哥，哥只是一个传说 xhtml 1.0: &#60;p&#62;哥写的不是HTML，是寂寞。&#60;/p&#62;&#60;p&#62;我说：&#60;br /&#62; 不要迷恋哥，哥只是一个传说&#60;/p&#62; 加分：合理的用语义化标签 在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。 &#60;p&#62;哥写的不是HTML，是寂寞。 &#60;p&#62;我说：&#60;br&#62; &#60;q&#62;不要迷恋哥，哥只是一个传说&#60;/q&#62; 我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。 &#60;p&#62; 哥写的不是&#60;abbr title=”Hyper Text Markup Language”&#62;HTML&#60;/abbr&#62;，是寂寞。 &#60;p&#62;&#60;cite&#62; 我&#60;/cite&#62;说：&#60;br&#62; &#60;q&#62;不要迷恋哥，哥只是一个传说&#60;/q&#62; 转自：标准之路(http://www.aa25.cn) 全面兼容IE6/IE7/IE8/FF的CSS 


<ol><li><a href='http://www.ilmilk.com/css-hack.html' rel='bookmark' title='Permanent Link: 全面兼容IE6/IE7/IE8/FF的CSS HACK'>全面兼容IE6/IE7/IE8/FF的CSS HACK</a></li>
<li><a href='http://www.ilmilk.com/scaled-down-image-using-css.html' rel='bookmark' title='Permanent Link: 利用CSS等比例缩小图片'>利用CSS等比例缩小图片</a></li>
<li><a href='http://www.ilmilk.com/page-tab-elements-conducive-to-the-rational-use-of-seo-optimization.html' rel='bookmark' title='Permanent Link: 页面标签元素的合理使用有利于SEO优化'>页面标签元素的合理使用有利于SEO优化</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>有这么一段HTML，请挑毛病：</p>
<blockquote><p>&lt;P&gt;&amp;nbsp;&amp;nbsp;哥写的不是HTML，是寂寞。&lt;br&gt;&lt;br&gt;&amp;nbsp;&amp;nbsp;我说：&lt;br&gt;不要迷恋哥，哥只是一个传说</p></blockquote>
<p>这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。<br />
＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝</p>
<p>出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。<span id="more-30"></span></p>
<p>这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题，考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。</p>
<p>言归正传。这道题的考点：</p>
<p>考点1：html和 xhtml的区别<br />
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。</p>
<p>这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。</p>
<p>考点2：考样式分离<br />
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp</p>
<p>考点3：合理使用标签<br />
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。</p>
<p>上面全答对，你就能拿到100分。</p>
<p>对原题改进的结果：<br />
html 4.01:</p>
<blockquote><p>&lt;p&gt;哥写的不是HTML，是寂寞。&lt;p&gt;我说：&lt;br&gt; 不要迷恋哥，哥只是一个传说</p></blockquote>
<p>xhtml 1.0:</p>
<blockquote><p>&lt;p&gt;哥写的不是HTML，是寂寞。&lt;/p&gt;&lt;p&gt;我说：&lt;br /&gt; 不要迷恋哥，哥只是一个传说&lt;/p&gt;</p></blockquote>
<p>加分：合理的用语义化标签<br />
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。</p>
<blockquote><p>&lt;p&gt;哥写的不是HTML，是寂寞。<br />
&lt;p&gt;我说：&lt;br&gt; &lt;q&gt;不要迷恋哥，哥只是一个传说&lt;/q&gt;</p></blockquote>
<p>我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。</p>
<blockquote><p>&lt;p&gt; 哥写的不是&lt;abbr title=”Hyper Text Markup Language”&gt;HTML&lt;/abbr&gt;，是寂寞。<br />
&lt;p&gt;&lt;cite&gt; 我&lt;/cite&gt;说：&lt;br&gt; &lt;q&gt;不要迷恋哥，哥只是一个传说&lt;/q&gt;</p></blockquote>
<p>转自：标准之路(<a href="http://www.aa25.cn">http://www.aa25.cn</a>)</p>


<p><ol><li><a href='http://www.ilmilk.com/css-hack.html' rel='bookmark' title='Permanent Link: 全面兼容IE6/IE7/IE8/FF的CSS HACK'>全面兼容IE6/IE7/IE8/FF的CSS HACK</a></li>
<li><a href='http://www.ilmilk.com/scaled-down-image-using-css.html' rel='bookmark' title='Permanent Link: 利用CSS等比例缩小图片'>利用CSS等比例缩小图片</a></li>
<li><a href='http://www.ilmilk.com/page-tab-elements-conducive-to-the-rational-use-of-seo-optimization.html' rel='bookmark' title='Permanent Link: 页面标签元素的合理使用有利于SEO优化'>页面标签元素的合理使用有利于SEO优化</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.ilmilk.com/know-html.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

