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
版權宣告:本文為博主原創文章,轉載請附上博文連結!