HTTP狀態碼

HTTP狀態碼（英語：HTTP Status Code）是用以表示網頁服務器超文本傳輸協議響應狀態的3位數字代碼。它由 RFC 2616 規范定義的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774 與 RFC 4918 等規范擴展。所有狀態碼的第一個數字代表了響應的五種狀態之一。所示的消息短語是典型的，但是可以提供任何可讀取的替代方案。 除非另有說明，狀態碼是HTTP / 1.1標準（RFC 7231）的一部分。



HTTP狀態碼的官方注冊表由互聯網號碼分配局（Internet Assigned Numbers Authority）維護。



微軟互聯網信息服務 （Microsoft Internet Information Services）有時會使用額外的十進制子代碼來獲取更多具體信息，但是這些子代碼僅出現在響應有效內容和文檔中，而不是代替實際的HTTP狀態代碼。



HTTP狀態碼分類



分類 分類描述

1 信息，服務器收到請求，需要請求者繼續執行操作

2 成功，操作被成功接收并處理

3 重定向，需要進一步的操作以完成請求

4 客戶端錯誤，請求包含語法錯誤或無法完成請求

5** 服務器錯誤，服務器在處理請求的過程中發生了錯誤

1xx 信息（消息）

這一類型的狀態碼，代表請求已被接受，需要繼續處理。這類響應是臨時響應，只包含狀態行和某些可選的響應頭信息，并以空行結束。由于 HTTP/1.0 協議中沒有定義任何 1xx 狀態碼，所以除非在某些試驗條件下，服務器禁止向此類客戶端發送 1xx 響應。



100 Continue

繼續?？蛻舳藨斃^續發送請求。

101 Switching Protocols

切換協議。服務器根據客戶端的請求切換協議。只能切換到更高級的協議，例如，切換到HTTP的新版本協議。



2xx 成功

這一類型的狀態碼，代表請求已成功被服務器接收、理解、并接受。



200 OK

請求成功。請求所希望的響應頭或數據體將隨此響應返回。出現此狀態碼是表示正常狀態。

201 Created

已創建。成功請求并創建了新的資源。

202 Accepted

已接受。已經接受請求，但未處理完成。

203 Non-Authoritative Information

非授權信息。請求成功，但返回的meta信息不在原始的服務器，而是一個副本。

204 No Content

無內容。服務器成功處理，但未返回內容。在未更新網頁的情況下，可確保瀏覽器繼續顯示當前文檔。

205 Reset Content

重置內容。服務器處理成功，用戶終端（例如：瀏覽器）應重置文檔視圖。可通過此返回碼清除瀏覽器的表單域。

206 Partial Content

部分內容。服務器成功處理了部分GET請求，類似于 FlashGet 或者迅雷這類的 HTTP下載工具都是使用此類響應實現斷點續傳或者將一個大文檔分解為多個下載段同時下載。



3xx 重定向

這類狀態碼代表需要客戶端采取進一步的操作才能完成請求。通常，這些狀態碼用來重定向，后續的請求地址（重定向目標）在本次響應的 Location 域中指明。

當且僅當后續的請求所使用的方法是 GET 或者 HEAD 時，用戶瀏覽器才可以在沒有用戶介入的情況下自動提交所需要的后續請求?？蛻舳藨斪詣颖O測無限循環重定向（例如：A->A，或者A->B->C->A），因為這會導致服務器和客戶端大量不必要的資源消耗。按照 HTTP/1.0 版規范的建議，瀏覽器不應自動訪問超過5次的重定向。



300 Multiple Choices

多種選擇。請求的資源可包括多個位置，相應可返回一個資源特征與地址的列表用于用戶終端（例如：瀏覽器）選擇。

301 Moved Permanently

永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。今后任何新的請求都應使用新的URI代替。

302 Move Temporarily（Found）

臨時移動。與301類似，但資源只是臨時被移動，客戶端應繼續使用原有URI。

303 See Other

查看其它地址。與301類似，使用GET和POST請求查看。

304 Not Modified

未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源?？蛻舳送ǔ彺嬖L問過的資源，通過提供一個頭信息指出客戶端希望只返回在指定日期之后修改的資源。

305 Use Proxy

使用代理。所請求的資源必須通過代理訪問。

306 Switch Proxy

在版的規范中，306狀態碼已經不再被使用。它算是已經被廢棄的HTTP狀態碼。

307 Temporary Redirect

臨時重定向。與302類似，使用GET請求重定向。



4xx 客戶端錯誤（請求錯誤）

這類的狀態碼代表了客戶端看起來可能發生了錯誤，妨礙了服務器的處理。除非響應的是一個 HEAD 請求，否則服務器就應該返回一個解釋當前錯誤狀況的實體，以及這是臨時的還是永久性的狀況。這些狀態碼適用于任何請求方法。瀏覽器應當向用戶顯示任何包含在此類錯誤響應中的實體內容。

如果錯誤發生時客戶端正在傳送數據，那么使用TCP的服務器實現應當仔細確保在關閉客戶端與服務器之間的連接之前，客戶端已經收到了包含錯誤信息的數據包。如果客戶端在收到錯誤信息后繼續向服務器發送數據，服務器的TCP棧將向客戶端發送一個重置數據包，以清除該客戶端所有還未識別的輸入緩沖，以免這些數據被服務器上的應用程序讀取并干擾后者。



400 Bad Request

客戶端請求的語法錯誤，服務器無法理解。

401 Unauthorized

當前請求需要用戶驗證。

402 Payment Required

該狀態碼是為了將來可能的需求而預留的。（保留，將來使用。）

403 Forbidden

服務器理解請求客戶端的請求，但是拒絕執行此請求。

404 Not Found

請求失敗，請求所希望得到的資源未被在服務器上發現。沒有信息能夠告訴用戶這個狀況到底是暫時的還是永久的。假如服務器知道情況的話，應當使用410狀態碼來告知舊資源因為某些內部的配置機制問題，已經永久的不可用，而且沒有任何可以跳轉的地址。404這個狀態碼被廣泛應用于當服務器不想揭示到底為何請求被拒絕或者沒有其他適合的響應可用的情況下。出現這個錯誤的最有可能的原因是服務器端沒有這個頁面。

405 Method Not Allowed

客戶端請求中的方法被禁止，也就是請求行中指定的請求方法不能被用于請求相應的資源。該響應必須返回一個Allow 頭信息用以表示出當前資源能夠接受的請求方法的列表。

406 Not Acceptable

服務器無法根據客戶端請求的內容特性完成請求，也就是請求的資源的內容特性無法滿足請求頭中的條件，因而無法生成響應實體。

407 Proxy Authentication Required

與401響應類似，只不過客戶端必須在代理服務器上進行身份驗證。代理服務器必須返回一個 Proxy-Authenticate 用以進行身份詢問?？蛻舳丝梢苑祷匾粋€ Proxy-Authorization 信息頭用以驗證。參見RFC 2617。

408 Request Timeout

請求超時?？蛻舳藳]有在服務器預備等待的時間內完成一個請求的發送。客戶端可以隨時再次提交這一請求而無需進行任何更改。

409 Conflict

由于和被請求的資源的當前狀態之間存在沖突，請求無法完成。這個代碼只允許用在這樣的情況下才能被使用：用戶被認為能夠解決沖突，并且會重新提交新的請求。該響應應當包含足夠的信息以便用戶發現沖突的源頭。

沖突通常發生于對 PUT 請求的處理中。例如，在采用版本檢查的環境下，某次 PUT 提交的對特定資源的修改請求所附帶的版本信息與之前的某個（第三方）請求向沖突，那么此時服務器就應該返回一個409錯誤，告知用戶請求無法完成。此時，響應實體中很可能會包含兩個沖突版本之間的差異比較，以便用戶重新提交歸并以后的新版本。

410 Gone

客戶端請求的資源已經不存在。410不同于404，如果資源以前有現在被永久刪除了可使用410代碼，網站設計人員可通過301代碼指定資源的新位置。

411 Length Required

服務器拒絕在沒有定義 Content-Length 頭的情況下接受請求。在添加了表明請求消息體長度的有效 Content-Length 頭之后，客戶端可以再次提交該請求。

412 Precondition Failed

客戶端請求信息的先決條件錯誤，也就是服務器在驗證在請求的頭字段中給出先決條件時，沒能滿足其中的一個或多個。這個狀態碼允許客戶端在獲取資源時在請求的元信息（請求頭字段數據）中設置先決條件，以此避免該請求方法被應用到其希望的內容以外的資源上。

413 Request Entity Too Large

服務器拒絕處理當前請求，因為該請求提交的實體數據大小超過了服務器愿意或者能夠處理的范圍。此種情況下，服務器可以關閉連接以免客戶端繼續發送此請求。

如果這個狀況是臨時的，服務器應當返回一個 Retry-After 的響應頭，以告知客戶端可以在多少時間以后重新嘗試。

414 Request-URI Too Long

請求的URI過長（URI通常為網址），服務器無法處理。

415 Unsupported Media Type

服務器無法處理請求附帶的媒體格式，也就是對于當前請求的方法和所請求的資源，請求中提交的實體并不是服務器中所支持的格式，因此請求被拒絕。

416 Requested Range Not Satisfiable

客戶端請求的范圍無效，也就是如果請求中包含了 Range 請求頭，并且 Range 中指定的任何數據范圍都與當前資源的可用范圍不重合，同時請求中又沒有定義 If-Range 請求頭，那么服務器就應當返回416狀態碼。

417 Expectation Failed

服務器無法滿足Expect的請求頭信息，也就是在請求頭 Expect 中指定的預期內容無法被服務器滿足，或者這個服務器是一個代理服務器，它有明顯的證據證明在當前路由的下一個節點上，Expect 的內容無法被滿足。



5xx 服務器錯誤

這類狀態碼代表了服務器在處理請求的過程中有錯誤或者異常狀態發生，也有可能是服務器意識到以當前的軟硬件資源無法完成對請求的處理。除非這是一個HEAD 請求，否則服務器應當包含一個解釋當前錯誤狀態以及這個狀況是臨時的還是永久的解釋信息實體。瀏覽器應當向用戶展示任何在當前響應中被包含的實體。這些狀態碼適用于任何響應方法。



500 Internal Server Error

服務器內部錯誤，無法完成請求。服務器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。一般來說，這個問題都會在服務器端的源代碼出現錯誤時出現。

501 Not Implemented

服務器不支持當前請求所需要的某個功能。當服務器無法識別請求的方法，并且無法支持其對任何資源的請求。

502 Bad Gateway

作為網關或者代理工作的服務器嘗試執行請求時，從遠程服務器接收到了一個無效的響應。

503 Service Unavailable

由于臨時的服務器維護或者過載，服務器當前無法處理請求。這個狀況是臨時的，并且將在一段時間以后恢復。如果能夠預計延遲時間，那么響應中可以包含一個 Retry-After 頭用以標明這個延遲時間。如果沒有給出這個 Retry-After 信息，那么客戶端應當以處理500響應的方式處理它。

注意：503狀態碼的存在并不意味著服務器在過載的時候必須使用它。某些服務器只不過是希望拒絕客戶端的連接。

504 Gateway Timeout

作為網關或者代理工作的服務器嘗試執行請求時，未能及時從上游服務器（URI標識出的服務器，例如HTTP、FTP、LDAP）或者輔助服務器（例如DNS）收到響應。

505 HTTP Version Not Supported

服務器不支持，或者拒絕支持在請求中使用的 HTTP 版本。這暗示著服務器不能或不愿使用與客戶端相同的版本。響應中應當包含一個描述了為何版本不被支持以及服務器支持哪些協議的實體。



感謝觀看！

參考資料：

https://www.runoob.com/http/http-status-codes.html

若想了解更多請參考：

HTTP狀態碼百度百科

https://blog.csdn.net/GarfieldEr007/article/details/77984065

HTML基礎知識

第一篇，HTML的結構

HTML中兩個概念

(1).HTML標簽：<元素名稱></元素名稱>

  完整語法：<元素名稱>要控制的元素</元素名稱>

HTML標簽分為兩種： 成對：只對標簽內的元素起作用

                                    單獨：在相應位置插入換行

標簽屬性設置在元素的首標簽：語法：<元素 屬性1=“值1” …>元素資料</元素>,""可省略

HTML元素： 一組標簽將一段文字包含在中間，這一組標簽與文字就是元素

結構

在所有的HTML文件中最外層由標簽建立，并包含兩個子標簽：元素為文件標題 ：元素為文件主題



：說明文件標題和文件的一些公共屬性 ：文件主體

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>HTML結構</title>

</head>

<body>

Hellow Word！

</body>

</html>

盒子模型與背景屬性

一.盒子模型

1.介紹

2. 元素的總寬度和總高度
   
   二.自定義邊框——border
   
   1.基本設置
   
   2.邊框寬度——Border Width
   
   3.邊框顏色——Border Color
   
   4.邊框樣式——Border style
   
   5.CSS的邊寬和高度——width height
   
   三.背景——background
   
   1.背景顏色——background color
   
   2.背景圖像—— background image
   
   3.背景重復—— background repeat
   
   4.背景的附件（固定與滾動）——background attachment
   
   一.盒子模型
   
   1.介紹
   
   所有HTML元素都可以視為方框。
   
   CSS邊框模型代表網站的設計和布局。
   
   它由邊緣（margins），邊框（ borders），內邊距（paddings），和內容（content）組成的。
   
   這些屬性以什么的順序工作：top->right->bottom->left。
   
   
   
   
   
   小知識：
   
   
   
   網頁的每個元素都是一個盒子（box）。 CSS使用盒子模型來確定盒子有多大以及如何放置它們。
   
   框模型還用于計算HTML元素的實際寬度和高度。
   
3. 元素的總寬度和總高度
   
   （1）總寬度等于左右邊緣，邊框，邊距相加：
   
   
   
   
   
   
   
   （2）總高度：上下相加
   
   
   
   
   
   二.自定義邊框——border
   
   1.基本設置
   
   border屬性允許您自定義HTML元素的邊框。
   
   為了向元素添加邊框，您需要指定邊框的大小，樣式，顏色。
   
   p {
   
      padding: 10px;    
   
      border: 5px solid green;
   
   }
   
   
   
   2.邊框寬度——Border Width
   
   使用border-width屬性可以 單獨設置邊框寬度
   
   
   
   p{
   
      padding: 10px;    
   
      border-style: solid;
   
      border-width: 2px;
   
   }
   
   
   
   3.邊框顏色——Border Color
   
   可以使用顏色名稱，RGB或十六進制值定義元素的邊框顏色。
   
   
   
   p.first {
   
      padding: 10px;
   
      border-style: solid;
   
      border-width: 2px;
   
      border-color: blue;
   
   }
   
   
   
   小知識：除非設置border-style屬性，否則所有border屬性都不會起作用。
   
   
   
   4.邊框樣式——Border style
   
   默認值為none
   
   多種樣式：dotted（點）, dashed（虛線）, double（雙邊框）等。
   
   p {border-style: none;}
   
   p {border-style: dotted;}
   
   p{border-style: dashed;}
   
   p{border-style: double;}
   
   p {border-style: groove;}
   
   p {border-style: ridge;}
   
   p{border-style: inset;}
   
   p{border-style: outset;}
   
   p {border-style: hidden;}
   
   
   
   
   
   
   
   5.CSS的邊寬和高度——width height
   
   要設置<div>元素的總寬度和高度為100px：
   
   div {
   
      border: 5px solid green;    
   
      width: 90px;
   
      height: 90px;
   
   }
   
   
   
   框的總寬度和高度將為90px + 5px（邊框）+ 5px（邊框）= 100px；
   
   
   
   可以使用百分比 進行分配。
   
   div {
   
      border: 5px solid green;    
   
      width: 100%;
   
      height: 90px;
   
   }
   
   
   
   3.要設置元素的最小和最大高度與寬度，可以使用以下屬性：
   
   
   
   min-width-元素的最小寬度
   
   min-height-元素的最小高度
   
   max-width-元素的最大寬度
   
   max-height-元素的最大高度
   
   p{
   
      border: 5px solid green;    
   
      min-height: 100px;       
   
   }
   
   
   
   三.背景——background
   
   1.背景顏色——background color
   
   background-color屬性用來指定一個元素的背景色。
   
   
   
   列：
   
   
   
   body {
   
      background-color: #C0C0C0;
   
   }
   
   h1 {
   
      background-color: rgb(135,206,235);
   
   }
   
   p {
   
      background-color: LightGreen;
   
   }
   
   
   
   2.背景圖像—— background image
   
   background-image屬性中的元素可以設置一個或幾個背景圖像。
   
   URL指定路徑的圖像文件。相對路徑和絕對路徑均受支持。
   
   默認情況下，背景圖像放置在元素的左上角，并在垂直和水平方向重復以覆蓋整個元素。
   
   列;為<p>元素設置背景圖片。
   
   
   
   p {
   
      padding: 30px;
   
      background-image: url("1.jpg");
   
      color: white;   
   
   }
   
   
   
   小知識
   
   
   
   要指定多個圖像，只需用逗號分隔URL。
   
   
   
   3.背景重復—— background repeat
   
   repeat-x：圖片延x軸復制
   
   repeat-y：圖片延y軸復制
   
   Inherited：繼承父級屬性相同的指定值
   
   no-repeat:不重復，只有單個圖片
   
   列：
   
   
   
   body {
   
      background-image: url("1.png");
   
      background-repeat: repeat-x;
   
   }
   
   p {
   
      background-image: url("1.png");
   
      background-repeat: inherit;
   
      margin-top: 100px;
   
      padding: 40px;
   
   }
   
   
   
   4.背景的附件（固定與滾動）——background attachment
   
   有效值
   
   
   
   fixed：固定背景圖片
   
   scroll：向下滾動頁面是，背景也隨著滾動
   
   Inherit：繼承
   
   列：
   
   
   
   body {
   
      background-image: url("1.png");
   
      background-repeat: no-repeat;
   
      background-attachment: scroll;
   
   }
   
   
   

在Swift開發文檔中是這樣介紹閉包的：閉包是可以在你的代碼中被傳遞和引用的功能性獨立模塊。

Swift閉包

閉包的形式

Swift中的閉包有很多優化的地方

創建基本的閉包

在閉包中接收參數

從閉包中返回值

閉包作為參數

尾隨閉包語法

值捕獲

逃逸閉包

閉包的形式

全局函數 嵌套函數 閉包表達式

有名字但不能捕獲任何值。 有名字，也能捕獲封閉函數內的值。 無名閉包，使用輕量級語法，可以根據上下文環境捕獲值。

Swift中的閉包有很多優化的地方

根據上下文推斷參數和返回值類型



從單行表達式閉包中隱式返回（也就是閉包體只有一行代碼，可以省略return）



可以使用簡化參數名，如$0, $1(從0開始，表示第i個參數…)



提供了尾隨閉包語法(Trailing closure syntax)



閉包是引用類型：無論你將函數或閉包賦值給一個常量還是變量，你實際上都是將常量或變量的值設置為對應函數或閉包的引用



創建基本的閉包

let bibao = {

  print("我要創建閉包")

}



上面的代碼實際上創建了一個匿名的函數，并將這個函數賦給了 driving。之后你就可以把 driving() 當作一個常規的函數來用，就像這樣：



bibao()



在閉包中接收參數

當你創建閉包的時候，它們并沒有名字，也沒有提供書寫參數的地方。但這并不意味著它們不能接收參數，只不過它們接收參數的方式稍有不同：這些參數是被寫在 花括號里面的。



為了讓一個閉包接收參數，你需要在花括號之后把這些參數列出來，然后跟上一個 in 關鍵字。這樣就告訴Swift，閉包的主體是從哪里開始的。



舉個例子，我們來創建一個閉包，接收一個叫 place 的字符串作為唯一的參數，就像這樣：



let bibao= { (bao1: String) in

  print("我要創建 (bao1)。")

}



函數和閉包的一個區別是運行閉包的時候你不會用到參數標簽。因此，調用 driving() 的時候，我們是這樣寫的：



bibao("閉包")



從閉包中返回值

閉包也能返回值，寫法和閉包的參數類似：寫在閉包內部， in 關鍵字前面。



還是以 driving() 閉包為例， 讓它返回一個字符串。原來的函數是這樣的：



let bibao= { (bao1: String) in

  print("我要創建  (bao1)。")

}



改成返回字符串而不是直接打印那個字符串，需要 in 之前添加 -> String，然后像常規函數那樣用到 return 關鍵字:



let drivingWithReturn = { (bao1: String) -> String in

  return "我要創建 (bao1)。"

}



現在我們運行這個閉包并且打印出它的返回值：



let message = drivingWithReturn("閉包")

print(message)



閉包作為參數

既然閉包可以像字符串和整數一樣使用，你就可以將它們傳入函數。閉包作為參數的語法乍一看一看挺傷腦筋的，讓我們慢慢來。



首先，還是基本的 driving() 閉包。



let driving = {

  print("我正在創建")

}



如果我們打算把這個閉包傳入一個函數，以便函數內部可以運行這個閉包。我們需要把函數的參數類型指定為 () -> Void。 它的意思是“不接收參數，并且返回 Void”。在Swift中，Void是什么也沒有的意思。



好了，讓我們來寫一個 travel() 函數，接收不同類型的 traveling 動作， 并且在動作前后分別打印信息：



func travel(action: () -> Void) {

  print("我準備創建")

  action()

  print("我建好了")

}



現在可以用上 driving 閉包了，就像這樣：



travel(action: driving)

1

尾隨閉包語法

如果一個函數的最后一個參數是閉包，Swift允許你采用一種被稱為 “拖尾閉包語法” 的方式來調用這個閉包。你可以把閉包傳入函數之后的花括號里，而不必像傳入參數那樣。



又用到我們的 travel() 函數了。它接收一個 action 閉包。閉包在兩個 print() 調用之間執行:



func travel(action: () -> Void) {

  print("我準備創建")

  action()

  print("我建好了")

}



由于函數的最后一個參數是閉包，我們可以用拖尾閉包語法來調用 travel() 函數，就像這樣：



travel() {

  print("我要創建閉包")

}



實際上，由于函數沒有別的參數了，我們還可以將圓括號完全移除：



travel {

  print("我要創建閉包")

}



拖尾閉包語法在Swift中非常常見，所以要加深印象。



值捕獲

閉包可以在其被定義的上下文中捕獲常量或變量。即使定義這些常量和變量的原作用域已經不存在，閉包仍然可以在閉包函數體內引用和修改這些值。

Swift 中，可以捕獲值的閉包的最簡單形式是嵌套函數，也就是定義在其他函數的函數體內的函數。嵌套函數可以捕獲其外部函數所有的參數以及定義的常量和變量。

官方文檔例子：



 func makeIncrementer(forIncrement amount: Int) -> () -> Int {

     var runningTotal = 0

     func incrementer() -> Int {

         runningTotal += amount

        return runningTotal

     }

     return incrementer

 }

 //運行結果：

 let one = makeIncrementer(forIncrement: 10)

print(one())  //10

print(one())  //20



let two = makeIncrementer(forIncrement: 10)

print(two())  //10

print(two())  //20



逃逸閉包

當一個閉包作為參數傳到一個函數中，但是這個閉包在函數返回之后才被執行，我們稱該閉包從函數中逃逸。當你定義接受閉包作為參數的函數時，你可以在參數名之前標注 @escaping，用來指明這個閉包是允許“逃逸”出這個函數的。（默認值：@noescaping）

官方文檔例子：



var completionHandlers: [() -> Void] = []

func someFunctionWithEscapingClosure(completionHandler: @escaping () -> Void) {

    completionHandlers.append(completionHandler)

}



如上面例子，加入標注@escaping即可表明這個閉包是允許逃逸的



以上就是我對Swift閉包的淺薄認知，如果有細節錯誤請指出，也可以查閱官方文檔，鏈接在下面教程更為詳細。

就是這樣啦，愛你們么么么~~

在我們寫頁面時，

瀏覽器緩存問題

有時會發現自己寫的css樣式無法生效，導致這種現象的原因有很多，下面列舉一些常見的原因希望可以幫到你，歡迎評論區補充。

如果你反復檢查認為代碼沒有問題，那么可能是瀏覽器緩存的問題。在排查前先試一下清除瀏覽器緩存，重啟瀏覽器或者換個瀏覽器等手段，無效后再進行進一步排查。有可能自己什么都沒有做錯，就是因為緩存或者瀏覽器的問題導致，重置一下也許問題就解決了。
瀏覽器的‘F12’元素審核，看看哪些樣式沒有應用上。

細節問題

寫錯屬性名致使無法與html匹配，或屬性值不符合規范；



html標簽沒寫完整，漏了“<”或者”>”等；



，；｛｝看看這些符號是不是不小心使用了中文或者全角符號；



<span>設CSS樣式不起作用:例如：要定義span居中，必須先讓span成塊級元素顯示，也就是說，要先定義span的display:block;屬性，然后再給span添加邊距屬性margin:0px auto;



css樣式中間沒有加分號；

為什么css樣式里有時候使用分號隔開有時候是用空格呢？

對同一個屬性進行設置時是用空格隔開，比如border:1px solid red; 對不同的屬性進行設置時是用分號隔開，比如width:300px;height:300px;

樣式表關聯問題

如果你的樣式完全不生效，首先確認關聯了樣式表沒有，或者關聯的樣式位置、名字是否正確；

<link rel="stylesheet" type="text/css" href="mycss.css"/>

看看自定義的CSS樣式引入標簽是否放在bootstrap框架樣式引用之后，確保不會被在加載頁面時被框架的樣式覆蓋。

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="mycss.csvs"/>

選擇器問題

后代子代選擇等，涉及多個標簽，類名、id等，子選擇器的順序、名字等寫錯了，均可能導致出錯；

html里的標簽忘記寫類名、id了，而選擇器用了這些漏寫的類名、id等，樣式自然不會生效。

后代選擇器忘了寫空格；

看看是不是有多余的空格比如： div.box{} 這類選擇器會不會寫成了 div .box{}；

編碼格式問題

把CSS、HTML網頁文件都統一保存為UTF-8格式；即在頭標簽中添加<meta charset="UTF-8">

因為 一般網頁里采用UTF-8的編碼格式，而外部的CSS文件默認的是ANSI的編碼格式，一般情況下是不會有問題。然而當CSS文件中包含中文注釋，就可能會出現問題。

樣式層疊問題

Vue中如何監控某個屬性值的變化？

比如現在需要監控data中，obj.a 的變化。Vue中監控對象屬性的變化你可以這樣：



watch: {

      obj: {

      handler (newValue, oldValue) {

        console.log('obj changed')

      },

      deep: true

    }

  }



deep屬性表示深層遍歷，但是這么寫會監控obj的所有屬性變化，并不是我們想要的效果，所以做點修改：



watch: {

   'obj.a': {

      handler (newName, oldName) {

        console.log('obj.a changed')

      }

   }

  }



還有一種方法，可以通過computed 來實現，只需要：



computed: {

    a1 () {

      return this.obj.a

    }

}



利用計算屬性的特性來實現，當依賴改變時，便會重新計算一個新值。

HTML基礎知識

1. HTML的歷史：HTML，XHTML
2. HTML的全局屬性：全局標準屬性，全局事件屬性

3. HTML的元素：

4. 

5. 

4. 標記語言，是一種將文本以及與文本相關的其他信息結合起來，展現出關于文檔結構和數據處理細節的電腦文字編碼。
5. HTML，為超文本標記語言。
6. XHTML是可擴展超文本標記語言，是一種更純潔，更嚴格，更規范的html代碼。
7. html文件由文件頭和文件體兩部分組成。

8. 標簽的分類：雙標簽，單標簽。

HTML的全局標準屬性
在HTML中，規定了8個全局標準屬性。

class用于定義元素的類名。
id用于指定元素的唯一id。
style用于指定元素的行內樣式。
title用于指定元素的額外信息。
accesskey用于指定激活某個元素的快捷鍵。
支持accesskey屬性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

tabindex用于指定元素在tab鍵下的次序。
支持tabindex屬性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

dir用于指定元素中內容的文本方向。
dir的屬性值只有ltr和rtl兩種，分別是left to right和right to left。

lang用于指定元素內容的語言。
HTML的全局事件屬性
Window窗口事件
onload，在頁面加載結束后觸發。
onunload，在用戶從頁面離開時觸發，如單擊跳轉，頁面重載，關閉瀏覽器窗口等。
Form表單事件
onblur，當元素失去焦點時觸發。
onchange，在元素的元素值被改變時觸發。
onfocus，在元素獲得焦點時觸發。
onreset，當表單中的重載按鈕被點擊時觸發。
onselect，在元素中文本被選中后觸發。
onsubmit，在提交表單時觸發。
Keyboard鍵盤事件
onkeydown，在用戶按下按鍵時觸發。
onkeypress，在用戶按下按鍵后，按著按鍵時觸發。
該屬性不會對所有按鍵生效，不生效按鍵如：alt，ctrl，shift，esc。

onkeyup，當用戶釋放按鍵時觸發。
Mouse鼠標事件
onclick，當在元素上單擊鼠標時觸發。
onblclick，當在元素上雙擊鼠標時觸發。
onmousedown，當在元素上按下鼠標按鈕時觸發。
onmousemove，當鼠標指針移動到元素上時觸發。
onmouseout，當鼠標指針移出元素時觸發。
onmouseover，當鼠標指針移動到元素上時觸發。
onmouseup，當在元素上釋放鼠標按鈕時觸發。
Media媒體事件
onabort，當退出媒體播放器時觸發。
onwaiting，當媒體已停止播放但打算繼續播放時觸發。
HTML元素

1. <!DOCTYPE>，聲明文檔類型。
2. <html>，HTML元素真正的根元素。
3. <head>，定義html文檔的文檔頭。

head中包含的元素

title，定義HTML文檔的標題
base，為頁面上的所有鏈接規定默認地址或者默認目標
link，用于定義文檔與外部資源之間的關系
meta，提供關于HTML的元數據
style，用于為HTML文檔定義樣式信息
script，用于定義客戶端腳本

4. body，定義html文檔的文檔體。
5. content-Type，用于設定網頁的字符集，便于瀏覽器解析與渲染頁面。

cache-control，用于告訴瀏覽器如何緩存某個響應及緩存多長時間。

參數：



no-cache，發送請求，與服務器確認該資源是否被更改，如果沒有，則使用緩存



no-store，允許緩存，每次都要去服務器上下載完整的響應



public，緩存所有響應



private，只為單個用戶緩存



max-age，表示當前請求開始，相應響應在多久內能被緩存和重用，不去服務器重新請求，max-age=60表示響應可以再緩存和重用60秒



<meta http-equiv=cache-control" content="no-cache">

1

expires，用于設定網頁的到期時間，過期后重新到服務器上重新傳輸。

refresh，網頁將在設定的時間內，自動刷新并轉向設定的網址

Set-Cookie，用于設置網頁過期。

無語義元素：<span>,<div>，<span>是內聯標簽，用在一行文本中，<div>是塊級標簽。



div用于存放需要顯示的數據，css用于指定如何顯示數據樣式，做到結構與樣式相互分離。



查看div+css樣式HTML:點擊下方鏈接跳轉，可查看源碼：



div-css.html



格式化元素

普通文本

<b>，定義粗體文本

<big>，定義大號字

<em>，定義著重文字

<i>，定義斜體字

<small>，定義小號字

<strong>，定義加重語氣

<sub>，定義下標字

<sup>，定義上標字

<ins>，定義插入字

<del>，定義刪除字

計算機輸出

<code>，定義計算機代碼

<kbd>，定義鍵盤輸出樣式

<samp>，定義計算機代碼樣本

<tt>，定義打字機輸入樣式

<pre>，定義預格式文本

術語

<abbr>，定義縮寫

<acronym>，定義首字母縮寫

<address>，定義地址

<bdo>，定義文字方向

<blockquote>定義長的引用

<q>，定義短的引用語

<cite>，定義引用，引證

<dfn>，定義一個概念，項目





圖像熱區鏈接

圖像熱區鏈接，是什么呢？當你在看一些購物網頁的時候，一張圖片上，可以在不同的地方鏈接到不同的目標位置，點擊不同的地方可以跳轉到不同的網頁，這也是做商城項目一般要用到的技術。



這個時候不是<a>標簽元素了，而是<area>元素。



<area>元素的屬性有兩個shape，cords屬性。

<area>的坐標系，原點為圖片的左上角,x軸正方向向右，y軸正方向向下

我畫個圖哈，反映<area>的坐標系：

圖像熱區鏈接的使用，<map>標簽定義一個image-map，可以含一個以上的熱區<area>，每個熱區都有獨立的鏈接。

要為<map>標簽賦予name屬性。

將<img>標簽的usemap屬性與<map>標簽的name屬性相關聯。

為了證明我學會了，我寫一個html頁面。

map -> name="image_link"

img -> usemap="#image_link"
1
點擊跳轉：imgmap.html

e-mail鏈接
e-mail鏈接主要是看到有很多官方網頁需要做的一個打開一封新的電子郵件。

點擊下方鏈接即可看到效果：

聯系我們

代碼：

<a href="mailto:xxxxxx@qq.com">聯系我們</a>



列表元素
整合列表html網頁，點擊跳轉：ul-ol.html

無序列表，<ul>定義無序列表，<li>定義列表項。
<ul>的type屬性值：disc點，square方塊，circle圓，none無.

有序列表，<ol>定義有序列表，<li>定義列表項。
<ol>的type屬性值：數字，大寫字母，大寫羅馬數字，小寫字母，小寫羅馬數字。

start屬性定義序號的開始位置。

定義列表<dl>，定義列表內部可以有多個列表項標題，每個列表項標題用<dt>標簽定義，列表項標題內部又可以有多個列表項描述，用<dd>標簽定義。
表格
整合表格html網頁，點擊跳轉：table.html

<table>定義表格
<caption>定義表格標題
<tr>定義若干行
<td>定義若干單元格
<th>定義表頭
表格分頭部，主體，底部：<thead>,<tbody>,<tfoot>三個標簽。

7. <td>的兩個屬性：colspan用于定義單元格跨行，rowspan用于定義單元格跨列
8. <tbody>,<thead>,<tfoot>標簽通常用于對表格內容進行分組。
9. 表單由<form>標簽定義，action屬性定義了表單提交的地址，method屬性定義表單提交的方式。

<input type="text">

<input type="password">

<input type="radio">

<input type="checkbox">

<input type="submit">

<input type="reset">

<input type="button">

<input type="image">

<input type="file">

<input type="hidden"> 

<textarea>元素

<textarea>標簽具有name,cols,rows3個屬性。

1. name用于提交參數
2. value用于輸入文本內容
3. cols和rows分別用于文本框的列數和行數，寬度和高度。

效果：

自我評價：

代碼：

<form action="web" method="post">
 自我評價：<br/>
 <textarea rows="10" cols="50" name="introduce">
 </textarea>
 <br/>
 <input type="submit" id="" name="">
</form>

frameset

1. <frameset>定義一個框架集，用于組織多個窗口，每個框架存有獨立的html文檔
2. <frameset>不能與<body>共同使用，除非有<noframe>元素
3. <frame>用于定義<frameset>中一個特定的窗口?？赵?code style="box-sizing:border-box;outline:0px;margin:0px;padding:2px 4px;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;overflow-wrap:break-word;"><frame/>

：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>frameset</title>
    </head>
    <frameset cols="25%,50%,25%">
        <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
        <frame src="https://juejin.im/user/5e477d7ce51d4526c550a27d" ></frame>
        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
    </frameset>
    <noframes>
        <body>您的瀏覽器無法處理框架，請更換瀏覽器打開</body>
    </noframes>
</html>
1

顯示結果 描述 實體名稱 實體編號
空格 &nbsp; &#160;
< 小于號 &lt; &#60;
> 大于號 &gt; &#62;
& 和號 &amp; &#38;
" 引號 &quot; &#34;
' 撇號 &apos; (IE不支持) &#39;
￠ 分（cent） &cent; &#162;
￡ 鎊（pound） &pound; &#163;
￥ 元（yen） &yen; &#165;
€ 歐元（euro） &euro; &#8364;
§ 小節 &sect; &#167;
© 版權（copyright） &copy; &#169;
® 注冊商標 &reg; &#174;
? 商標 &trade; &#8482;
× 乘號 &times; &#215;
÷ 除號 &divide; &#247;
————————————————
版權聲明：本文為CSDN博主「達達前端」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_36232611/article/details/105109467

網上對于這兩個的區別解釋都是統一口徑的，一個是開發依賴，一個是線上依賴，打包發布需要用到的要添加到線上依賴，一模一樣的回答，誤導了很多人。今天自己測試一下這兩個命令，記錄一下。



–save-dev，會在devDependencies里面添加依賴



-D，會在devDependencies里面添加依賴



–save，會在dependencies里面添加依賴



-S，會在dependencies里面添加依賴



devDependencies和dependencies可以同時存在同一個包的依賴。



如果npm install xxx后面沒有輸入要保存到哪個里面，devDependencies和dependencies都沒有。



我這邊直接npm install jquery，node_modules下有jQuery。然后我刪除node_modules,執行npm install，node_modules下并沒有下載jQuery。



所以，安裝依賴的時候如果沒有加上要依賴到開發還是線上，只是臨時的在node_modules里面幫你下載，而devDependencies和dependencies的依賴都會幫你下載。



然后我在devDependencies下安裝依賴：



"devDependencies": {  

    "html-webpack-plugin": "^4.0.3", 

    "jquery": "^3.4.1",  

    "webpack": "^4.42.1", 

    "webpack-cli": "^3.3.11"

}



在入口文件引用和打印jQuery：



import $ from 'jquery'

console.log($)



打包之后，可以使用jQuery。



然后我在dependencies下安裝依賴：



"dependencies": { 

    "html-webpack-plugin": "^4.0.3", 

    "jquery": "^3.4.1", 

    "webpack": "^4.42.1", 

    "webpack-cli": "^3.3.11"

}



在入口文件引用和打印jQuery：



import $ from 'jquery'

console.log($)



打包之后，可以使用jQuery。



測試的結果就是，無論是–save還是–save-dev，對于打包都沒有任何影響。devDependencies和dependencies兩種情況，打包出來的main.js都把jQuery打包進去。這兩種情況，如果都沒有引用jQuery的情況下，也都不會把jQuery打包。



接著在一個空白的項目里面下載axios,npm install axios -S,打開node_modules文件夾：







發現多出了另外三個依賴，查看axios下的package.json：



"dependencies": {



    "follow-redirects": "1.5.10"



}



查看follow-redirects下的package.json：



"dependencies": {



    "debug": "=3.1.0"



}



查看debugs下的package.json：



"dependencies": {



    "ms": "2.0.0"



}



最后ms的package.json沒有dependencies。



而這幾個包的devDependencies依賴的包沒有一個下載。



接著我在node_modules把follow-redirects、debugs、ms都刪了，把axios里面的package.js的dependencies給刪了，然后執行npm install,發現沒有下載follow-redirects、debugs、ms這幾個，也證明了如果node_modules里面有下載的包，是不會重新去下載的。我把node_modules刪除，執行npm install，這幾個包又都下載下來了。



最后得出 的結論是，–save-dev和–save在平時開發的時候，對于打包部署上線是沒有任何影響的。如果你是發布一個包給別人用，而你開發的包依賴第三方的包，那么你如果是–save，那么別人安裝你開發的包，會默認下載你依賴的包，如果你是–save-dev，那么別人安裝你開發的包，是不會默認幫忙下載你依賴的包。



其實發布的包如果沒有必要，很少會默認幫你下載，比如bootstrap，依賴jQuery，怕你原本就下載了引起沖突，也不會在dependencies里面安裝jQuery而是：



"peerDependencies": {



    "jquery": "1.9.1 - 3",



    "popper.js": "^1.16.0"



}



表示bootstrap依賴于這兩個包，你必須安裝，版本不固定，但是一定要安裝這兩個包，安裝的時候會有警告：



peerDependencies WARNING bootstrap@ requires a peer of jquery@1.9.1 - 3 but none was installed



peerDependencies WARNING bootstrap@ requires a peer of popper.js@^1.16.0 but none was installed



當你引用了然后打包，報錯：



ERROR in ./node_modules/_bootstrap@4.4.1@bootstrap/dist/js/bootstrap.js



Module not found: Error: Can't resolve 'jquery' in 'C:\Users\wade\Desktop\savedev\node_modules_bootstrap@4.4.1@bootstrap\dist\js'



 @ ./node_modules/_bootstrap@4.4.1@bootstrap/dist/js/bootstrap.js 7:82-99



 @ ./src/index.js



 



ERROR in ./node_modules/_bootstrap@4.4.1@bootstrap/dist/js/bootstrap.js



Module not found: Error: Can't resolve 'popper.js' in 'C:\Users\wade\Desktop\savedev\node_modules_bootstrap@4.4.1@bootstrap\dist\js'



 @ ./node_modules/_bootstrap@4.4.1@bootstrap/dist/js/bootstrap.js 7:101-121



 @ ./src/index.js



以上就是對–save和–save-dev的一些測試，想更快的得出結論其實是自己發布一個包。至于本人的答案是不是存在錯誤，歡迎指出，因為只是自己簡單測試的結果。

本文講述，在使用VUE的移動端實現類似于iPhone的懸浮窗的效果。

相關知識點

touchstart 當在屏幕上按下手指時觸發

touchmove 當在屏幕上移動手指時觸發

touchend 當在屏幕上抬起手指時觸發
mousedown mousemove mouseup對應的是PC端的事件

touchcancel 當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的touch操作，即觸發touchcancel。一般會在touchcancel時暫停游戲、存檔等操作。

效果圖

實現步驟

1.html

總結了一下評論，好像發現大家都碰到了滑動的問題。就在這里提醒一下吧?？蓪⒃搼腋?DIV 同你的 scroller web 同級。 —- (log: 2018-08-21)

html結構： <template> <div>你的web頁面</div> <div>懸浮DIV</div> </template>

<template>
 <div id="webId">
 ...
 <div>你的web頁面</div>
 <!-- 如果碰到滑動問題，1.1 請檢查這里是否屬于同一點。 -->
 <!-- 懸浮的HTML -->
 <div v-if="!isShow" class="xuanfu" id="moveDiv"
  @mousedown="down" @touchstart="down"
  @mousemove="move" @touchmove="move"
  @mouseup="end" @touchend="end"
 >
  <div class="yuanqiu">
  {{pageInfo.totalPage}}
  </div>
 </div>
 ...
 </div>
</template>

2.JS

<script>
data() {
 return {
 flags: false,
 position: { x: 0, y: 0 },
 nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
 }
}

methods: {
 // 實現移動端拖拽
 down(){
 this.flags = true;
 var touch;
 if(event.touches){
  touch = event.touches[0];
 }else {
  touch = event;
 }
 this.position.x = touch.clientX;
 this.position.y = touch.clientY;
 this.dx = moveDiv.offsetLeft;
 this.dy = moveDiv.offsetTop;
 },
 move(){
 if(this.flags){
  var touch ;
  if(event.touches){
   touch = event.touches[0];
  }else {
   touch = event;
  }
  this.nx = touch.clientX - this.position.x;
  this.ny = touch.clientY - this.position.y;
  this.xPum = this.dx+this.nx;
  this.yPum = this.dy+this.ny;
  moveDiv.style.left = this.xPum+"px";
  moveDiv.style.top = this.yPum +"px";
  //阻止頁面的滑動默認事件；如果碰到滑動問題，1.2 請注意是否獲取到 touchmove
  document.addEventListener("touchmove",function(){
   event.preventDefault();
  },false);
 }
 },
//鼠標釋放時候的函數
 end(){
 this.flags = false;
 },
}
</script>

3.CSS

<style>
 .xuanfu {
 height: 4.5rem;
 width: 4.5rem;
 /* 如果碰到滑動問題，1.3 請檢查 z-index。z-index需比web大一級*/
 z-index: 999;
 position: fixed;
 top: 4.2rem;
 right: 3.2rem;
 border-radius: 0.8rem;
 background-color: rgba(0, 0, 0, 0.55);
 }
 .yuanqiu {
 height: 2.7rem;
 width: 2.7rem;
 border: 0.3rem solid rgba(140, 136, 136, 0.5);
 margin: 0.65rem auto;
 color: #000000;
 font-size: 1.6rem;
 line-height: 2.7rem;
 text-align: center;
 border-radius: 100%;
 background-color: #ffffff;
 }
</style>

實現好JS邏輯，基本上，問題不大。

本文鏈接 http://www.luyixian.cn/javascript_show_166242.aspx

再加一點

css之display:inline-block布局

1.解釋一下display的幾個常用的屬性值，inline ， block， inline-block

• inline（行內元素）:
  1. 使元素變成行內元素，擁有行內元素的特性，即可以與其他行內元素共享一行，不會獨占一行. 
  2. 不能更改元素的height，width的值，大小由內容撐開. 
  3. 可以使用padding上下左右都有效，margin只有left和right產生邊距效果，但是top和bottom就不行.
• block（塊級元素）:
  1. 使元素變成塊級元素，獨占一行，在不設置自己的寬度的情況下，塊級元素會默認填滿父級元素的寬度. 
  2. 能夠改變元素的height，width的值. 
  3. 可以設置padding，margin的各個屬性值，top，left，bottom，right都能夠產生邊距效果.
•  inline-block（融合行內于塊級）:
  1. 結合了inline與block的一些特點，結合了上述inline的第1個特點和block的第2,3個特點.
  2. 用通俗的話講，就是不獨占一行的塊級元素。如圖:

圖一:

圖二：

兩個圖可以看出，display：inline-block后塊級元素能夠在同一行顯示，有人這說不就像浮動一樣嗎。沒錯，display：inline-block的效果幾乎和浮動一樣，但也有不同，接下來講一下inline-block和浮動的比較。

2.inline-block布局 vs 浮動布局

    a.不同之處：對元素設置display：inline-block ，元素不會脫離文本流，而float就會使得元素脫離文本流，且還有父元素高度坍塌的效果

    b.相同之處：能在某程度上達到一樣的效果

我們先來看看這兩種布局：
圖一：display：inline-block

圖二：

對兩個孩子使用float：left，我在上一篇浮動布局講過，這是父元素會高度坍塌，所以要閉合浮動，對box使用overflow：hidden，效果如下：

>>乍一看兩個都能做到幾乎相同的效果，（仔細看看display：inline-block中有間隙問題，這個留到下面再講）

c.浮動布局不太好的地方：參差不齊的現象，我們看一個效果：
圖三：

圖四：

>>從圖3,4可以看出浮動的局限性在于，若要元素排滿一行，換行后還要整齊排列，就要子元素的高度一致才行，不然就會出現圖三的效果，而inline-block就不會。

3.inline-block存在的小問題：

a.上面可以看到用了display:inline-block后，存在間隙問題，間隙為4像素，這個問題產生的原因是換行引起的，因為我們寫標簽時通常會在標簽結束符后順手打個回車，而回車會產生回車符，回車符相當于空白符，通常情況下，多個連續的空白符會合并成一個空白符，而產生“空白間隙”的真正原因就是這個讓我們并不怎么注意的空白符。

b.去除空隙的方法：
1.對父元素添加，{font-size:0}，即將字體大小設為0，那么那個空白符也變成0px，從而消除空隙
現在這種方法已經可以兼容各種瀏覽器，以前chrome瀏覽器是不兼容的
圖一：

c.瀏覽器兼容性：ie6/7是不兼容 display：inline-block的所以要額外處理一下：
在ie6/7下：
對于行內元素直接使用{dislplay:inline-block;}
對于塊級元素：需添加{display:inline;zoom:1;}

4.總結:

display：inline-block的布局方式和浮動的布局方式，究竟使用哪個，我覺得應該根據實際情況來決定的：
a.對于橫向排列東西來說，我更傾向與使用inline-block來布局，因為這樣清晰，也不用再像浮動那樣清除浮動，害怕布局混亂等等。
b.對于浮動布局就用于需要文字環繞的時候，畢竟這才是浮動真正的用武之地，水平排列的是就交給inline-block了。

Node 的os模塊是操作系統的

Node 的內置模塊 fs

內置模塊在下載node的時候就自帶的，使用 require（）方法來導入

語法 ：require(‘模塊fs’)



在內置模塊中的方法

1 fs.readFile（） —》用來專門 異步 讀取文件的方法 三個參數

語法 ：fs.readFile(‘要讀取的文件’，讀取文件的格式，讀取成功的回調函數)

Eg : fs.readFIle(‘a’,’utf8’,’function(err,data){ })



2 fs.readFileSync()-– 專門用來 同步 讀取的方法， 兩個參數

語法： fs.readFileSync(‘要讀取的文件’，讀取格式)



3 fs.writeFIle() —>用來寫入 異步 文件的方法 三個參數

語法： fs.writeFile(‘寫入到哪個文件’，寫入的內容，成功的回調函數)

Eg: fs.writeFile(‘./text.tex’,”內容”， function(){ })

注意：再次寫入的內容會完全覆蓋 。如果文件夾沒有 會自動創建一個文件夾



4 fs.writeFileSync() --> 同步寫入的方法

語法： fs.writeFileSync(‘寫入到文件’，“寫入的內容”)



Node的http模塊

這個模塊專門用來創建服務的

只能支持http協議。

也是使用require（）方法

Const http= require(“http”)



方法

1 http.createServer(function(req,res){ }) 兩個形參

Req=request 代表每次的請求信息

Res=response 代表每次請求的響應

返回值是一個服務，當服務監聽端口號的時候，就變成了服務器。

2 監聽端口號

創建的服務.listen(監聽的端口號，監聽成功的回調函數（選填）)

server.listen(8080,function(){ 端口號0-65535 建議0-1023不使用 })

此時瀏覽器就可以執行localhost進行訪問了



自定義模塊

每一個js文件都是一個獨立的模塊，他們都自帶一個 module 是一個對象，

其中 module里面的 exports,是一個對象 這個 module.exports 就是這個文件向外導出的內容，也就是說，只有導出，才能導入



Eg: function fn1（）{console.log() }

Module.exports.fn1=fn1

這樣，才能是另一個js文件到入這個文件 同樣也是require(‘./js’)方法