meta 有哪些常見的值？

什么是meta標簽？###

  • 元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。
  • 標簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機器是可讀的。
  • 典型的情況是，meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后修改時間以及其他元數(shù)據(jù)。
  • 標簽始終位于 head 元素中。
    -元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。

meta標簽結(jié)構(gòu)

  • content 屬性 必選屬性

提供了名稱/值對中的值。該值可以是任何有效的字符串。始終要和 name 屬性或 http-equiv 屬性一起使用。即而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。

  • name 屬性 可選屬性

提供了名稱/值對中的名稱。HTML 和 XHTML 標簽都沒有指定任何預(yù)先定義的 <meta> 名稱。通常情況下，您可以自由使用對自己和源文檔的讀者來說富有意義的名稱。即這個屬性是供瀏覽器進行解析，對于一些瀏覽器兼容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。

例如:

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

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

  • http-equiv 屬性 可選屬性

為名稱/值對提供了名稱。并指示服務(wù)器在發(fā)送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。當服務(wù)器向瀏覽器發(fā)送文檔時，會先發(fā)送許多名稱/值對。雖然有些服務(wù)器會發(fā)送許多這種名稱/值對，但是所有服務(wù)器都至少要發(fā)送一個：content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文檔。使用帶有 http-equiv 屬性的 <meta> 標簽時，服務(wù)器將把名稱/值對添加到發(fā)送給瀏覽器的內(nèi)容頭部。

例如，添加：

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

這樣發(fā)送到瀏覽器的頭部就應(yīng)該包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
當然，只有瀏覽器可以接受這些附加的頭部字段，并能以適當?shù)姆绞绞褂盟鼈儠r，這些字段才有意義。

  • scheme 屬性 可選屬性

用于指定要用來翻譯屬性值的方案。此方案應(yīng)該在由 <head> 標簽的 profile 屬性指定的概況文件中進行了定義。

meta標簽常用屬性值的寫法和作用

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

charset有兩種寫法

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
設(shè)置頁面不緩存
<!-- 禁止瀏覽器從本地計算機的緩存中訪問頁面內(nèi)容 -->
<meta http-equiv=”pragma” content=”no-cache”>
<!-- 禁止瀏覽器緩存 -->
<meta http-equiv=”cache-control” content=”no-cache”>
<!--
 網(wǎng)頁的緩存過期時間 
 比如<meta HTTP-EQUIV="expires" CONTENT="60">表示網(wǎng)頁在60秒后過期
 <meta HTTP-EQUIV="expires" CONTENT="-1">這是特殊的用法，表示網(wǎng)頁在任何時候都不能被Cache存儲
-->
<meta http-equiv=”expires” content=”0″>
<!--頁面重定向和刷新 -->
<meta http-equiv="refresh" content="0;url=" />

百度禁止轉(zhuǎn)碼

百度會自動對網(wǎng)頁進行轉(zhuǎn)碼，這個標簽是禁止百度的自動轉(zhuǎn)碼
<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 優(yōu)化部分

<!-- 頁面關(guān)鍵詞 keywords -->
<meta name="keywords" content="your keywords">
<!-- 頁面描述內(nèi)容 description -->
<meta name="description" content="your description">
<!-- 定義網(wǎng)頁作者 author -->
<meta name="author" content="author,email address">
<!--
    定義網(wǎng)頁搜索引擎索引方式，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 參數(shù)： 
    width： viewport 寬度(數(shù)值/device-width)
    height： viewport 高度(數(shù)值/device-height)
    initial-scale： 初始縮放比例
    maximum-scale： 最大縮放比例
    minimum-scale： 最小縮放比例
    user-scalable： 是否允許用戶縮放(yes/no)
　-->

各瀏覽器平臺

Microsoft Internet Explorer

<!-- 優(yōu)先使用最新的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

<!-- 優(yōu)先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自動翻譯 -->
<meta name="google" value="notranslate">
360瀏覽器
<!-- 選擇使用的瀏覽器解析內(nèi)核 -->
<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">
<!-- 應(yīng)用模式，默認將全屏，禁止長按菜單，禁止手勢，標準排版，強制圖片顯示。 -->
<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">
<!-- 頁面將以應(yīng)用模式顯示 -->
<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">
<!-- 忽略識別郵箱 -->
<meta content="email=no" name="format-detection" />
<!-- Add to Home Screen添加到主屏 -->
<!-- 是否啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 設(shè)置狀態(tài)欄的背景顏色,只有在 “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">

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/ -->

移動端

<!-- `width=device-width` 會導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊  -->
<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" />
<!-- 設(shè)置蘋果工具欄顏色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略頁面中的數(shù)字識別為電話，忽略email識別 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別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應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,818評論 1贊 45
  • HTML標簽解釋大全 一、HTML標記 標簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,530評論 1贊 41
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,952評論 0贊 0
  • 1.meta的意義： 在HTML文檔中，meta元素可放置在head標簽內(nèi)用于定義整個文檔層面的元數(shù)據(jù)信息。使用m...
    馬建陽閱讀 1,041評論 0贊 2
  • HTML基礎(chǔ) 本文包括 HTML基本知識與結(jié)構(gòu) HTML常見標簽 標簽寫法與嵌套的討論 HTML、CSS、java...
    廖少少閱讀 2,211評論 2贊 21

友情鏈接更多精彩內(nèi)容