>[info]html代碼中最關鍵的就是meta標簽設置，meta標簽是元素可提供相關頁面的元信息，比如針對搜索引擎和更新頻度的描述和關鍵詞。標簽位于文檔的頭部，不包含任何內容。 開發移動端頁面首先一定要設置viewport?（可視區域）[博文](https://blog.csdn.net/u012402190/article/details/70172371) ``` <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no;"> ``` meta標簽共有兩個屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能 * **http-equiv屬性** 相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值 * （1）**content-Type**（顯示字符集的設定） 說明：設定頁面使用的字符集。 用法：**`<meta http-equiv="content-Type"content="text/html; charset=gb2312">`** * （2）**content-Language**（當瀏覽者訪問你的網頁時，瀏覽器會自動識別并設置網頁中的語言） 用法：**`<metahttp-equiv="Content-Language" content="zh-cn" /> `** * （3）**Expires**（期限） 說明：可以用于設定網頁的到期時間。一旦網頁過期，必須到服務器上重新傳輸。注意：必須使用GMT的時間格式。 用法：**`<meta http-equiv="expires"content="Fri,12 Jan 2001 18:18:18 GMT"> `** * （4）**Pragma**(cache模式） 說明：禁止瀏覽器從本地計算機的緩存中訪問頁面內容。 用法：**`<meta http-equiv="Pragma"content="no-cache"> `** 注意：這樣設定，訪問者將無法脫機瀏覽。 * （5）**Refresh** （刷新） 說明：自動刷新并轉到新頁面。 用法：**`<meta http-equiv="Refresh" content="2;URL">；`**（注意后面的分號，分別在秒數的前面和網址的后面，URL可為空） 注意：其中的2是指停留2秒鐘后自動刷新到URL網址。 * （6）**Set-Cookie**(cookie設定） 說明：如果網頁過期，那么存盤的cookie將被刪除。 用法：**`<meta http-equiv="Set-Cookie"content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/">`** 注意：必須使用GMT的時間格式。 * （7）**Window-target** （顯示窗口的設定） 說明：強制頁面在當前窗口以獨立頁面顯示。 用法：**`<meta http-equiv="Window-target"content="_top">`** 注意：用來防止別人在框架里調用自己的頁面。 * **name屬性** * （1）**Keywords**（關鍵字） 說明：keywords用來告訴搜索引擎你網頁的關鍵字是什么。提高網站的訪問量 * （2）**description**（網站內容描述） 說明：description用來告訴搜索引擎你的網站主要內容。 網站內容描述（description）的設計要點： ①網頁描述為自然語言而不是羅列關鍵詞（與keywords設計正好相反）； ②通常為網頁內容的摘要信息，也就是希望搜索引擎在檢索結果中展示的摘要信息； ③網頁描述中含有有效關鍵詞； ④網頁描述內容與網頁標題內容，主題內容有高度相關性； ⑤網頁描述的文字不必太多，一般不超過搜索引擎檢索結果摘要信息的最多字數（通常在100中文字之內，不同搜索引擎略有差異）。 * （3）**robots**（機器人向導） 說明：robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。 content的參數有all,none,index,noindex,follow,nofollow。默認是all。 舉例：**`<meta name="robots"content="none">`** * （4）author（作者） 說明：標注網頁的作者 ?width:可視區域的寬度，值可為數字或關鍵詞device-width height:同width device-width - 設備的寬度 initial-scale - 初始的縮放比例? minimum-scale - 允許用戶縮放到的最小比例?? maximum-scale - 允許用戶縮放到的最大比例? user-scalable - 用戶是否可以手動縮放