Meta標籤常用屬性值的寫法和作用
什麼是meta標籤？
元資料（metadata）是關於資料的資訊。
標籤提供關於 HTML 文件的元資料。元資料不會顯示在頁面上，但是對於機器是可讀的。
典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文件的作者、最後修改時間以及其他元資料。
標籤始終位於 head 元素中。
元資料可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。
meta標籤結構
content 屬性 必選屬性
提供了名稱/值對中的值。該值可以是任何有效的字串。始終要和 name 屬性或 http-equiv 屬性一起使用。即而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。
name 屬性 可選屬性
提供了名稱/值對中的名稱。HTML 和 XHTML 標籤都沒有指定任何預先定義的 <meta> 名稱。通常情況下，您可以自由使用對自己和源文件的讀者來說富有意義的名稱。即這個屬性是供瀏覽器進行解析，對於一些瀏覽器相容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標籤的意思就是告訴瀏覽器，用webkit核心進行解析，當然前提是瀏覽器有webkit核心才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從哪裡冒出來的，我要怎麼知道呢？這個就是在對應的瀏覽器的開發文件裡就會有表明的，例如這個renderer是在360瀏覽器裡說明的。
http-equiv 屬性 可選屬性
為名稱/值對提供了名稱。並指示伺服器在傳送實際的文件之前先在要傳送給瀏覽器的 MIME 文件頭部包含名稱/值對。當伺服器向瀏覽器傳送文件時，會先發送許多名稱/值對。雖然有些伺服器會發送許多這種名稱/值對，但是所有伺服器都至少要傳送一個：content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文件。使用帶有 http-equiv 屬性的 <meta> 標籤時，伺服器將把名稱/值對新增到傳送給瀏覽器的內容頭部。例如，新增：
<meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008">
這樣傳送到瀏覽器的頭部就應該包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008當然，只有瀏覽器可以接受這些附加的頭部欄位，並能以適當的方式使用它們時，這些欄位才有意義。
scheme 屬性 可選屬性
用於指定要用來翻譯屬性值的方案。此方案應該在由 <head> 標籤的 profile 屬性指定的概況檔案中進行了定義。
meta標籤常用屬性值的寫法和作用
charset
charset是宣告文件使用的字元編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset一定要寫第一行，不然就可能會產生亂碼了。
charset有兩種寫法
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">設定頁面不快取
<!-- 禁止瀏覽器從本地計算機的快取中訪問頁面內容 -->
<meta http-equiv=”pragma” content=”no-cache”>
<!-- 禁止瀏覽器快取 -->
<meta http-equiv=”cache-control” content=”no-cache”>
<!--
網頁的快取過期時間
比如<meta HTTP-EQUIV="expires" CONTENT="60">表示網頁在60秒後過期
<meta HTTP-EQUIV="expires" CONTENT="-1">這是特殊的用法，表示網頁在任何時候都不能被Cache儲存
-->
<meta http-equiv=”expires” content=”0″>
<!--頁面重定向和重新整理 -->
<meta http-equiv="refresh" content="0;url=" />百度禁止轉碼
百度會自動對網頁進行轉碼，這個標籤是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />SEO 優化部分
<!-- 頁面關鍵詞 keywords -->
<meta name="keywords" content="your keywords">
<!-- 頁面描述內容 description -->
<meta name="description" content="your description">
<!-- 定義網頁作者 author -->
<meta name="author" content="author,email address">
<!--
定義網頁搜尋引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值
通常有如下幾種取值
all：檔案將被檢索，且頁面上的連結可以被查詢；
none：檔案將不被檢索，且頁面上的連結不可以被查詢；
index：檔案將被檢索；
follow：頁面上的連結可以被查詢；
noindex：檔案將不被檢索；
nofollow：頁面上的連結不可以被查詢。
-->
<meta name="robots" content="index,follow">viewport
viewport主要是影響移動端頁面佈局的，例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
content 引數：
width： viewport 寬度(數值/device-width)
height： viewport 高度(數值/device-height)
initial-scale： 初始縮放比例
maximum-scale： 最大縮放比例
minimum-scale： 最小縮放比例
user-scalable： 是否允許使用者縮放(yes/no)
-->---------------------
作者：xl7
來源：CSDN
原文：https://blog.csdn.net/xustart7720/article/details/79649896?utm_source=copy
版權宣告：本文為博主原創文章，轉載請附上博文連結！