Div and Span differences
Relative to other XHTML tags, div and span are meaningless for the elements they contain. For example when you see the
Of course, the specific meanings and differences of DIV and span are very difficult to articulate and leave out of practice. Let's take a look at the application examples of div and span.
Block-level labels <div>
The source code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title> I'm so miserable! was used to demonstrate css!</title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<style type= "Text/css" >
<!--
. box {
Background-color: #EEFAFF;
width:30%;
Float:left;
}
. boxhead {
font-size:14px;
Font-weight:bold;
Background-color: #AEC6FD;
Text-align:center;
width:100%;
Color: #FFFFFF;
}
-
</style>
<body>
<div class= "box" >
<div class= "Boxhead" > I within Div, class is boxhead</div>
<p> I am in Div, the property is box. </p>
<p> I am in Div, the property is box. </p>
<p> I am in Div, the property is box. </p>
<p> I am in Div, the property is box. </p>
</div>
</body>
In the above example, we first put a class box div in the page, and inside it we put a class boxhead Div. For the sake of observation, we added a background color to the div. Let's take a look at the properties that are not in the previous tutorials defined for these two div:
The property of box: width:30%; indicates that the box Div occupies 30% of the width of the page, while the floating property is Float:left; Indicates that the box div floats on the left side of the page.
Properties for Boxhead: width:100%; Since the Boxhead Div is within the box Div, the 100% here refers to the width of the box.
Row-level labels <span> (inline labels)
This example modifies the color of a piece of text based on the above instance. Modify the following code:
Will the first "<p> me within Div, attribute to box. </p> "modified to
<p><span style= "color:red" > I within Div, also within span,</span> attribute is box. </p>
These are just a brief introduction to div and span, and the use of div and span in practical applications is very flexible.
-------------------------------------------------
How to understand div and span
First or the difference between div and span, from a large aspect, the div is categorized into the structural module (the structure module), and span is classified into the text module (the textual modules). Small aspect, Div is block-elements (block level element), span is inline-elements (inline element). In all structural module, the DIV is the only semantic ambiguity, in all text module, span is the only one semantic ambiguity, hehe, two tag unique commonality: semantic ambiguity.
Returns the semantics of span: span, extent. This one ... is more abstract and difficult to understand than division (segmentation). After a crazy Google still did not find the kind of explanation I want, close to none, perhaps not at all, all the results point to the performance, both Chinese and English refers to the font to add style, but the W3 in plain text written the span element, in conjunction With the ID, class and role attributes, offers a generic mechanism for adding structure to documents. What's the explanation for adding structure to documents here? Baffled its solution, later Qibuguo, and even open the source of W3 to see how he used span, although 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 of trying to understand. span is an inline element, which is mostly applied to text, so there's nothing to disagree with, but how to use it? Why I always do not think span is a style container, yes, it is also a container, Google found exclusively container explanation, Div is a large container, span is a small container, I am depressed. If span exists because of the style of the text, why does it exist? Why do I add a style to a text? If you want to emphasize that you should use EM, if you want to emphasize that you should use the Strong,text module, there are a number of semantically explicit tags that you can 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 a place where I will definitely use span. That's the form.
As an example, if the landing data needs to be displayed, such as many edit pages and view pages, the structure should be exactly the same, different in the edit page is the input box, and the view page with span to show the data. Similar to the following:
<div> <div> <label for= "name" > user name </label> < Span>myname</span> </div> <div> <label for= "pw" > Password </label> < Span>mypassword</span> </div> <p><button/></p> </div>
This benefit has two points:
1, and the label to distinguish, easy to apply the style, as defined below: div div span{}.
2. All input data can be extracted through the node. This is the only place I have been very clear about using span at the moment, and there seems to be nothing more appropriate than span, and it is somewhat consistent with its semantics: scope and structure. This is a brick I throw, who can lead jade, or know Jade, beg. Other spans are still being explored, including hints obtained from W3 source code.
Almost finished, then I was about the container of the argument again, and then again to the container for the keyword crazy Google, with what is said to be a container, I want to find the root cause, finally, in the end, emperor, in my stubborn, with the container is the belief that the wrong understanding, dug up the source. W3 here explains the DIV and span: generic Language/style container. Both are the same. Oh, so it is strange to say that not all Chinese translation is a container, I think very few people go to see English traced. It is true that style container should be translated into a style container. That's right, the wrong thing to note is that this is the DIV and span!!! in the HTML Instead of the div and span in XHTML, I then found W3 's explanation of Div and span in http://www.w3.org/tr/2004/wd-xhtml2-20040722/elements.html]xhtml], is different: For 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 explanation in XHTML 2.0, because of the existence of the section in 2.0, in the interpretation of the Div, the meaning of the node is canceled, xhtml1.x explanation I am too lazy to find. Now look back at the div and the last sentence I just tried to write down in XHTML 2.0 landing structure. Well, div may be useful even if you don't do a node or do a line.
Speaking of which, what is the biggest difference between HTML and XHTML? Is it a 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 structure-oriented language! So we should look at and understand and apply each tag in XHTML from a structural standpoint. The understanding of containers, for example, is correct in performance-oriented HTML, but in the case of structure-oriented XHTML it is wrong and should be understood as a node. Understanding the direct impact of the application, in order to express the understanding of clearly unable to write structured code. Otherwise what together what away, ha haha, can't help but knock out again.
Well, span can not be summed up now, we have to make a summary of the DIV: in the current xhtml1.x environment, we need to generate nodes (section) and row (line) when the use of Div.
The difference between div and span
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
