測試開發之前端篇-Web前端簡介
原創
最后编辑：李晓琳 于 2021-08-31 10:32:36
1169次查看
本篇目錄
自從九十年代初，人類創造出網頁和浏覽器後，Web取得了長足的發展，如今越來越多的企業級應用也選擇使用Web技術來構建。
前面給大家介紹
網絡協議時講到，您在閱讀這篇文章時，浏覽器是通過HTTP/HTTPS協議向服務器發送請求、並顯示了其響應內容的。本文給大家簡要介紹下，網頁在浏覽器中展現和互動時，主要涉及到的以下幾個方面的技術。希望此系列文章，對大家工作中的Web測試用例設計、自動化測試，以及網站問題定位有所幫助。
HTML（HyperText Markup Language，超文本标记语言）
用于描述网页的结构和内容，包涵了很多标签（tag）组成的元素(element)。如使用段落标签p，可以定义一个形如*<p>hello world</p>*的段落元素。在浏覽器窗口中，按F12鍵打開”開發人員工具“，在名爲Elements的標簽中，您可以查看到整個頁面的HTML代碼。
<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>
其中，各元素的解釋如下：- head： 文档头部，包含网页的信息元素；
- title： 文档标题；
- meta： 元数据，这里的keywords设置了一些可供搜索引擎检索的關鍵字；
- style： CSS样式表，详见后续章节；
- body： 文档主体，包含页面所要展示的内容；
- script：JavaScript脚本，详见后续章节。
CSS（Cascading Style Sheets，层叠式样式表）
定义如何显示 HTML里的元素，包括其布局、大小、风格、色彩等，从而实现网页的内容和显示方式相分离。<style type="text/css">
h3 {color: blue}
</style>
這裏的樣式針對h3元素設置了color屬性，效果爲h3標簽中的文字顯示爲藍色。JavaScript（動態脚本语言）
运行于浏览器中的一种動態解析脚本语言，用于客户端和服务器的数据交换，并实现网页同用户的交互等。<script type="text/javascript">
alert('hello world')
</script>
以上JavaScript代码，在页面加载结束后，会在弹出一个内容为”hello world“警告窗口。Web服務器
主要用于解析HTML、图片、CSS、JS等静态资源，如Nginx服务器。有些Web服務器可以通过配置相应的程序模块，实现動態内容的解析，如Apache使用模块解析PHP语言编写的脚本。應用服務器
完成业务逻辑处理，同更持久层（如数据库）交换数据，装载数据到模板生成静态网页等功能。通常應用服務器也会内嵌一个Web服務器，以实现将处理好的静态网页以HTML流的形式返回给浏览器。前後端分離
传统的Web应用是在服务器端生成静态HTML响应的，比如PHP、ASP、JSP等。前後端分離的架构下，网页的静态部分更接近于一个HTML模板，浏览器从服务器获取模板后，再通过执行JavaScript来请求服务器、获取数据、装载到模板，最终在用户自己的设备上完成网页的渲染。
禅道項目
