Like many web programmers, you may use 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.
Whether the browser just reads text in HTML and displays it? CSS? Especially when CSS is located outside the external file. JavaScript? It is also usually located in an external file. How does the browser handle these items, if the event handler, function, and style are mapped to this text tag?
Practice certificate, the answers to all of these issues are Document Object Model. Therefore, less nonsense, directly study the DOM.
Web programmer and tag
For most programmers, their work is over when the web browser begins. That is to say, after putting an HTML file into the Directory of the web browser, you usually think it has been "completed", and (full of hope), you will not consider it again! It is also a great goal when it is written, and it is also a great goal; I hope that your tagged browser, use various versions of CSS and JavaScript to display the content it should display, nothing.
The problem is that this method limits the understanding of the truly happening in the browser. More importantly, it limits the ability to dynamically update, changes, and reboot web pages with client JavaScript. Get rid of this restriction, so that your Web site has greater interactivity and creativity.
Programmers do
As a typical web programmer, you may start entering HTML, CSS, and even JavaScript after you start text editing and IDE. It is easy to think that these tags, selectors and properties are just a small task that makes the site correctly. However, at this point you need to expand your ideas and realize that you are organizing your content. Don't worry; I guarantee that this will not turn to label beauty, you have to recognize the true potential of the web page or a lecture of any other metamorphism. What you need to know is what role in the Web development.
Speaking of the appearance of the page, you can only mention suggestions. When you provide a CSS style sheet, users can override your style selection. When you provide a font size, the user browser can change these sizes for the visifison, or to reduce the proportion on large displays (with equivalent resolution). Even the colors and fonts you choose are also subject to the fonts installed on their system. Although doing do your design page style is very good, this is not your greatest impact on the web page.
You are absolutely controlling the structure of the web page. Your tag cannot be changed, users can't get messages; their browser can only retrieve tags from your web server (although the pattern is more in line with the user's taste rather than your own taste). But the page is organized, whether it is in this paragraph or other partitions, only by you separately. If you want to actually change your page (this is most of the Ajax applications), you are working on the structure of the page. Although it is easy to change the color of a piece of text, adding text on existing pages or has a lot of things throughout the section. Regardless of how users design the style of this section, they are controlled by your organization. Mark what?
Once you realize that your tag is truly related to the organization, you will see it again. Will not think that H1 causes the text to be a big name, black, bold, and will think that H1 is a title. How do users look at this issue and they use your CSS, their own CSS or the combination of both, this is a secondary consideration. Instead, we must realize that only tags can provide this level of organization; P is indicated in the paragraph, IMG represents images, divide the page into a section, and so on.
It should also be clear that style and behavior (event handler and JavaScript) are applied to the organization after things. The tag is ready to operate or design it. So, as you can save CSS in an external file of HTML, the tag of the tag is separated from its style, format and row. Although you must use JavaScript to change the style or text style, it is more interesting to actually change your tag.
As long as you keep in mind that your marking is only provided to organize your page, you can stand in an invincible place. Before entering a small step, you will understand how the browser accepts all the text organizations and transforms them into a super interesting thing, a set of objects, where each object can be changed, added, or deleted.
About other ideas for markers Edit: Is it wrong? Pure text is ideal for storage tags, but is not suitable for editing tags. The big way is to operate the web page tag using IDE, such as Microsoft® FrontPage®, or more Macromedia Dreamweaver or a more powerful point. These environments typically provide shortcuts and help to create a web page, especially when using CSS and JavaScript, both from the actual page tag. Many people still prefer to use ancient Notepad or VI (I admit me is also one of them), this is not tight. In any case, the end result is a text file full of tags. Text on the Internet: Good things have been said, the text is the best media of the document, such as HTML or CSS, which is transmitted thousands of times on the network. When I said that the browser indicates that the text is difficult, it is a visual graphic page that converts text to the user to the user. This doesn't matter how the browser actually retrieves the page from a web browser; in which case the text is still the best choice.
Advantages of text tag
Before discussing a web browser, it is worth considering why plain text is definitely the best choice for storage HTML (for more information, see some other ideas for marking). Do not consider excellent shortcomings, just recalling that HTML is sent to a web browser through the network (for simple, not considering cache, etc.). It's really no way to pass the text again. Binary objects, page graphical representations, reorganized tag blocks, etc., all all this is more difficult to pass network through network files.
In addition, the browser also adds a bright color. Today's browser allows users to change text size, compact image, and download the CSS or JavaScript (most case), even more, which completely excludes the sending of any type of page graphic representation to the browser. However, the browser requires the original HTML so that it can apply any processing on the page in the browser instead of trusting the browser to process the task. Similarly, the CSS separates from JavaScript and separates CSS from HTML marking requirements to be easily separated format. Text files have become the best way to be the task again. Last but equally, it is, remember, new standards (such as HTML 4.01 and XHTML 1.0 and 1.1) Commitment to separate content (data in the page) with representations and styles (usually applied by CSS applications). If the programmer wants to separate HTML with CSS, then forced the browser to retrieve some of the pages of the blended pages, which will lose most of these standards. Keeping these parts When they arrive at the browser, they have been separated so that the browser has unprecedented flexibility when you get HTML from the server.
To learn more about web browsers
For some web programmers, all content read in the previous article may be a funny story about your role in the web development process. But talking about the behavior of the browser, many of the most capable web designers and developers usually have not realized the actual situation of "insider". I will talk about this section. Don't worry, the code is coming soon, but you want to make your encoded mood, because you really understand the exact behavior of the web browser is very important for your code correctly.
Disadvantages of text tag
As the text mark has an amazing advantage for designers and page creators, it also has quite shortcomings for browsers. Specifically, the browser is difficult to direct text tags to the user (see some other ideas for tags). Consider the following common browser tasks:
Based on element type, class, id, and its location in the HTML document, the CSS style (usually from multiple style sheets from external files) is applied to tags. Based on JavaScript code (usually located in an external file) to apply style and format to different parts of the HTML document. Change the value of the form single field based on the JavaScript code. Based on JavaScript code, support visual effects, such as image flipping and image exchange.
Complexity is not to encode these tasks; everything in it is quite easy. Complexity comes from a browser that actually implements a request action. If the tag is stored as text, for example, how to enter text (text-align: center) in the P element in the Center-Text class, how to implement it?
Add the inline style to the text? Apply styles to HTML text in your browser, and only keep content or not in content? Apply an unmovable HTML, then apply the format after the event?
These very difficult problems are now very few reasons for writing browsers. (People who write browsers should accept the most sincere thanks)
Undoubtedly, plain text is not a good way to store browser HTML, although the text is the best solution for obtaining page tags. If you add JavaScript to change the ability to change the page structure, things become subtle. Should the browser restote the modified structure to disk? How can I keep the latest version of the document?
Undoubtedly, text is not an answer. It is difficult to modify, it is very difficult to apply style and behavior, and the dynamic essence of the Web page today is very far away.
Help in tree view
The answer to this question (at least the answer to the today's Web browser) is to use the tree structure to represent HTML. See Listing 1, this is a fairly simple and boring HTML page representing the tag of this article. Listing 1. Simple HTML page in text tag
hEAD>
Welcome to a really em> boring page. p>
Come again soon.
div>
body>
html>
The browser accepts this page and converts it to the tree structure, as shown in Figure 1.
Figure 1. Tree view of the list 1
In order to maintain the progress of this article, I did a little simplified. Experts from DOM or XML will realize that the blank has an impact of the document text represents and decomposes the way in the web browser tree structure. The skin's understanding will only make things ambiguous, so if you want to figure out the impact of the blank, it is best nothing; if you don't want it, you can continue to read, don't consider it. When it becomes a problem, you will understand everything you need.
In addition to the actual tree background, it may first notice that everything in the tree contains an element with an outermost HTML, ie the HTML element begins. This is called a root element using the metaphor of the tree. So even if this is the bottom layer of the tree, when you view and analyze the tree, I usually start here. If it does work, you can put the entire tree down, but this does have some metaphor of the tree.
The line from the root outflow represents the relationship between different marking parts. Head and body elements are children of HTML root elements; Title is a child of Head, while text "Trees, Trees, Everywhere" is Title's child. The whole tree goes to this organization until the browser obtains a structure similar to Figure 1.
Some additional terms
In order to follow the metaphor of the tree, Head and Body are called HTML branches (BRANCHES). The branch is because they have their own children. When arriving at the end of the tree, you will enter the main text, such as "Trees, Trees, Everywhere" and "Really"; these usually referred to as leaves because they do not have their own children. You don't need to remember all of these terms, when you try to figure out the meaning of specific terms, as long as you think that the tree structure is much easier.
Object value
Since some basic terms are learned, you should now pay attention to the small rectangle containing the element name and text (Figure 1). Each rectangle is an object; the browser solves some text issues. By using an object to represent each part of the HTML document, you can easily change your organization, application style, allowing JavaScript to access documents, and so on.
Object type and attribute
Each possible type of tag has its own object type. For example, the elements in HTML are represented by the ELEMENT object type. The text in the document is represented by a text type, and the property is represented by Attribute type to use this class.
So the web browser can not only use object models to represent documents (thus avoiding processing static text), but also use object types to immediately identify what is something. The HTML document is parsed and converted to an object collection, as shown in Figure 1, then a bracket and escape sequence (for example, using
Somediv.Style.height = "300px";
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 good things
If you try the practice I that you just mention, you may find that the tagged tree view is in some potential problems (if you don't practice, then I 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
hEAD>
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>
div>
body>
html>
Listing 3. More smart elements Nested
hEAD>