HTML中<meta>標簽如何正確使用
如果我們在瀏覽器中按下F12或者Ctrl+shift+J，便可以打開開發者工具，在element中即可看到<head>元素中有不少<meta>元素。對於網頁而言，<meta>元素是必不可少的。我們在創建一個html5文檔時，就會發現類似於<meta charset="UTF-8">這樣的標簽，來規定解析文檔的字符類型。那麽，它還有哪些作用呢？下面，我將一探究竟！我會通過下面幾個部分來講解，如果你希望直接看後面部分的內容，可以直接點擊下面的文字。
- <meta>標簽的基本介紹
- <meta>標簽中的屬性列舉
- <meta>標簽中的name屬性應用
- <meta>標簽中的http-equiv屬性應用
- <meta>標簽中在移動端的使用
第一部分：<meta>標簽的基本介紹
<meta>標簽是HTML網頁源代碼中的一個重要的html標簽。META便簽用來描述一個HTML網頁文檔的屬性，例如作者、日期和時間、關鍵詞、頁面刷新。除此之外，<meta>標簽用於搜索引擎優化（seo）。它位於HTML文檔中<head>元素內，雖然它提供的信息用戶不可見，但它卻是文檔最基本的元信息。
第二部分：<meta>標簽中的屬性列舉
<meta>標簽中屬性我們可以分為必選的屬性和可選的屬性。
1.必選屬性：content屬性。該屬性是為了定義與http-equiv或者name屬性相關的元信息，其中的內容是為了便於搜索機器人查找信息和分類使用的。
2.可選屬性：
- name屬性。該屬性主要用於描述網頁。name屬性的值可以有：author、description、keywords、generator等等
- http-equiv屬性。該屬性相當於http的頭文件作用，可以向瀏覽器返回一些有用的信息，以幫助正確和精確的顯示內容。http-equiv屬性的值可以有content-type、expires、refresh等等。
第三部分：<meta>標簽中的name屬性應用
A keywords（關鍵字：告訴瀏覽器你的網頁的關鍵字是什麽）
B description（描述：告訴瀏覽器你的網頁的主要內容是什麽）
這兩個屬性值我放在一起說，是因為它們的作用非常相似。因為設置這兩個值可以幫助你的主頁被各大搜索引擎登陸，提高網站的訪問量。於是這兩個屬性值的設置是格外重要的。因為按照搜索引擎的工作原理，搜索引擎會首先排除機器人自動檢索頁面中的keywords和description，並將其加入自己的數據庫，然後根據關鍵詞的密度將網站排序
我們可以像下面這樣使用：
| 1 2 |
<meta name="keywords" content="關於meta標簽,網頁,918之初">
<meta name="description" content="HTML中<meta>標簽如何正確使用">
|
註意：keywords的content內容要限制在36個字。
description的content內容要限制在76個字。
值得註意的是，name一定要和content屬性配合使用。
C robot（機器人向導：用於高速機器人哪些頁面需要索引，哪些頁面不需要索引）
該屬性的值有all、none、index、noindex、follow和nofollow。默認為all。
設定為all：文件將被檢索，且頁面上的鏈接可以被查詢；
設定為none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
設定為index：文件將被檢索；
設定為follow：頁面上的鏈接可以被查詢；
設定為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
設定為nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。
我們可以像下面這樣使用：
| 1 | <meta name="robot" content="none"> |
即搜索機器人在自動檢索頁面時，將不會檢索到這個頁面。
D author（作者：用於告訴搜索機器人網頁的作者）
| 1 | <meta name="author" content="somebody"> |
第四部分：<meta>標簽中的http-equiv屬性應用
A.content-type(文檔內容類型：用於設定文檔的類型和字符集)
這是meta便簽中最為常見的一中設置，在制作網頁時，我們在純HTML代碼可看到它是定義你的網頁的語言，當瀏覽器訪問到你的網頁時，瀏覽器便會根據此來識別並進行相應的設定，否則，瀏覽器就會使用默認的設定方法。
| 1 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
B.expires(期限：可以用於設定網頁的到期期限)
一旦網頁過期，那麽就必須在服務器上重新刷新而不能通過緩存獲取網頁。值得註意的是：其中設置的時間必須是GMT格式。
| 1 | <meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT"> |
如果你在瀏覽器中設置瀏覽器網頁先從本地緩存中的頁面獲取，那麽當瀏覽時，就會只從本地緩存獲取，直到meta中設置的時間到期，瀏覽器才會獲取新頁面。
C.pragma（cashe模式：即是否從緩存中訪問網頁內容）
| 1 | <meta http-equiv="pragma" content="no-cache"> |
這行代碼表示不從緩存獲取頁面，於是訪問者將無法脫機工作。
D.refresh(刷新：等待一定時間自動刷新或跳轉到其他url)
| 1 | <meta http-equiv="refresh" content="1; url=https://www.baidu.com"/> |
第五部分：<meta>標簽中在移動端的使用
這幾年，隨著移動端的興起，我們對移動端越來越需要進行專門的網頁設計，下面，我來介紹一些關於移動端布局中<meta>標簽的使用。
1.name屬性的viewport的值（移動端屏幕的縮放）
viewport也就是可視區域，就是出去所有工具欄、狀態欄、滾動條等等我們看網頁的區域。一般我們可以操控的屬性有width、height、initial-scale、minimum-scale、maxmum-scale、user-scalable。
舉例如下：
| 1 | <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> |
即：強制讓文檔與設備的寬度保持1:1；文檔的其實比例和最大比例都是1.0。利用user-scalable=no定義用戶不可以通過手動縮放，使得頁面固定。
2.name屬性的format-detection值。
我們可以通過這個屬性禁止自動識別電話和郵箱。舉例如下：
| 1 | <meta name="format-detection" content="telephone=no,email=no"/> |
這樣，是設備瀏覽網頁時對數字不啟用電話功能（註意不同設備的解釋可能不同），忽略將頁面中的數字識別為電話號碼。對郵箱同樣如此。
3.name屬性的apple-mobile-web-app-capable值（網站開啟對web app程序的支持）
| 1 | <meta name="app-mobile-web-app-capable" content="yes"/> |
說明：1.網站開啟對web app的支持
2.該meta可以看出內容為”蘋果設備web應用程序xx“，就是說該meta是專門定義web應用的。
4.name屬性的apple-mobile-web-app-status-bar-style值（改變頂部狀態條的顏色）
| 1 | <meta name="apple-mobile-web-app-status-bar-style" content="black"/> |
說明：1.在web app應用下狀態條的顏色為黑色；
2.默認值為default(白色)，可以定義為black（黑色）和black-translucent(灰色半透明)；
5.name屬性設置作者姓名以及聯系方式
| 1 | <meta name="author" contect="zzw, [email protected]" /> |
HTML中<meta>標簽如何正確使用