web網頁開發
這裡主要總結，web網頁的開發，即我們經常所看見的淘寶，新聞等網頁。我們將一個所見的網頁中每次重新整理不變的部分，稱為靜態。這些靜態由HTML和CSS組成，他們形成了網頁的樣式。HTML是一種標記語言，用來結構化我們的網頁內容和賦予內容含義（形成樹形結構），例如定義段落、標題、和資料表,或在頁面中嵌入圖片和視訊。CSS 是一種樣式規則語言，例如設定背景顏色和字型，內容的排版，然後我們將這些樣式應用於我們的HTML。
一個簡單的HTML檔案人下所示：
<!DOCTYPE html> <html> <head> /*head主要有HTML的標題，指定你的文件中字元的編碼，作者和描述，在HTML中應用CSS和JavaScript等 */ <meta charset="UTF-8"> <title></title><!--標題--> <link rel="stylesheet" type="text/css" href="css/css.css"/><!--引用外部css--> <style type="text/css">/*使用內部CSS*/ .hello{ // 設定class=hello的樣式 color: red; } </style> </head> <body> //body是HTML的主要內容，描述了頁面的結構。 <h1>hello</h1> <div class="hello"> </div> </body> <script src="js/main.js" type="text/javascript" charset="utf-8"></script><!--引用外部js--> <script type="text/javascript">/*使用內部js*/ var hello=document.querySelector(".hello");<!—採用DOM的API,引用html中的元素--> var newhello=document.createElement("button");<!--新建html中的元素--> newhello.textContent="botton";//設定這個元素的屬性以及內容 hello.appendChild(newhello);<!--在元素後面新插入元素--> newhello.onclick()=function (){ /*onclick 為滑鼠點選事件 滑鼠點選時，觸發事件，執行後面的函式function*/ } function hanshu (){ // 單獨的函式 } </script> </html>
如果說HTML和css幫助我們完成了頁面上的樣式的設計，那麼JavaScript就幫助我們完成與使用者之間的互動，如使用者點選，滑動，輸入等。Js(JavaScript的簡稱)是一種程式語言，允許你建立動態更新的內容，控制多媒體，影象動畫，和一些其他的東西。JS通過對HTML上元素的引用對網頁上產生的事件（瀏覽器中發生的動作，例如點選按鈕，載入頁面或播放視訊）進行響應。
大多數現代的web站點是動態的—它們在服務端使用各種型別的資料庫來儲存資料(伺服器), 之後通過執行伺服器（server-side） 程式碼來重新獲取需要的資料，把其資料插入到靜態頁面的模板中，並且生成出HTML渲染到使用者瀏覽上。為此使用HTTP/HTTPS協議在 Web 上進行資料交換，並在資料傳輸的過程中需經過DNS和TCP/IP 協議。它是client-server協議。客戶端和服務端通過交換各自的訊息（與資料流正好相反）進行互動。由像瀏覽器這樣的客戶端發出的訊息叫做 requests，被服務端迴應的訊息叫做
responses。它是應用層的協議，通過TCP（HTTP），或者是TLS（加密的TCP ,HTTPS）連線來發送。
舉個例子：
當你在瀏覽器裡輸入一個網址時（在我們的例子裡就是走向商店的路上時）：
- 瀏覽器在域名系統伺服器（DNS）上找出存放網頁的伺服器的實際地址（IP地址）（找出商店的位置）。
- 瀏覽器傳送 HTTP 請求資訊（資料的傳輸遵守TCP/IP 協議）到伺服器來請拷貝一份網頁到客戶端（你走到商店並下訂單）。
- 伺服器同意客戶端的請求後，會返回一個“200 OK”資訊，同意傳輸，然後開始將網頁的檔案以資料包的形式傳輸到瀏覽器。
- 瀏覽器將資料包聚整合完整的網頁然後將網頁呈現給你。
這樣一個簡單的網頁就完成了，但是在實際過程中，仍會許多問題。比如：HTTP是無狀態的：在同一個連線中，兩個執行成功的請求之間是沒有關係的。這就帶來了一個問題，使用者沒有辦法在同一個網站中進行連續的互動，比如在一個電商網站裡，使用者把某個商品加入到購物車，切換一個頁面後再次添加了商品，這兩次新增商品的請求之間沒有關聯，瀏覽器無法知道使用者最終選擇了哪些商品。再比如：如果傳輸的資料較多，較大，那麼每次互動時，均重新請求時，使用者需等待較長時間，體驗不好。為解決這些問題，開發人員們設計了AJAX,快取，web worker，CORS等技術。
Asynchronous JavaScript and XML（Ajax）：非同步，指無需重新載入整個頁面的情況下，只更新部分頁面的技術。主要是通過XMLHttpRequest （）（通常縮寫為XHR）或 Fetch（）來請求。為了進一步提高速度，有些網站還會在首次請求時將資產和資料儲存在使用者的計算機上，這意味著在後續訪問中，他們將使用本地版本，而不是在首次載入頁面時下載新副本。 內容僅在更新後從伺服器重新載入。XHR允許你使用它的 onload 事件處理器來處理這個事件 — 當onload 事件觸發時（當響應已經返回時）這個事件會被執行。
AJAX程式碼：
var request = new XMLHttpRequest();
request.open('GET, url);
request.responseType = 'text';//XHR預設返回文字，可修改格式
request.onload = function() {
var.textContent = request.response;//返回 };
request.send();
與XHR不同，fetch()返回一個解析HTTP響應的promise，它將解析從伺服器發回的響應。我們使用then()來執行一些後續程式碼，這是我們在其內部定義的函式。這相當於XHR版本中的onload事件處理程式。
Fetch程式碼：
fetch(url).then(function(response) {
response.text().then(function(text)
{//text() 也返回了一個 promise
var.textContent = text;
}
}
對於前面所說的，將資產和資料儲存在使用者的計算機上，主要才採取cookie，sessionStorage和 localStorage。這些引數均可在瀏覽器的開發者模式中application中檢視。Cookie可以採用http頭部擴充套件的方式，把Cookies新增到頭部中，建立一個會話讓每次請求都能共享相同的上下文資訊，達成相同的狀態。注意，HTTP本質是無狀態的，使用Cookies可以建立有狀態的會話。sessionStorage，只要瀏覽器開著，資料就會一直儲存 (關閉瀏覽器時資料會丟失)。localStorage，一直儲存資料，甚至到瀏覽器關閉又開啟後也是這樣。每個域都有一個單獨的資料儲存區，無法交錯使用。Session，由於HTTP協議是無狀態的協議，所以服務端需要記錄使用者的狀態時，就需要用某種機制來識具體的使用者.典型的場景比如購物車，當你點選下單按鈕時，由於HTTP協議無狀態，所以並不知道是哪個使用者操作的，所以服務端要為特定的使用者建立了特定的Session，用用於標識這個使用者，並且跟蹤使用者，這樣才知道購物車裡面有幾本書。這個Session是儲存在服務端的，有一個唯一標識。Session是在服務端儲存的一個數據結構，用來跟蹤使用者的狀態，這個資料可以儲存在叢集、資料庫、檔案中；
Cookie是客戶端儲存使用者資訊的一種機制，用來記錄使用者的一些資訊，也是實現Session的一種方式。
如果你的網站需跨域，去獲取資源，則需要使用CORS（Cross-Origin Resource Sharing）技術。這是HTML5定義的如何跨域訪問資源的方法。Origin表示本域，也就是瀏覽器當前頁面的域。當JavaScript向外域（如sina.com）發起請求後，瀏覽器收到響應後，首先檢查Access-Control-Allow-Origin是否包含本域，如果是，則此次跨域請求成功，如果不是，則請求失敗，JavaScript將無法獲取到響應的任何資料。
假設本域是my.com，外域是sina.com，只要響應頭Access-Control-Allow-Origin為http://my.com，或者是*，本次請求就可以成功。
可見，跨域能否成功，取決於對方伺服器是否願意給你設定一個正確的Access-Control-Allow-Origin，決定權始終在對方手中。