html 中 meta 的介紹
基本介紹
- meta 標簽主要是用來描述一個 html 網(wǎng)頁文檔的屬性的。 例如 作者、日期、時間、頁面刷新。
- 還可以用于 seo 的搜索優(yōu)化。
基本屬性
分為必選和可選項
-
1.必選屬性：
- ==content== 屬性。該屬性是為了定義與http-equiv或者name屬性相關(guān)的元信息，其中的內(nèi)容是為了便于搜索機器人查找信息和分類使用的。
-
2.可選屬性：
- ==name== 屬性。該屬性主要用于描述網(wǎng)頁。name屬性的值可以有：author、description、keywords、generator等等
- ==http-equiv== 屬性。該屬性相當于http的頭文件作用，可以向瀏覽器返回一些有用的信息，以幫助正確和精確的顯示內(nèi)容。http-equiv屬性的值可以有content-type、expires、refresh等等。
name 屬性 的一般應(yīng)用
- keyword、description、author、robot 基本應(yīng)用
// 語言格式
<meta charset="utf-8">
//關(guān)鍵字 和 描述 html 主體內(nèi)容
<meta name="keywords" content="關(guān)于meta標簽,網(wǎng)頁,918之初">
<meta name="description" content="HTML中<meta>標簽如何正確使用">
// 作者信息
<meta name="author" content="somebody">
//便于 seo 搜索
<meta name="robot" content="none">
該屬性的值有all、none、index、noindex、follow和nofollow。默認為all。
設(shè)定為all：文件將被檢索，且頁面上的鏈接可以被查詢；
設(shè)定為none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
設(shè)定為index：文件將被檢索；
設(shè)定為follow：頁面上的鏈接可以被查詢；
設(shè)定為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
設(shè)定為nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。
http-equiv 的一般應(yīng)用
- content-type(文檔內(nèi)容類型：用于設(shè)定文檔的類型和字符集)
- expires(期限：可以用于設(shè)定網(wǎng)頁的到期期限)
- pragma（cashe模式：即是否從緩存中訪問網(wǎng)頁內(nèi)容）
- refresh(刷新：等待一定時間自動刷新或跳轉(zhuǎn)到其他url)
// 文檔類型
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
// 必須是 GMT 格式
<meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT">
// 是否設(shè)置緩存
<meta http-equiv="pragma" content="no-cache">
// 等待一定時間自動跳轉(zhuǎn)
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
<meta>標簽中在移動端的使用
- name屬性的viewport的值（移動端屏幕的縮放）
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
- name屬性的format-detection值。
我們可以通過這個屬性禁止自動識別電話和郵箱。舉例如下：
<meta name="format-detection" content="telephone=no,email=no"/>
- name屬性的apple-mobile-web-app-capable值（網(wǎng)站開啟對web app程序的支持）
<meta name="app-mobile-web-app-capable" content="yes"/>
- name屬性的apple-mobile-web-app-status-bar-style值（改變頂部狀態(tài)條的顏色）
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
瀏覽器緩存機制
瀏覽器是如何判斷緩存是否過期？
- 應(yīng)該是根據(jù)Response Header里面的Cache-Control和Expires這兩個屬性，當兩個都存在時，Cache-Control優(yōu)先級較高。
瀏覽器緩存分為：強緩存和協(xié)商緩存。
-
1、==強緩存==：瀏覽器加載資源時，第一步先判斷它是否是強緩存，如果是，瀏覽器將直接從自己的緩存中讀取，不會向服務(wù)器發(fā)送請求。
上圖，status200，Size是from memory cache就是走的強緩存。那么什么是強緩存呢？瀏覽器又是咋判斷的呢？-
==Expires字段==：
- 1、瀏覽器第一次向服務(wù)器請求，服務(wù)器返回資源并在response header加上Expires字段，是客戶端緩存有效期，是絕對時間。
- 2、瀏覽器接收資源，把資源和相應(yīng)頭緩存起來。
- 3、待到再次請求這個資源時，先在緩存中找，找到了看Expires字段，判斷是否過期。若沒過期直接從緩存加載。若過期了，再向服務(wù)器請求。
-
==Cache-Control字段==：
- 1、瀏覽器第一次向服務(wù)器請求，服務(wù)器返回資源并在response header加上Cache-Control字段，也是緩存的有效期，但是是相對時間，比如：Cache-Control:max-age=56700000。
- 2、瀏覽器接收資源，把資源和相應(yīng)頭緩存下來。
- 3、待到瀏覽器再次請求這個資源時，先在緩存找，根據(jù)第一次的請求時間和Cache-Control相對時間算出過期時間。若沒過期，直接從緩存加載。若過期了，再向服務(wù)器請求。
-
==Expires字段==但是絕對時間有時會有偏差，所以引出了==Cache-Control==。
==Cache-Control==彌補了==Expires==的不足，更安全有效。
服務(wù)端如何判斷緩存已失效？
服務(wù)端通過If-Modified-Since（Last-Modified）和If-None-Match（Etag）這兩個屬性的值來判斷緩存是否失效的。
-
2、==協(xié)商緩存==：當瀏覽器判斷不是強緩存，就會發(fā)向服務(wù)器發(fā)請求，判斷是否是協(xié)商緩存。如果是，服務(wù)器會返回304Not Modified，瀏覽器從緩存中加載。那什么又是協(xié)商緩存呢？
-
==Last-Modified==和==If-Modified-Since==字段：
- 1、瀏覽器第一次向服務(wù)器發(fā)請求，服務(wù)器返回資源并在response header加上Last-Modified字段，表示資源最后修改的時間。
- 2、瀏覽器再次請求這個資源時，請求頭會加上If-Modified-Since字段。若這兩個字段一樣，說明資源沒有修改過，返回304Not Modified，瀏覽器從緩存中獲取資源。若這兩個字段不一樣，說明資源修改過，服務(wù)器正常返回資源。
-
==ETag、If-None-Match==：
- 但有時候服務(wù)器上資源有變化，單最后修改時間沒更新，則引出下面兩個字段。
- 1、瀏覽器第一次向服務(wù)器請求，服務(wù)器返回資源并在response header上加ETag字段。表示資源本身，資源有變化，則該字段有變化。
- 2、瀏覽器再次向服務(wù)器請求這個資源時，請求頭攜帶If-None-Match字段。若這兩個字段相同，則代表資源沒有變化，服務(wù)器返回304Not Modified，瀏覽器從緩存中加載。若兩個字段不同，證明資源有變動，服務(wù)器正常返回資源。
-
