關於meta標籤

時間 2019-11-20

標籤關於 meta 標籤欄目 HTML5 简体版

原文原文鏈接

1、Meta標籤中的format-detection屬性及含義javascript

意爲：格式檢測php

或許你會有這樣的經歷：當你在製做手機端的頁面中，點擊了沒有加任何連接的格式的數字時，這時手機會進行自動拔號提示操做！css

禁止這一提示方法：html

加入meta標籤，如：<meta name="format-detection" content="telephone=no">java

同理，還會有如下相關操做：web

一、禁止跳轉郵箱：<meta name="format-detection" content="email=no">chrome

二、禁止跳轉地圖：<meta name="format-detection" content="adress=no">瀏覽器

三、禁止連接高亮：<meta name="msapplication-tap-highlight" content="no">緩存

四、設置響應式網頁必備：<meta name="viewport" content="user-scalable=no,initial-scale=1">服務器

（由於：包括iOS上的Safari和Windows Phone上的IE在內的一些移動端瀏覽器會在超連接元素被觸摸（tap）的時候顯示一個半透明的高亮背景，禁用這種默認的行爲來更好地控制本身站點的外觀和體驗）

meta是神馬？有神馬做用？

meta是用來在HTML文檔中模擬HTTP協議的響應頭報文。meta 標籤用於網頁的<head>與</head>中，meta 標籤的用處不少。meta 的屬性有兩種：name和http-equiv。 name屬性主要用於描述網頁，對應於content（網頁內容），以便於搜索引擎機器人查找、分類（目前幾乎全部的搜索引擎都使用網上機器人自動查找 meta值來給網頁分類）。這其中最重要的是description（站點在搜索引擎上的描述）和keywords（分類關鍵詞），因此應該給每頁加一個 meta值。比較經常使用的有如下幾個：

name 屬性

　　一、<meta name="Generator" contect="">用以說明生成工具（如Microsoft FrontPage 4.0）等；

　　二、<meta name="KEYWords" contect="">向搜索引擎說明你的網頁的關鍵詞；

　　注意：各關鍵詞間用英文逗號「,」隔開。META的一般用處是指定搜索引擎用來提升搜索質量的關鍵詞。當數個META元素提供文檔語言從屬信息時，搜索引擎會使用lang特性來過濾並經過用戶的語言優先參照來顯示搜索結果。例如：
　　　　　　<Meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">
　　　　　　<Meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">

　　三、<meta name="DEscription" contect="">告訴搜索引擎你的站點的主要內容；

　　四、<meta name="Author" contect="你的姓名">告訴搜索引擎你的站點的製做的做者；

　　Robots用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引

　　其中的屬性說明以下：

　　設定爲all：文件將被檢索，且頁面上的連接能夠被查詢；

　　設定爲none：文件將不被檢索，且頁面上的連接不能夠被查詢；

　　設定爲index：文件將被檢索；

　　設定爲follow：頁面上的連接能夠被查詢；

　　設定爲noindex：文件將不被檢索，但頁面上的連接能夠被查詢；

　　設定爲nofollow：文件將不被檢索，頁面上的連接能夠被查詢。

HTTP-EQUIV

　　HTTP-EQUIV相似於HTTP的頭部協議，它迴應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容。經常使用的HTTP-EQUIV類型有：

一、Content-Type和Content-Language (顯示字符集的設定)

　　說明：設定頁面使用的字符集，用以說明主頁製做所使用的文字已經語言，瀏覽器會根據此來調用相應的字符集顯示page內容。

　　用法：

<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312"> <Meta http-equiv="Content-Language" Content="zh-CN">

H5中能夠簡化爲

<meta charset="utf-8">

　　注意：　該META標籤訂義了HTML頁面所使用的字符集爲GB2132，就是國標漢字碼。若是將其中的「charset=GB2312」替換成「BIG5」，則該頁面所用的字符集就是繁體中文Big5碼。當你瀏覽一些國外的站點時，IE瀏覽器會提示你要正確顯示該頁面須要下載xx語支持。這個功能就是經過讀取HTML頁面META標籤的Content-Type屬性而得知須要使用哪一種字符集顯示該頁面的。若是系統裏沒有裝相應的字符集，則IE就提示下載。其餘的語言也對應不一樣的charset，好比日文的字符集是「iso-2022-jp 」，韓文的是「ks_c_5601」。
　　　　　　
　　Content-Type的Content還能夠是：text/xml等文檔類型；
　　Charset選項：ISO-8859-1(英文)、BIG五、UTF-八、SHIFT-Jis、Euc、Koi8-二、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集；Content-Language的Content還能夠是：EN、FR等語言代碼。

二、Refresh (刷新)

　　　說明：讓網頁多長時間（秒）刷新本身，或在多長時間後讓網頁自動連接到其它網頁。
　　　用法：

<Meta http-equiv="Refresh" Content="30"> <Meta http-equiv="Refresh" Content="5; Url=http://www.xia8.net">

　　　注意：其中的5是指停留5秒鐘後自動刷新到URL網址。

三、Expires (期限)

　　　說明：指定網頁在緩存中的過時時間，一旦網頁過時，必須到服務器上從新調閱。
　　　用法：<Meta http-equiv="Expires" Content="0">
　　　　　　<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
　　　注意：必須使用GMT的時間格式，或直接設爲0(數字表示多少時間後過時)。

四、Pragma (cach模式)

　　　說明：禁止瀏覽器從本地機的緩存中調閱頁面內容。
　　　用法：<Meta http-equiv="Pragma" Content="No-cach">
　　　注意：網頁不保存在緩存中，每次訪問都刷新頁面。這樣設定，訪問者將沒法脫機瀏覽。

　五、Set-Cookie (cookie設定)

　　說明：瀏覽器訪問某個頁面時會將它存在緩存中，下次再次訪問時就可從緩存中讀取，以提升速度。當你但願訪問者每次都刷新你廣告的圖標，或每次都刷新你的計數器，就要禁用緩存了。一般HTML文件沒有必要禁用緩存，對於ASP等頁面，就可使用禁用緩存，由於每次看到的頁面都是在服務器動態生成的，緩存就失去意義。若是網頁過時，那麼存盤的cookie將被刪除。
　　　用法：<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,
　　　　　　 21-Oct-98 16:14:21 GMT; path=/">
　　　注意：必須使用GMT的時間格式。

六、Window-target (顯示窗口的設定)

　　　說明：強制頁面在當前窗口以獨立頁面顯示。
　　　用法：<Meta http-equiv="Window-target" Content="_top">
　　　注意：這個屬性是用來防止別人在框架裏調用你的頁面。Content選項：_blank、_top、_self、_parent。

七、Pics-label (網頁RSAC等級評定) ps:這個之前還真不知道
　　　說明：在IE的Internet選項中有一項內容設置，能夠防止瀏覽一些受限制的網站，而網站的限制級
　　　　　　別就是經過該參數來設置的。
　　　用法：<META http-equiv="Pics-label" Contect=
　　　　　　　　　　　　　　　"(PICS－1.1'http://www.rsac.org/ratingsv01.html'
　　　　　　 I gen comment 'RSACi North America Sever' by 'inet@microsoft.com'
　　　　　　　for 'http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0))">

注意：不要將級別設置的過高。RSAC的評估系統提供了一種用來評價Web站點內容的標準。用戶能夠設置Microsoft Internet Explorer（IE3.0以上）來排除包含有色情和暴力內容的站點。上面這個例子中的HTML取自Microsoft的主頁。代碼中的（n 0 s 0 v 0 l 0）表示該站點不包含不健康內容。級別的評定是由RSAC，即美國娛樂委員會的評級機構評定的，若是你想進一步瞭解RSAC評估系統的等級內容，或者你需要評價本身的網站，能夠訪問RSAC的站點：http://www.rsac.org/。

八、Page-Enter、Page-Exit (進入與退出)

　　　說明：這個是頁面被載入和調出時的一些特效。
　　　用法：<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
　　　　　　<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
　　　注意：blendTrans是動態濾鏡的一種，產生漸隱效果。另外一種動態濾鏡RevealTrans也能夠用於頁面進入與退出效果:

　　　　　　　Duration　　表示濾鏡特效的持續時間(單位：秒)
　　　　　　　Transition　濾鏡類型。表示使用哪一種特效，取值爲0-23。

　　　　　　　0 矩形縮小
　　　　　　　1 矩形擴大
　　　　　　　2 圓形縮小
　　　　　　　3 圓形擴大
　　　　　　　4 下到上刷新
　　　　　　　5 上到下刷新
　　　　　　　6 左到右刷新
　　　　　　　7 右到左刷新
　　　　　　　8 豎百葉窗
　　　　　　　9 橫百葉窗
　　　　　　 10 錯位橫百葉窗
　　　　　　 11 錯位豎百葉窗
　　　　　　 12 點擴散
　　　　　　 13 左右到中間刷新
　　　　　　 14 中間到左右刷新
　　　　　　 15 中間到上下
　　　　　　 16 上下到中間
　　　　　　 17 右下到左上
　　　　　　 18 右上到左下
　　　　　　 19 左上到右下
　　　　　　 20 左下到右上
　　　　　　 21 橫條
　　　　　　 22 豎條
　　　　　　 23 以上22種隨機選擇一種

　　九、MSThemeCompatible (XP主題)
　　　說明：是否在IE中關閉 xp 的主題
　　　用法：<Meta http-equiv="MSThemeCompatible" Content="Yes">
　　　注意：關閉 xp 的藍色立體按鈕系統顯示樣式，從而和win2k 很象。

　　十、IE6 (頁面生成器)
　　　說明：頁面生成器generator，是ie6
　　　用法：<Meta http-equiv="IE6" Content="Generator">
　　　注意：用什麼東西作的，相似商品出廠廠商。

　　十一、Content-Script-Type (腳本相關)
　　　說明：這是近來W3C的規範，指明頁面中腳本的類型。
　　　用法：<Meta http-equiv="Content-Script-Type" Content="text/javascript">
　　　注意：

移動端特有屬性

viewport

可視區域的定義，如屏幕縮放等。告訴瀏覽器如何規範的渲染網頁。

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

format-detection

對電話號碼的識別

<meta name="format-detection" content="telphone=no" />

IOS私有屬性

apple-mobile-web-app-capable

啓用 webapp 模式, 會隱藏工具欄和菜單欄，和其它配合使用。

<meta name="apple-mobile-web-app-capable" content="yes" />

apple-mobile-web-app-status-bar-style

在webapp模式下，改變頂部狀態條的顏色。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

default(白色，默認) | black(黑色) | black-translucent(半透明)

注意：若值爲「black-translucent」將會佔據頁面位置，浮在頁面上方（會覆蓋頁面 20px 高度， Retina 屏幕爲 40px ）。

此外；附上一些移動端關於meta的細節用法

1. 添加到主屏後的標題（IOS）

<meta name="apple-mobile-web-app-title" content="標題">

2. 啓用 WebApp 全屏模式（IOS）

當網站添加到主屏幕後再點擊進行啓動時，可隱藏地址欄（從瀏覽器跳轉或輸入連接進入並無此效果）

<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />

3. 百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，很是之噁心。不過咱們能夠經過這個meta標籤來禁止它：

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

百度SiteApp轉碼聲明

4. 設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content 參數：

default ：狀態欄背景是白色。
black ：狀態欄背景是黑色。
black-translucent ：狀態欄背景是半透明。若是設置爲 default 或 black ,網頁內容從狀態欄底部開始。若是設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

5. 移動端手機號碼識別（IOS）

在 iOS Safari （其餘瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：

7位數字，形如：1234567
帶括號及加號的數字，形如：(+86)123456789
雙鏈接線的數字，形如：00-00-00111
11位數字，形如：13800138000

可能還有其餘類型的數字也會被識別。咱們能夠經過以下的meta來關閉電話號碼的自動識別：

<meta name="format-detection" content="telephone=no" />

開啓電話功能

<a href="tel:123456">123456</a>

開啓短信功能：

<a href="sms:123456">123456</a>

6. 移動端郵箱識別（Android）

與電話號碼的識別同樣，在安卓上會對符合郵箱格式的字符串進行識別，咱們能夠經過以下的meta來管別郵箱的自動識別：

<meta content="email=no" name="format-detection" />

一樣地，咱們也能夠經過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

8. IOS Web app啓動動畫

因爲iPad 的啓動畫面是不包括狀態欄區域的。因此啓動圖片須要減去狀態欄區域所對應的方向上的20px大小，相應地在retina設備上要減去40px的大小

<!-- iPhone --> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) --> <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) --> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (Retina, landscape) --> <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

（landscape：橫屏 | portrait：豎屏）

9. 添加到主屏後的APP圖標

指定web app添加到主屏後的圖標路徑，有兩種略微不一樣的方式：

<!-- 設計原圖 --> <link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"> <!-- 添加高光效果 --> <link href="short_cut_114x114.png" rel="apple-touch-icon">

* apple-touch-icon：在IOS6及如下的版本會自動爲圖標添加一層高光效果（IOS7開始已使用扁平化的設計風格） * apple-touch-icon-precomposed：使用「設計原圖圖標」

效果：

圖標尺寸：

可經過指定size屬性來爲不一樣的設備提供不一樣的圖標（但一般來講，咱們只需提供一個114 x 114 pixels大小的圖標便可）

官方說明以下

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes. For iPhone and iPod touch both of these sizes are required: 57 x 57 pixels 114 x 114 pixels (high resolution) For iPad, both of these sizes are required: 72 x 72 pixels 144 x 144 (high resolution)

10. 優先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

11.viewport模板

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>標題</title> <link rel="stylesheet" href="index.css"> </head> <body> 這裏開始內容 </body> </html>

相關標籤/搜索