html 中 meta 的介紹
基本介紹
- meta 標(biāo)簽主要是用來描述一個 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== 屬性。該屬性相當(dāng)于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標(biāo)簽,網(wǎng)頁,918之初">
<meta name="description" content="HTML中<meta>標(biāo)簽如何正確使用">
// 作者信息
<meta name="author" content="somebody">
//便于 seo 搜索
<meta name="robot" content="none">
該屬性的值有all、none蔬浙、index猪落、noindex、follow和nofollow畴博。默認(rèn)為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>標(biāo)簽中在移動端的使用
- 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這兩個屬性硼砰，當(dāng)兩個都存在時且蓬，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é)商緩存==：當(dāng)瀏覽器判斷不是強緩存坤检，就會發(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ù)器正常返回資源瘦麸。
-
