、網頁

1.網站是網頁的集合，網頁是構成網站的基本元素，是由圖片、鏈接、文字、聲音、視頻等元素組成的HTML格式文件。

2.HTML是超文本標記語言(Hyper Text Markup Language),是用來描述網頁的一種標記語言，而不是編程語言。超文本是指可以加入圖片、聲音、動畫、多媒體等，超越了文本限制；也可以從一個文件跳轉到另一個文件，是超級鏈接文本。

3.網頁的生成：前端人員編寫HTML文件，通過瀏覽器打開就能看到網頁。

二、瀏覽器(網頁顯示，運行的平臺)

1.常用瀏覽器

IE、Firefox 、Chrome 、Safari 、Opera

2.瀏覽器內核(渲染引擎)

讀取網頁內容，整理訊息，計算網頁顯示方式并顯示頁面

三、Web標準

1.Web標準：由W3C組織和其他標準化組織制定的一系列標準的集合。(W3C是萬維網聯盟)

2.Web標準的構成

(1) 結構(Structure)：對網頁元素進行整理分類(HTML)

(2) 表現(Presentation)：設置網頁元素的版式、顏色、大小等外觀樣式(CSS)

(3) 行為(Behavior)：網頁模型的定義及交互的編寫(JavaScript)

3.為什么需要Web標準？

(1) 瀏覽器不同，顯示頁面或排版有所差異

(2) 寫出的頁面更標準，更統一

(3) 內容能被廣泛設備訪問，更容易被搜索引擎搜索

(4) 降低網站流量費用，使網站更易于維護

(5) 提高頁面瀏覽速度

# 網頁文本禁止復制粘貼？一分鐘學會8種方法輕松突破限制

段子手168

方法一：代碼破解法

打開你需要復制內容的網頁，在瀏覽器地址欄輸入“javascript：void($={});”這串代碼，

然后按下回車鍵，這時候就允許你復制文本了。

方法 二：打印網頁法

我們還可以利用打印網頁的時候，在預覽頁面將文本復制下來。按下快捷鍵【Ctrl+P】，

將會進入打印界面，直接在右側的預覽界面，選中文本進行復制。

方法三：后臺控制端

打開網頁后，按下功能鍵【F12】，進入網頁后臺找到【Console】，

在下面輸入這串符號“$=0”，再2按下回車鍵，

網頁文字就能自由復制了。

方法四：查看源代碼

你還可以在網頁空白處，右擊選擇【查看頁面源代碼】，然后一直向下滑動，找到密密麻麻的文本，

選中直接復制提取出來。

方法五：保存本地網頁

打開網頁鼠標右擊，選擇【網頁另存為】，然后在彈出的窗口中，

將保存類型改為【網頁，僅HTML】，接著點擊【保存】。

關閉當前網頁，回到桌面找到剛剛保存的本地網頁文件，雙擊打開后，就可以隨意復制啦。

方法六：截圖識別文字

此外，我們還可以利用OCR文字識別技術，將網頁文字識別出來。

需要借助掌上識別王工具，找到【文字識別】-【快速截圖識別】功能。

方法七：

網址最前面加上 read: （用 Microsoft Edge 瀏覽器打開）

方法八：

1）按 F12 打開調試框，點擊右上角【設置】。

2）往下拉，找到 【Debugger】

3）勾選 【Disable JavaScript】

4）返回頁面，按 F5 刷新一下頁面，這樣網頁文字就可以復制了。

eb網站css，js更新后客戶瀏覽器緩存問題，需要刷新才能正常展示的解決辦法

前端開發中會遇到的問題，我們更新已上線的項目，用戶的瀏覽器顯示的卻是舊版的頁面，沒有及時獲取到我們更新的資源，這是什么原因造成的？此時，如果用戶刷新一下頁面，就得到更新后的資源，又是為什么？

答案是瀏覽器緩存

瀏覽器緩存是前端優化的一個重要問題，緩存可以帶來很多好處：

（1）減少冗余的數據傳輸，節省帶寬；

（2）減輕服務器的請求負擔，有緩存就可以少向服務器發送請求，尤其是對于一些訪問量大的網站這點還是很重要的；

（3）資源從緩存中讀取，無需向服務器發送請求再等待返回，加快了客戶端的訪問速度。

但是緩存同樣給前端帶來了一個很嚴重的問題，就是上面所說的項目更新的問題。如果項目更新了，但是用戶訪問時瀏覽器讀取的是緩存資源，那么用戶就獲取不到最新的頁面，影響用戶使用。

接下來就從瀏覽器緩存開始分析出現項目更新問題的原因，并給出相應的解決方法。

瀏覽器緩存主要指http緩存，其機制是根據http報文的緩存標識進行相應操作。

一、http狀態碼

在討論瀏覽器緩存之前，我們先看看網頁相關的http狀態碼，打開控制臺，在Network下捕捉請求，注意Status和Size欄，會看到200 from disk cache，200數值大小。

刷新頁面，會看到，304 數值大小，200 from memory cache。

這幾個有什么不同呢？200和304是常見的兩個http狀態碼，200表示文件發生改動，304表示文件未改動，都是服務器返回告知的。在上面兩張圖中，我們注意到，有些200是灰色的，灰色的200表示沒有向服務器發送請求，而是直接從緩存中讀取。從緩存中讀取又分為從內存（from memory cache）中讀取還是從磁盤中讀?。╢rom disk cache）。

總結一張表。

瀏覽器有三級緩存原理

1、先查找內存，如果內存中存在，從內存中加載；

2、如果內存中未查找到，選擇硬盤獲取，如果硬盤中有，從硬盤中加載；

3、如果硬盤中未查找到，那就進行網絡請求，加載到的資源緩存到硬盤和內存；

結合我們的問題，假設某個用戶打開過我們的頁面，然后我們更新了文件，用戶再去訪問，資源加載情況是200 from disk cache，瀏覽器根本沒有請求服務器，所以拿不到新的資源文件。那么，有沒有辦法解決這種情況？瀏覽器緩存機制是什么樣的？

二、瀏覽器緩存

瀏覽器緩存分兩種：強制緩存和協商緩存（對比緩存）

1、強制緩存

強制緩存就是，用戶第一次訪問頁面之后，瀏覽器將數據存在緩存中，在過期時間之內，都不會再請求服務器。是否使用強制緩存在于資源是否過期，該過期時間從第一次請求的服務器響應頭中獲取。如果在過期時間內，從緩存中讀取，如果超出過期時間，則使用協商緩存（下面會講）。

控制強制緩存的字段分別是Expires和Cache-Control，其中Cache-Control優先級比Expires高。

上面的200 from memory cache和200 from disk cache屬于強制緩存。

2、協商緩存

協商緩存，從字面意思，就是要協商，是瀏覽器和服務器協商，那么瀏覽器每次都要和服務器通信。在第一次請求服務器時，服務器會返回資源，并且返回一個資源的緩存標識，一起存到瀏覽器的緩存數據庫。當第二次請求資源時，瀏覽器會首先將緩存標識發送給服務器，服務器拿到標識后判斷標識是否匹配，如果不匹配，表示資源有更新，服務器會將新數據和新的緩存標識一起返回到瀏覽器；如果緩存標識匹配，表示資源沒有更新，并且返回 304 狀態碼，瀏覽器就讀取本地緩存服務器中的數據。

與協商緩存有關的字段是Last-Modified/IF-Modified-Since、Etag/IF-None-Match。

Last-Modified與ETag是可以一起使用的，服務器會優先驗證ETag，一致的情況下，才會繼續比對Last-Modified，最后才決定是否返回304。

強制緩存和協商緩存的具體參數及分析比較可以參考以下文章

http://caibaojian.com/browser-cache.html

https://segmentfault.com/a/1190000016199807

再回到我們的問題，用戶打開瀏覽器發現是舊的資源，于是手動刷新了一下頁面，得到了新的資源，這是為什么呢？

3、用戶行為會對緩存產生影響

結合上面的內容，我們可以分析情況了

1、用戶第一次訪問頁面——200 數值大小，與服務器通信，服務器返回全部資源大小，瀏覽器把獲取到的數據根據緩存規則進行緩存。

2、更新項目，用戶打開頁面是舊的資源——200 from disk cache，命中強緩存，使用了本地緩存，沒有請求服務器

3、用戶手動刷新頁面，得到新資源——200 數值大小，用戶刷新，強緩存失效，使用協商緩存，根據緩存標識發現資源修改了，服務器返回全部新資源和緩存標識

4、用戶再刷新頁面——304 數值大小，協商緩存，資源沒有修改，數值不是全部資源大小，是報文信息大小。同時，這里會出現一些資源200 from memory的情況，它們存在內存中。

我們再看幾張圖應該就很好理解了

三、解決方法

明白了問題所在，我們接下來就可以提出對應的解決方法了。

以vue為例，vue在打包的時候，css和js名字都加了哈希值，所以改動后打包生成的js和css是唯一的，頁面請求的是新資源，不會有緩存問題。但是入口文件index.html會因為緩存造成更新問題，如果我們更新了，但是瀏覽器使用的是緩存，就會出現問題。所以需要對入口文件設置不使用強制緩存，需要每次去服務器驗證文件是否修改，即使用協商緩存。

使用nginx反向代理，在nginx.conf文件的對應server中設置，目前我自己實踐出的可行的一種寫法是：

server {

listen 80;

server_name 域名;

root 文件目錄;

index index.html;

location / { // 不加這一句，會出現nginx歡迎頁面，無法正確加載資源

try_files $uri /index.html;

}

location ~ .*\.(html)$ { // 對html文件限制緩存

add_header Cache-Control no-store; // 不緩存

// 或者用add_header Cache-Control no-cache;替代上面那一句，協商緩存

add_header Pragma no-cache;

}

}

（1）Cache-Control: no-cache和Cache-Control: no-store區別

看字面意思容易誤解，no-cache就是不緩存，但是no-cache并不是不緩存，而是使用協商緩存，所以并不能禁止緩存，no-store才是真正的禁止緩存。從節省帶寬角度講，使用no-cache更優一點，文件未發生改變時只傳輸很小的報文大小，只有在文件改變時才會傳輸整個文件大小。而不是no-store不管什么情況都傳輸整個文件大小。

（2）Pragma: no-cache：和Cache-Control: no-cache區別

Pragma: no-cache跟Cache-Control: no-cache相同，Pragma: no-cache兼容http 1.0 ，Cache-Control: no-cache是http 1.1提供的。因此，Pragma: no-cache可以應用到http 1.0 和http 1.1,而Cache-Control: no-cache只能應用于http 1.1.

轉自: https://www.cnblogs.com/SallyShan/p/13603221.html