html meta標籤使用及屬性的詳細分析

這篇文章帶給大家的內容是關於html meta標籤使用及屬性的詳細分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

自學前端開始，我對meta標籤接觸不多，主要把精力都集中在能顯示出來的標籤上，例如span、button、h1等等。有時候去查看一些知名網站的源碼，發現head標籤裡有一大疊的meta。

今天就來學習meta的用處，看看有些啥屬性。

一、定義及作用

meta，即元資料（Metadata）是資料的資料資訊。

該標籤提供了 HTML 文件的元資料。元資料不會顯示在客戶端，但是會被瀏覽器解析。

通常用於指定網頁的描述，關鍵字，文件的最後修改時間，作者及其他元資料。

元資料可以被使用瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵字），或其他 Web 服務呼叫。

二、屬性

charset(htm5新增)	#定義文檔的字元編碼
content	定義與http-equiv 或name 屬性相關的元資訊。
http-equiv	http回應頭
#name	屬性名稱
scheme (htm5廢棄)	翻譯content 屬性的值的方案

1 、charset

HTML5新增的屬性，定義目前頁面的字元編碼

#新寫法：

<meta charset="UTF-8">

老寫法：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

#HTML5中優先用新寫法

2、name屬性

a、keywords，目前網頁的關鍵字，方便搜尋引擎識別，提高搜尋準確性

<meta name="keywords" content="cdn，网络加速，运营商">

b、description，目前網頁的簡單描述，如果用百度搜尋的話，在搜尋結果的每個標題下面會顯示description的內容，方便用戶快速定位

<meta name="description" content="本公司专注提供CDN网络加速，同时也提供云计算服务">

c、viewport，這個meta有點複雜，主要用在行動網頁中，需要單獨寫一篇文章，這裡暫時略過

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

d、robots，搜尋引擎爬蟲的索引方式

<meta name="robots" content="none">

content的取值有all、none、index、noindex、follow、nofollow，預設是all，具體的說明如表格所示：

##all文件可以被索引，文檔中的連結可以被查詢none文檔不能被索引，同時文檔中的連結不能被查詢index文件可以被索引noindex文件不能被索引，但是文件中的連結可以被查詢follow文件中的連結可以被查詢#nofollow文件可以被索引，但是文件中的連結不能被查詢e、author，文件的作者

<meta name="author" content="liuhw，liuhuansir@126.com">

f、copyright，文件的版權說明

<meta name="copyright" content="liuhw">

g、 revisit-after，搜尋引擎爬蟲重訪的時間間隔，如果你的網站不經常更新，那可以把這個時間設定的稍長一些，能略微的減輕伺服器的壓力，節省頻寬資源

<meta name="revisit-after" content="5 days" >

h、renderer，雙核心瀏覽器的渲染方式，指定預設用哪個瀏覽器核心來渲染，例如360瀏覽器：

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

3、http-equiv

#模擬http裡的頭，回傳給伺服器一些資訊

a、expires，網頁的到期時間，過期之後，需要重新造訪伺服器

<meta http-equiv="expires" content="Sunday 26 October 2018 01:00 GMT" />

b、pragma(相容http1.0 ，1.1)，cache-control(http1.1新增)，設定快取方式，建議用cache-control，該屬性的content具體參考http裡的cache-control

<meta http-equiv="cache-control" content="no-cache">

c、refresh，自動刷新並且跳到content中宣告的url

<meta http-equiv="refresh" content="5；URL=http://www.liuhw.club/"> //5秒后跳转向我自己的域名

d、set-cookie，新增cookie

<meta http-equiv="set-cookie" content="TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/">

e、content-Type，文件的字元編碼，同charset，建議使用charset

<meta http-equiv="content-type" content="text/html;charset=gb2312">

f、x-ua-compatible，告訴瀏覽器用哪個版本來渲染文件

<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

總結一下，上面只是列出了一些常用的屬性，沒有列出來的等需要用到的時候再查文件

【相關推薦：

HTML5影片教學】

#

以上是html meta標籤使用及屬性的詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！