Since humans created web pages and browsers in the early 1990s, the Web has made considerable progress. Nowadays, more and more enterprise-level applications have also chosen to use Web technology to build.
When I introduced you to the network protocol, I mentioned that when you were reading this article, the browser sent a request to the server through the HTTP/HTTPS protocol and displayed its response. This article gives you a brief introduction to the following technologies that are mainly involved when web pages are displayed and interacted in the browser. I hope this series of articles will help you in designing web test cases, automated testing, and website problem positioning in your work.
HTML (HyperText Markup Language)
It is used to describe the structure and content of a web page, and contains many elements composed of tags. If you use the paragraph tag p, you can define a paragraph element <p>hello world</p>
In the browser window, press the F12 key to open the "Developer Tools". In the tag named Elements, you can view the HTML code of the entire page.
<html>
<head>
<title>网页标题</title>
<meta name="keywords" content="测试开发,自动化测试,软件测试">
<style type="text/css">
h3 {color: blue}
</style>
</head>
</head>
<body>
<div>
<h3>这是一个标题</h3>
<p>这是一个段落。</p>
</div>
</body>
<script type="text/javascript">
console.log('hello world')
</script>
</html>Among them, the explanation of each element is as follows:
head: the head of the document, which contains the information elements of the webpage;
- title: document title;
- meta: Metadata, the keywords here set some keywords that can be retrieved by search engines;
- style: CSS style sheet, see the subsequent chapters for details;
- body: The main body of the document, which contains the content to be displayed on the page;
- script: JavaScript script, see the following chapters for details.
CSS (Cascading Style Sheets, Cascading Style Sheets)
Define how to display the elements in HTML, including their layout, size, style, color, etc., so as to realize the separation of web content and display mode.
<style type="text/css">
h3 {color: blue}
</style>The style here sets the color attribute for the h3 element, and the effect is that the text in the h3 tag is displayed in blue.
JavaScript (dynamic scripting language)
A dynamic parsing script language running in the browser, used for data exchange between the client and server, and to realize the interaction between the webpage and the user, etc.
<script type="text/javascript">
alert('hello world')
</script>The above JavaScript code will pop up a warning window with the content "hello world" after the page is loaded.
Web server
Mainly used to parse static resources such as HTML, pictures, CSS, JS, etc., such as Nginx server. Some web servers can parse dynamic content 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 a more persistent layer (such as a database), load data to the template to generate static web pages and other functions. Usually, the application server also embeds a web server to realize the processed static web page is returned to the browser in the form of HTML stream.
Front and rear separation
Traditional web applications generate static HTML responses on the server side, such as PHP, ASP, JSP, etc. Under the architecture where the front and back ends are separated, the static part of the web page is closer to an HTML template. After the browser obtains the template from the server, it executes JavaScript to request the server, obtain data, and load the template, and finally complete the web page on the user's own device. Rendering.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。