A classic face question (Yahoo! interview) Do you really know html?

There is such a piece of HTML, please fault:

< P > &nbsp;&nbsp; The elder brother writes is not the HTML, is lonely. < BR >< BR > &nbsp;&nbsp; I said:<br> don't crush brother, brother is just a legend

The motive for this problem is that too many people feel that HTML is too simple, but it is exactly the most fundamental part of the front-end development. HTML structure design is not reasonable, directly affect the code is easy to maintain, the spirit is not flexible, at the same time related to Web performance, collaboration efficiency.

The test center of this problem:

The difference between 1:html and XHTML at the test centers
This line of code is completely correct under HTML 4.01 strict, which is a bunch of errors under XHTML 1.0 Strict. So it's obviously a test-taker. under XHTML All tags are closed, p,br need to be closed, labels are not uppercase, p is lowercase. Both nbsp and BR must be included in the container . These are not errors under HTML. P is an optional closing tag in HTML, which can be used without closure.

This test center tells you how harsh XHTML is. This is the basic test, correct, you can get 60 points.

Test Center 2: Style separation
It is unreasonable to use nbsp to control indentation . It should be done with CSS. So we should erase nbsp.

Test Center 3: Fair use of labels
BR is a forced wrap label, p is a paragraph. The original problem with a continuous BR manufacturing two paragraphs of the effect, the effect is achieved, but obviously with unreasonable, paragraph spacing can not be controlled later. The correct approach is to use two p to represent two paragraphs. "I said" back is normal text folding line with BR is reasonable.

All right, you get 100 points.

The result of the original title improvement:

HTML 4.01:

< P > does not write HTML, is lonely. < P > I said:<br> don't crush brother, brother is just a legend

XHTML 1.0:

< P > does not write HTML, is lonely. </ P >< P > I said:</> don't crush brother, brother is just a legend </p>

You can see that XHTML is very strict, the labels are closed, and the letters are lowercase

Bonus points: a reasonable semantic label
On the basis of the above reasonable semantic label, the content of the necessary marking, is added. But excessive use of the label, it is superfluous. such as "I say" words, can be labeled with Q label.

< P > the elder brother writes is not the HTML, is lonely.  <p> I said:<br><Q > Don't crush brother, brother is just a legend </q>

Reference Document: http://www.wufangbo.com/ya-hu-mian-shi-ti/

A classic face question (Yahoo! interview) Do you really know html?