What is the three-tier structure of the web front-end?

The three-layer structure of the web front-end is: 1. The structure layer is created by a markup language such as HTML or XHTML. It is used to store all the content that customers want to read or view, and can include text and images. , hyperlinks and multimedia (video, audio, etc.). 2. The presentation layer, created by CSS, contains style instructions on how to display web documents in a web browser. 3. Behavioral layer, responsible for answering the question "how content should react to events" and making the website interactive, allowing pages to respond to user actions or change based on a set of conditions.

The operating environment of this tutorial: Windows 7 system, Dell G3 computer.

Web front-end is the web page displayed to users, that is, the front-end part of the website.

The idea of ​​Web front-end development is to divide web pages into three levels, namely: structure layer, presentation (style) layer, and behavior layer.

• The structural layer is created by a markup language such as HTML or XHTML. Tags, those words that appear within 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 such a semantic: "This is a text paragraph."

• Presentation layer (presentation layer) is created by CSS. CSS answers the question of how to display relevant content.

• The behavior layer(behavior layer) is responsible for answering the question "how content should react to events." This is an area dominated by the Javascript language and the DOM.

The presentation and behavior layers of a web page always exist, even if we don't explicitly give any specific instructions. At this point, the web browser will apply its default styles and default event handlers to the structural layer of the web page. For example, browsers will leave page margins when rendering "text segment" elements, and some browsers will pop up a prompt box showing the value of the element's title attribute when the user hovers the mouse pointer over an element. ,etc.

HTML: Structural Layer

The structural or content layer of a web page is the underlying HTML code of the page. Just as the framework of a house builds a solid foundation for the rest of the house, a solid foundation of HTML creates a platform upon which a website can be created.

The structure layer is used to store all the content that customers want to read or view. The HTML structure can contain text and images, and it includes hyperlinks that visitors use to navigate the website. This is encoded in standards-compliant HTML5 and can include text, images, and multimedia (video, audio, etc.).

CSS: Style Layer

This layer instructs how a structured HTML document looks to visitors of the website and is represented by CSS (Cascading Style Sheets) definition. These files contain styling instructions for how to display the document in a web browser. The style layer typically includes media queries that change the site's display based on screen size and device.

All visual styles for your website should be in external style sheets. You can use multiple stylesheets, but keep in mind that each CSS file requires an HTTP request to fetch it, affecting site performance.

JavaScript: Behavioral Layer

The behavioral layer makes a website interactive, allowing pages to respond to user actions or change based on a set of conditions. JavaScript is the most commonly used language for the behavioral layer, but CGI and PHP are also frequently used.

When developers refer to the behavioral layer, most are referring to the layer that is activated directly in the web browser. You can use this layer to interact directly with the DOM (Document Object Model). Writing valid HTML in the content layer is very important for DOM interaction in the behavioral layer. When building behavioral layers, external script files should be used just like CSS to optimize speed and performance.

Expand knowledge: benefits of layering

1. Shared resources:

When you When you write an external CSS or JavaScript file, the file can be used by any page on your site. If you need to make changes to this file, perhaps updating some typography styles on your site, every page that uses this style sheet will get the changes. There is no need to edit each page of your website individually, which can be a painstaking task for large websites.

2. Faster download speed:

After the script or style sheet is downloaded by the customer for the first time, the web browser will cache it. Because these shared resources are now included in the browser's cache, other pages requested in the browser load faster, improving overall page speed and performance.

3. Multi-person team:

If you have multiple people working on the website at the same time, you can use a system that allows files to be checked in and out to ensure Everyone uses the latest version. It's even harder if style and behavior are intertwined with structural documentation.

4. Search engine optimization:

A website that clearly separates style and structure is likely to perform better with search engines because they can more effectively crawl the content and understand the page without getting bogged down in visual style and behavioral information.

5. Accessibility:

External style sheets and script files are more accessible to people and browsers. Software such as screen readers can more easily work with content in a structural layer without having to deal with styles that are unusable anyway.

6. Backward compatibility:

Sites designed with a separate development layer are more likely to be backwards compatible because certain CSS styles cannot be used or JavaScript is disabled of browsers and devices can still view HTML. You can then gradually enhance your website using the features of browsers that support them.

(Learning video sharing: Getting started with web front-end)

The above is the detailed content of What is the three-tier structure of the web front-end?. For more information, please follow other related articles on the PHP Chinese website!