雅虎面試題-你真的瞭解HTML嗎?

有這麼一段HTML，請挑毛病：

1. <P>  哥寫的不是HTML，是寂寞。<br><br>  我說：<br>不要迷戀哥，哥只是一個傳說

這是原來雅虎一道筆試題（文字變了變），用了很多年了，還沒有一個人完全答對過。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝

出這道題的動機是，太多人覺得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:

1. <p>哥寫的不是HTML，是寂寞。</p>我說：<br /> 不要迷戀哥，哥只是一個傳說

xhtml 1.0:

1. <p>哥寫的不是HTML，是寂寞。</p><p>我說：<br /> 不要迷戀哥，哥只是一個傳說</p>

加分：合理的用語義化標籤
在前面的基礎上合理的用語義化標籤，對內容進行必要的標記，是加分的。但過度的使用標籤，就畫蛇添足了。如“我說”的話，可以用q標籤標註。

1. <p>哥寫的不是HTML，是寂寞。</p>
   
2. <p>我說：<br /> <q>不要迷戀哥，哥只是一個傳說</q></p>

我覺得這就夠了，如果再進一步，“我”用cite標註，“HTML” 用abbr或acronym標註（至於再討論abbr和acronym的區別就太較真了），也OK。再複雜就沒必要了。

1. <p> 哥寫的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。</p>
   
2. <p><cite> 我</cite>說：<br /> <q>不要迷戀哥，哥只是一個傳說</q></p>