What are the three layers of the front-end page, and what are the respective ones? What is the role?

There are many web designers who have experience designing layouts for paper prints. In fact, when designing a Web site, treating a Web page as a paper print is the easiest idea to think about, except for replacing the blank with a screen. This approach is doomed to failure. The Web is a different kind of media. When designing a paper print, the original content and layout must be intertwined to see the final printing effect, but when designing a Web page, you only have to separate it to get the best results.

The most accurate web design idea is to divide the Web page into three levels, namely: structure layer, presentation layer, behavior layer.

the structure layer (structural layer) of a Web page is created by markup languages such as HTML or XHTML. tags, which are words that appear in angle brackets, describe the semantic meaning of Web content, but these tags do not contain any information about how to display the content. For example, the P tag expresses the semantics: "This is a text segment." ”

the presentation layer (presentation layer) of the Web page is created by the CSS. The CSS answers the question "How to display the content".

The behavior layer of the Web page (behavior layer) is responsible for answering the question "how the content should respond to events". This is the realm of Javascript and DOM dominance.

The presentation layer and the behavior layer of the Web page always exist, even if we do not explicitly give any specific instructions. At this point, the Web browser will apply its default style and default event handler to the structure layer of the Web page. For example, the browser leaves margins when the text snippet element is rendered, and some browsers pop up a prompt that shows the value of the element's title property when the user hovers the mouse pointer over an element, and so on.

Separation

In all product design activities, choosing the most suitable tool to solve the problem is the most basic principle. Specific to web design work, which means:

• Use (X) HTML to build the structure of the document.
• Use CSS to set the rendering effect of the document.
• Use DOM scripting to implement the behavior of the document.

However, there are some potential overlapping areas between these three technologies, such as: DOM technology can be used to change the structure of a Web page. It is also possible to find examples of such overlapping techniques in CSS. Predefined symbols such as hover and: focus (pseudo class attribute) allow us to change the rendering effect based on the user triggering event. Changing the rendering of an element is, of course, the "sphere of influence" of the presentation layer, but reacting to user-triggered events is the domain of the behavioral layer. This overlap between the presentation layer and the behavior layer forms a gray area.

The pseudo-Class attribute is the evidence that CSS is going deep into the DOM territory, but the DOM is not doing nothing about it. We can use DOM technology to apply style information to HTML elements.

The effect of separation is that even if you remove the presentation layer and the behavior layer, the contents of the document are still accessible because "content is everything." And the web's behavior layer (JavaScript) and its structure (XHTML) are not interfering with each other, and cannot be mixed together. Also give the behavioral layer a "fallback", taking into account what happens if your users disable Javascript? is not a webpage can also function normally.

Amount Said a long time found are some of the theoretical things, as some basic ideas, specific people in the process of continuous practice to slowly experience.

In short, these three technologies are like three legs of a stool, and to become a full-fledged Web-tech guru, you have to be proficient in these three technologies and know what kind of problem each technology is best suited for.

What are the three layers of the front-end page, and what are the respective ones? What is the role?