-------------------------------------------------- -------------------------------------- Release time: 2006-04-18 09:04: 50 author: Brett McLaughlin source: ibm language: Chinese views: 302 times with many Web programmers, you may have used HTML. HTML is the way the programmer began to deal with the web page; HTML is usually the last step in which they complete the application or site - adjust some layout, color or style. However, although HTML is often used, what happens when HTML is forwarded to the browser, and people are generally misunderstood. Before I analyze what you think may happen, I hope that you will be clear about the process of designing and serving the web page:
Some people (usually you!) Create HTML in a text editor or IDE. Then you upload HTML to a web server, such as Apache Httpd, and disclose it on the Internet or intranet. Users requested your web page with browsers such as Firefox or Safaria. The user's browser requests HTML to your server. The browser will present the page received from the server in graphics and text; the user sees and activates the web page. This looks very foundation, but things will become interesting. In fact, the huge number of "stuff)" occurs between steps 4 and 5 is the focus of this article. The term "filler" is also very applicable because most programmers have never truly considered what happened to markers when the user browser requests the display tag.
Welcome to a really em> boring page. p>
Come again soon.
In other words, the web browser uses object properties to easily change the appearance and structure of the tree. Compared with the browser to represent a complex thing that must be made when the page is text as text, each change attribute or structure requires a browser to rewrite static files, resolving and resculating on the screen. With an object, all this is solved. Now, spend some HTML documentation and tap it with a tree. Although this looks an unusual request (especially in such an article containing very little code), if you want to manipulate these trees, you need to be familiar with them. In this process, some weird things may be found. For example, consider the following:
What happened attribute? Decompose the text of elements (such as EM and B)? Is incorrect structure (such as the HTML that is missing when the P mark is missing? Once you are familiar with these issues, you can better understand the following sections. Strictly sometimes a good thing if you try to practice I, you may find that the marked tree view is in some potential problems (if you don't practice, then listen to me!). In fact, some problems will be found in Listing 1 and Figure 1, first look at how the P element is decomposed. If you ask the usual web developer "What is the text content of P element", the most common answer will be "Welcome to a really boring web page.". If you compare it to Figure 1, you will find this answer (although logic) is not true. In fact, the P element has three different sub-objects, with no complete "Welcome to a really boring web page." Text. You will find part of the text, such as "Welcome to A" and "Boring Web Page", but not all. To understand this, remember that any content in the tag must be converted to a type of object. In addition, the order is insignificant! If the browser displays the correct object, but the order in which the display is not provided in HTML, then you can imagine how users will respond to a web browser? Paragraph clip in the middle of the page title and article title, and this is not the style when you organize documents yourself? Obviously, the browser must maintain the order of elements and text. In this example, the P element has three different parts:
The text of the text EM element itself before the EM element The text after the EM element is disrupted, and the focus may be placed in the wrong part of the text. In order to keep all normal, the P element has three sub-objects, and its sequence is the order shown in the HTML of Listing 1. Moreover, the focus text "Really" is not a sub-element of the P; it is a child element of the sub-element EM of the P. It is very important to understand this concept. Although "real" text may be displayed with other P element text, it is still the direct child element of the EM element. It can have different formats that are different from other P texts and can be moved every other text. To keep it in mind, try to use the figure to represent the HTML in Listing 2 and 3, ensuring that the text has the correct parent element (regardless of how the text will eventually display on the screen). Listing 2. Tags with smart elements
this p really isn "t necessary em>, but it makes the
structure and i> the Organization span>
Of the page easier to keep up with. p>
Listing 3. More smart elements Nested
|Steps TH>||Process TH> TR>|
|1 TD>|| Figure Out The root element em>. td> tr>
|| 2 TD> || DEAL with the Head span> first,
AS IT "S Usually Easy. TD> TR>
| 3 TD> || Work Through The body span>.
Just take your time em>. Td> tr>
This Link is NOT em> Active, But if it were, the answers
Be there. but do the supercise anyway! em>
These exercises will be found in Tricky-Solution.gif and Figure 3 at the GIF file in this article. Don't peek, take some time to answer it. This will help you understand how stringent rules applied when you organize trees, and truly help you master HTML and their tree structure. What about the property? Are you experiencing some problems when you try to figure out how to deal with properties? Before you mention, the property does have your own object type, but the property does not show the child elements of its elements, nested elements and text are not in the same property "level", you will notice that Listing 2 and 3 Answers There is no display attribute. The attribute is in fact stored in the object model used by the browser, but they have some special situations. Each element has a list of available properties and is separated from the sub-object list. So the DIV element may have a list containing the properties "ID" and another attribute "class". Remember, the properties of the elements must have the only name, that is, one element cannot have two "id" or two "class" properties. This makes the list easy to maintain and access. In the next article, you will see that you can simply call methods such as GetAttribute ("ID") to obtain the value of the attribute by name. You can also use a similar approach to add a value of an attribute or setting (reset) existing attribute. It is worth noting that the uniqueness of the attribute name makes the list different from the list of child objects. The P element can have multiple EM elements, so the child object list can contain multiple repetitions. Although the operation mode of the sub-list and attribute list is similar, one can contain a repetitive item (sub item for the object), and an incomplete (attribute of the element object). Finally, only the elements have attributes, so the text object does not have additional lists for storing properties. The messy HTML talks to how the browser is converted to a tree before going to the tree, and there is a topic worth exploring, that is, how the browser is not a good format. The format is a widely used term in XML, there are two basic elections:
Each start tag has a matching end tag. So each
matches p> in the document, each
Var phoneenumbelement = document.getlementByid ("Phone");
Var phoneenumber = phonenumbelement.value;