Since the creation of Web pages and browsers in the early 1990s, the Web has come a long way, and more and more enterprise applications are now built using Web technology.

As I told you earlier about network protocols, as you read this article, the browser sends a request to the server over HTTP/HTTPS and displays its response. This article gives you a brief introduction, the web page in the browser display and interaction, mainly involved in the following aspects of technology. I hope this series of articles will help you in your work on Web test case design, automated testing, and problem location on your website.

HTML (HyperText Markup Language)

Used to describe the structure and content of a web page, including many tag elements. If you use the paragraph tag p, you can define an object of the form *

hello world

In a browser window, press F12 to open “Developer Tools,” and in a TAB called Elements, you can see the HTML code for the entire page.

< HTML > <head> <title> <meta name="keywords" content=" test "> <style type="text/ CSS "> h3 {color: blue; Blue} < / style > < / head > < / head > < body > < div > < h3 > this is a title < / h3 > < p > this is a paragraph. </p> </div> </body> <script type="text/javascript"> console.log('hello world') </script> </html>Copy the code

-head: indicates the document header, which contains the information element of the web page. – title: indicates the document title. – meta: metadata, where keywords set some keywords that can be retrieved by search engines; -style: indicates the CSS style sheet. -body: The body of the document, which contains the content to be displayed on the page. – script: indicates the JavaScript script. For details, see the following sections.

Cascading Style Sheets (CSS)

Define how to display HTML elements, including their layout, size, style, color, etc., to achieve a web page content and display of the separation.

<style type="text/css">
  h3 {color: blue}
</style>
Copy the code

The style here sets the color attribute for the H3 element so that the text in the H3 tag appears blue.

JavaScript (Dynamic Scripting Language)

A dynamic parsing scripting language running in the browser, used for data exchange between the client and the server, and achieve web page interaction with the user, etc.

<script type="text/javascript">
  alert('hello world')
</script>
Copy the code

The above JavaScript code will pop up a “Hello World” warning window after the page has finished loading.

The Web server

Mainly used to parse HTML, images, CSS, JS and other static resources, such as Nginx server. Some Web servers can implement dynamic content parsing by configuring corresponding program modules. For example, Apache uses modules to parse scripts written in PHP.

Application server

Complete business logic processing, exchange data with more persistent layers (such as databases), load data into templates to generate static web pages and other functions. Typically, the application server also has a Web server embedded in it to allow static pages to be processed as HTML streams back to the browser.

Front end separation

Traditional Web applications generate static HTML responses on the server side, such as PHP, ASP, JSP, etc. The static part of a web page is more like an HTML template under the architecture of the front and back end separation. After the browser obtains the template from the server, it requests the server by executing JavaScript, obtains data, loads it into the template, and finally completes the rendering of the web page on the user’s own device.