目錄

什么是meta標簽？

meta的作用

meta的必需屬性和可選屬性

必需屬性content

可選屬性

常用meta標簽大總結

charset

百度禁止轉碼

SEO 優化部分

viewport

各瀏覽器平臺

最后——移動端常用的meta

---

meta的標簽的使用是我在前端學習中曾經困惑過一段時間的問題。一方面不是很了解meta標簽的用途，另一方面是對于meta標簽里的屬性和值不是懂，也不知道從哪里冒出來的，所以這篇文章專門整理下meta標簽，一個必用且關鍵的標簽。

什么是meta標簽？

引自下W3school的定義說明一下。

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

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

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

標簽始終位于 head 元素中。

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

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

meta的作用

meta里的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容，例如我們為頁面中添加如下meta標簽：

<meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008">

那么瀏覽器的頭部就會包括這些:

charset:iso-8859-1 expires:31 Dec 2008

當然，只有瀏覽器可以接受這些附加的頭部字段，并能以適當的方式使用它們時，這些字段才有意義。

meta的必需屬性和可選屬性

必需屬性content

meta的必需屬性是content，當然并不是說meta標簽里一定要有content，而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。例如：

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

這里面content里的屬性就是對keywords進行的說明，所以呢也可以理解成一個鍵值對吧，就是{keywords:"HTML,ASP,PHP,SQL"}。

可選屬性

在W3school中，對于meta的可選屬性說到了三個，分別是http-equiv、name和scheme。考慮到scheme不是很常用，所以就只說下前兩個屬性吧。

http-equiv

http-equiv屬性是添加http頭部內容，對一些自定義的，或者需要額外添加的http頭部內容，需要發送到瀏覽器中，我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明，那么現在再舉個例子。例如我們不想使用js來重定向，用http頭部內容控制，那么就可以這樣控制：

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

在頁面中加入這個后，5秒鐘后就會跳轉到指定頁面啦，效果可看W3school的例子

name

第二個可選屬性是name，這個屬性是供瀏覽器進行解析，對于一些瀏覽器兼容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:

<meta name="renderer" content="webkit">

這個meta標簽的意思就是告訴瀏覽器，用webkit內核進行解析，當然前提是瀏覽器有webkit內核才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從哪里冒出來的，我要怎么知道呢？這個就是在對應的瀏覽器的開發文檔里就會有表明的，例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔

常用meta標簽大總結

接下來就是常用的meta標簽大總結啦，我會盡可能的做到全

charset

charset是聲明文檔使用的字符編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset一定要寫第一行，不然就可能會產生亂碼了。

charset有兩種寫法

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

兩個都是等效的。

百度禁止轉碼

百度會自動對網頁進行轉碼，這個標簽是禁止百度的自動轉碼

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 優化部分

<!-- 頁面標題<title>標簽(head 頭部必須) --> <title>your title</title> <!-- 頁面關鍵詞 keywords --> <meta name="keywords" content="your keywords"> <!-- 頁面描述內容 description --> <meta name="description" content="your description"> <!-- 定義網頁作者 author --> <meta name="author" content="author,email address"> <!-- 定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 --> <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)

各瀏覽器平臺

Microsoft Internet Explorer

<!-- 優先使用最新的ie版本 --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- 是否開啟cleartype顯示效果 --> <meta http-equiv="cleartype" content="on"> <meta name="skype_toolbar" content="skype_toolbar_parser_compatible"><!-- Pinned Site --> <!-- IE 10 / Windows 8 --> <meta name="msapplication-TileImage" content="pinned-tile-144.png"> <meta name="msapplication-TileColor" content="#009900"> <!-- IE 11 / Windows 9.1 --> <meta name="msapplication-config" content="ieconfig.xml">

Google Chrome

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

360瀏覽器

<!-- 選擇使用的瀏覽器解析內核 --> <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手機瀏覽器

<!-- 將屏幕鎖定在特定的方向 --> <meta name="screen-orientation" content="landscape/portrait"> <!-- 全屏顯示頁面 --> <meta name="full-screen" content="yes"> <!-- 強制圖片顯示，即使是"text mode" --> <meta name="imagemode" content="force"> <!-- 應用模式，默認將全屏，禁止長按菜單，禁止手勢，標準排版，強制圖片顯示。 --> <meta name="browsermode" content="application"> <!-- 禁止夜間模式顯示 --> <meta name="nightmode" content="disable"> <!-- 使用適屏模式顯示 --> <meta name="layoutmode" content="fitscreen"> <!-- 當頁面有太多文字時禁止縮放 --> <meta name="wap-font-scale" content="no">

?

QQ手機瀏覽器

<!-- 鎖定屏幕在特定方向 --> <meta name="x5-orientation" content="landscape/portrait"> <!-- 全屏顯示 --> <meta name="x5-fullscreen" content="true"> <!-- 頁面將以應用模式顯示 --> <meta name="x5-page-mode" content="app">

Apple iOS

<!-- Smart App Banner --> <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"><!-- 禁止自動探測并格式化手機號碼 --> <meta name="format-detection" content="telephone=no"><!-- Add to Home Screen添加到主屏 --> <!-- 是否啟用 WebApp 全屏模式 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 添加到主屏后的標題 --> <meta name="apple-mobile-web-app-title" content="App Title">

Google Android

<meta name="theme-color" content="#E64545"> <!-- 添加到主屏 --> <meta name="mobile-web-app-capable" content="yes"> <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

App Links

<!-- iOS --> <meta property="al:ios:url" content="applinks://docs"> <meta property="al:ios:app_store_id" content="12345"> <meta property="al:ios:app_name" content="App Links"> <!-- Android --> <meta property="al:android:url" content="applinks://docs"> <meta property="al:android:app_name" content="App Links"> <meta property="al:android:package" content="org.applinks"> <!-- Web Fallback --> <meta property="al:web:url" content="http://applinks.org/documentation"> <!-- More info: http://applinks.org/documentation/ -->

最后——移動端常用的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 -->

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

?

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第十篇值meta标签（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。