自從九十年代初，人類創造出網頁和瀏覽器後，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來請求伺服器、獲取資料、裝載到模板，最終在使用者自己的裝置上完成網頁的渲染。

測試開發之前端篇-Web前端簡介