"Go" Do you really know html? – Yahoo Noodles Test

This article transferred from: http://hikejun.com/blog/2010/03/19/%E4%BD%A0%E7%9C%9F%E7%9A%84%E4%BA%86%E8%A7%A3html%E5%90%97/

Reprint please indicate the source, respect the original author, respect the original!!!!

There is such a piece of HTML, please fault:

1 < 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

This is the original Yahoo a pen test (text changed), used for many years, no one has been completely correct.

The answer is published below, but please be sure to answer each other better

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. Many people think that the front-end development is JavaScript development, wrong AH. JavaScript, HTML, CSS these three front-end development of the basic pillars, the nature of a completely different and closely related to their correct understanding, reasonable application is professional and non-professional difference. Some back-end engineers can write very beautiful js, but they really do not understand how reasonable to put JS, HTML, CSS combined application. The accurate grasp of HTML, not like the general programming language, but based on the rich practical experience and experience, is the front-end engineer's basic skills.

This is not a serious problem or loaded with a problem, a real "painting the egg" problem (quoted http://twitter.com/RageCarrier/status/10712084993) is the basic skills. The code, like the person, has an understanding of a line of code that reflects his front-end development literacy .

Anyway 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 on brother, brother is just a legend

XHTML 1.0:
<p> does not write HTML, is lonely. </p><p> I said: <br/> Don't crush brother, brother is just a legend </p>

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> does not write HTML, is lonely.
<p> I said:<br> <q> don't crush brother, brother is just a legend </q>

I think this is enough, if further, "I" with cite labeling, "HTML" with ABBR or acronym annotation (as for the discussion ABBR and acronym difference is too serious), also OK. It's not necessary to be complicated.

<p> brother wrote not <abbr title= "Hyper Text Markup Language" >HTML</ABBR>
<p><cite> i </cite> say:<br> <q> don't crush brother, brother is just a legend </q>