Further study on CSS2.0 structure and the perplexity of Div and span

Css

Use Div to layout, the proposed div should be used to organize the code structure, now we go a little deeper, Div has semantics?

Division (split), right, a while ago browsing w3schools, see it is so defined div: the div tag defines a division/section in a document. I think my understanding of div is correct. Define a partition or node in the document. I said Div is used to modularize the content of the page, actually from the point of view of the code structure is to show the XML node structure. In addition to defining a node, Div is currently used to define a partition that produces a structured row. Or take the landing as an example:

<div>
<div>
<label for= "name" > Username </label>
<input id= "Name"/>
</div>
<div>
<label for= "PW" > Password </label>
<input id= "PW"/>
</div>
<p><button/></p>
</div>

The outermost div is used as a generating node, and the user name and password portion is actually intended to produce a structured row, where BR can produce rows, but without structure, so DIV replaces Br. Did you guess what I was going to say? Oh, it is the section and Line label in XHTML 2.0,2.0, yes, in 1.X, Div plays both section and lines because the split produces the node because the split produces the row. But it's obvious that section and line have more explicit semantics than Div, so can we think that the semantics of div is as vague as BR, and since it's blurry, BR has been shot, will we now use a lot of div to fall into the same fate? I don't know, at least for the current XHTML 2.0, Div still exists. See how the above structure code should be shown in XHTML 2.0 (without considering Xform):

<section>
<line>
<label for= "name" > Username </label>
<input id= "Name"/>
</line>
<line>
<label for= "PW" > Password </label>
<input id= "PW"/>
</line>
<div><button/></div>
</section>

So some people simply think as if the div is constantly nested, in fact, is no way to produce the illusion. Here again please pay attention to a situation, need and CSS combined look, button that part, in XHTML1. X I used the p, strictly speaking structurally wrong, it's obvious that the button is not a paragraph, I just want it to wrap, but if you use Div, then you have to give this div a class= "button" to distinguish between, And when you set CSS, you must first clear the public style properties, this will bring a lot of trouble. This problem can also occur with Div as a node and as a div for rows. Example: If I define a node div{width:300px; padding:10px, then I must either overwrite or clear to avoid conflict when defining row Div, div div{width:200px/* overwrite */; margin:10px; padding:0/* Clear * *; Color: #333;}, and then in the Define DIV div.button{margin:0/* Clear * * */; color: #F60/* Overwrite/* background: #999;} The time to do to row div style conflict avoidance, in order to avoid this situation, with the node div increase class= "loginarea" and p, so you can avoid two times style cleanup and overwrite operations. This situation in the structure of the complex page is more obvious, do not tell me add class on the line, the more class, document versatility, the more difficult to fix XHTML. This is the XHTML1. X because the semantic ambiguity of the div brings trouble, back in the structure of XHTML 2.0 is very good to do, Section{},section line{},section div{}, no class also do not interfere, eh eh, The div here looks like it's a good fit for its delimited semantics, not rows or nodes, just a separate, hehe.

The div that I think is one of the 2 most difficult to understand in the label should now be quite clear. The remaining one is span, so far I still fail to understand how span produces structure, so I have to talk about my own confusion.

First or say the difference between div and span, from a large perspective, Div is categorized into structural module (structural modules), and span is categorized into text module (literal modules). Small aspect, Div is block-elements (block level element), span is inline-elements (inline element). In all structural module, Div is the only one that is semantically ambiguous, and in all text module, span is the only semantic blur, oh, two tag unique commonality: semantic ambiguity.

The

Returns to the semantics of span: span, scope. This one ... More abstract than Division (segmentation), difficult to understand. After a crazy Google still did not find the kind of explanation I want, not close to, perhaps not at all, all the results point to the performance, both in English and Chinese refers to the font to add style, but the W3 is written in clear text of the span element, in conjunction With the ID, class and role attributes, offers a generic mechanism for adding structure to documents. What does the for adding structure to documents explain here? Baffled, later Qibuguo, and even open the source of W3 to see how he uses span, although obtained some hints, but still not enough to understand the true meaning of structure, I think it should be my XML skill is not enough. Alas, since the semantics, the structure does not work, then had to change an angle, from the practical application to try to understand. span is an inline element, mainly applied to text, which has no objection, the key is how to use? Why I still don't think span is a style container, yes, is a container, Google when found exclusively container interpretation, Div is a large container, span is small container, I am depressed. If span exists because of the style of text, what does it exist for? Why do you want to add a style to a piece of text? If you want to emphasize that you should use EM, if you want to stress that you should use Strong,text module, there are a lot of semantically explicit tags to use. So span should not exist as a style container, just as a div does not exist as a layout container. But I can't understand the meaning of span, cry! But I can make a point, in one place, I will definitely use span. That's the form. Or for example, if the landing data needs to be displayed, such as many edit and view pages, the structure should be exactly the same, unlike the input box on the edit page, and the view page with span to display the data. Similar to the following:

<div>
<div>
<label for= "name" > Username </label>
<span>MyName</span>
</div>
<div>
<label for= "PW" > Password </label>
<span>MyPassword</span>
</div>
<p><button/></p>
</div>

The benefits are two points: 1, and label to distinguish between, easy to apply the style, the following definition: div div span{}. 2, you can extract all the input data through the node. This is the only place I'm currently very clear about using span, where there seems to be no more fit except for span, and a bit of it's semantics: scope and structure. This is a brick I throw, who can draw jade, or know Jade, ask for it. Other spans are still being explored, including hints obtained from the W3 source code.

Almost finished, at this time I was on the container of the argument again, so again to the container for the keyword crazy Google, with what up and down are said to be containers, I want to find the root cause, finally, in the end, emperor, in my stubborn, with the container is wrong understanding of faith, dug up the root cause. W3 here is an explanation of the div and span: generic Language/style container. The two are the same. Oh, so, Strange said not all Chinese translation is a container, I think very few people to see English traced in the end. True style container should be translated as a style container. This is all right, wrong is note that this is the HTML div and span!!! Instead of the div and span in XHTML, I then found out that W3 's interpretation of the div and span in XHTML is different: for the div is define the characteristics of a block, and for span is define Characteristics of text. Right! This is my understanding, but also I want the correct explanation!! Because this is the interpretation of XHTML 2.0, because of the presence of section 2.0, so in the interpretation of Div, the meaning of the node is canceled, xhtml1.x explanation I am lazy to find. Now look back at the div and the last word I just tried to write in the XHTML 2.0 login structure. Well, it might be useful if the div doesn't do the line without doing the node.

Speaking of which, what's the biggest difference between HTML and XHTML? Is it grammar? Is it a name? Is it strict, XML? No, no, the essential difference is that HTML is a presentation-oriented language, and XHTML is a structured language! So we should look at and understand and use each of the tags in XHTML from a structural perspective. For example, the understanding of the container, in the presentation-oriented HTML, is correct, but in the structure-oriented XHTML is wrong, should be understood as a node. Understanding the direct impact of the use of the expression of the understanding is clearly not able to write structured code. Otherwise what close what, hahaha, can't help but knock out again.

Well, span is now not summed up, have to do a summary of the DIV end: In the current xhtml1.x environment, we need to produce nodes (section) and line (lines) when the use of Div. The most annoying two things finally came to an ending!