meta標籤的作用及整理

meta的標籤的使用是我在前端學習中曾經困惑過一段時間的問題。一方面不是很了解meta標籤的用途，另一方面是對於meta標籤里的屬性和值不是懂，今天給大家簡單的介紹及整理一下meta標籤。

何為meta標籤？

元數據（metadata）是關於數據的信息。

標籤提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對於機器是可讀的。

典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據。

標籤始終位於 head 元素中。

元數據可用於瀏覽器（如何顯示內容或重新載入頁面），搜索引擎（關鍵詞），或其他 web 服務。

簡單總結下就是：<meta> 標籤提供關於 HTML 文檔的元數據。它不會顯示在頁面上，但是對於機器是可讀的。可用於瀏覽器（如何顯示內容或重新載入頁面），搜索引擎（關鍵詞），或其他 web 服務。

作用：meta里的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加伺服器發送到瀏覽器的http頭部內容。

meta的一些必須屬性：content

不是說meta標籤里一定要有content，而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。

eg：<meta name="keywords" content="HTML,ASP,PHP,SQL">

http-equiv

添加頭部內容

eg:<meta http-equiv="Refresh" content="5;url="添加網址" />

加入這個東西後，5秒就會跳轉到指定頁面。

Google Chrome

<!-- 優先使用最新的chrome版本 --><meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- 禁止自動翻譯 --><meta name="google" value="notranslate">

移動端最常用的一些meta標籤

<meta name="viewport" content="width_=device-width, initial-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection"content="telephone=no, email=no" /><meta name="viewport" content="width_=device-width, initial-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 --><meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 --><meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話，忽略email識別 --><!-- 啟用360瀏覽器的極速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微軟的老式瀏覽器 --><meta name="MobileOptimized" content="320"><!-- uc強制豎屏 --><meta name="screen-orientation" content="portrait"><!-- QQ強制豎屏 --><meta name="x5-orientation" content="portrait"><!-- UC強制全屏 --><meta name="full-screen" content="yes"><!-- QQ強制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC應用模式 --><meta name="browsermode" content="application"><!-- QQ應用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 點擊無高光 --><meta name="msapplication-tap-highlight" content="no"><!-- 適應移動端end --><!-- sns 社交標籤 begin --> <!-- 參考微博API --> <meta property="og:type" content="類型" /> <meta property="og:url" content="URL地址" /> <meta property="og:title" content="標題" /> <meta property="og:image" content="圖片" /> <meta property="og:description" content="描述" /> <!-- sns 社交標籤 end -->

供大家參考一下。

推薦閱讀：