Is the web front end just the presentation layer?

no. The web front-end can be divided into three layers: 1. The structural layer, which is created by markup languages ​​​​such as HTML or XHTML and is used to store all the content that customers want to read or view, which can include text, images, hyperlinks and multimedia. 2. The presentation layer, created by CSS, contains style instructions on how to display web documents in a web browser. 3. The behavior layer is the behavior of the web page. It is created by JS language and can update the content in the web page in real time, making the website interactive and allowing the page to respond to user operations or change based on a set of conditions.

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

W3C refers to the World Wide Web Consortium (World Wide Web Consortium), which was founded in October 1994. The emergence of W3C is to customize the standards for web development, so that the same web page can have the same effect in different browsers, so our custom-written web pages need to follow W3C specifications.

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

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 dictates how a structured HTML document looks to visitors to the website and is defined by CSS (Cascading Style Sheets). 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.

To put it simply, JavaScript, HTML and CSS together constitute the web page we see

• HTML is used to define the content of the web page. For example, title, text, images, etc.;

• CSS is used to control the appearance of the web page, such as color, font, background, etc.;

• JavaScript is used To update the content in the web page in real time, such as obtaining data from the server and updating it to the web page, modifying the style of some tags or the content thereof, etc., to make the web page more vivid.

HTML is HyperText Markup Language (HyperText Markup Language), which is a standard markup language used to create web pages. HTML is responsible for the structure of the three components of a web page. HTML uses tags to identify different components of a web page. The so-called hypertext refers to hyperlinks, which allow us to jump from one page to another.

CSS refers to Cascading Style Sheets. Styles define how to display HTML elements and are used to control the appearance of web pages. CSS is responsible for the performance of the three components of a web page, and styles are usually saved in external .css files. We only need to edit a simple CSS document to change the layout and appearance of all pages.

JavaScript is a scripting language ("JS" for short), a lightweight programming language used to control the behavior of web pages. JavaScript is responsible for the behavior of the three components of a web page. It can be inserted into the programming code of the HTML page. After JavaScript is inserted into the HTML page, it can be executed by all modern browsers.

Extended knowledge: The benefits of layering

1. Shared resources:

When you write external CSS or JavaScript files, any content on the site This file can be used on all pages. 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 site at the same time, you can use a system that allows files to be checked in and out to ensure everyone is on the latest version. It's even harder if style and behavior are intertwined with structural documentation.

4. Search Engine Optimization:

A website with a clear separation of style and structure is likely to perform better with search engines because they can crawl the content and understand the page more efficiently. Don’t get bogged down in visual style and behavioral messaging.

5. Accessibility:

External style sheets and script files are easier for people and browsers to access. 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 browsers and devices that cannot use certain CSS styles or have JavaScript disabled are still HTML can be viewed. 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 Is the web front end just the presentation layer?. For more information, please follow other related articles on the PHP Chinese website!