meta(常用總結(jié))

<meta>元素表示那些不能由其它HTML元相關(guān)元素 (<base>, <link>, <script>, <style><title>) 之一表示的任何元數(shù)據(jù)信息.

name屬性

----author

用來標(biāo)注網(wǎng)頁的作者

<meta name="author" content="myID" />
----description

用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。就是下面紅框中的內(nèi)容

<meta name="description" content="這是一個(gè)什么網(wǎng)站羽峰,里面有你想要的什么內(nèi)容" />
---referrer

控制所有從該文檔發(fā)出的 HTTP 請(qǐng)求中HTTP Referer 首部的內(nèi)容趟咆,動(dòng)態(tài)插入不生效

//不要發(fā)送 HTTP Referer 首部。
<meta name="referrer" content=“no-referrer”>

其他content值梅屉,參考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

----viewport

用于控制頁面縮放值纱,多用于響應(yīng)式頁面開發(fā)中

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no″ />
  • width:控制 viewport 的大小,可以指定的一個(gè)值坯汤,如果 600虐唠,或者特殊的值,如 device-width 為設(shè)備的寬度(單位為縮放為 100% 時(shí)的 CSS 的像素)惰聂。
  • height:和 width 相對(duì)應(yīng)疆偿,指定高度咱筛。
  • initial-scale:初始縮放比例,也即是當(dāng)頁面第一次 load 的時(shí)候縮放比例杆故。
  • maximum-scale:允許用戶縮放到的最大比例迅箩。
  • minimum-scale:允許用戶縮放到的最小比例。
  • user-scalable:用戶是否可以手動(dòng)縮放处铛,默認(rèn)值是yes沙热。如果你將其設(shè)置為no,那么minimum-scale 和 maximum-scale都將被忽略罢缸,因?yàn)楦静豢赡芸s放篙贸。
  • 所有的縮放值都必須在0.01–10的范圍之內(nèi)。
其他常用屬性
<!-- 聲明文檔使用的字符編碼 -->

<meta name="apple-mobile-web-app-title" content="標(biāo)題">
<!-- 添加到主屏后的標(biāo)題(iOS 6 新增) -->

<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否啟用 WebApp 全屏模式枫疆,刪除蘋果默認(rèn)的工具欄和菜單欄 -->

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) -->

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 設(shè)置蘋果工具欄顏色 -->

<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略頁面中的數(shù)字識(shí)別為電話爵川,忽略email識(shí)別 -->

 <!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對(duì)手持設(shè)備優(yōu)化,主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器息楔,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強(qiáng)制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強(qiáng)制全屏 -->
<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 點(diǎn)擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 圖標(biāo) begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch寝贡,默認(rèn) 57x57 像素,必須有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch值依,114x114 像素圃泡,可以沒有,但推薦有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad愿险,144x144 像素颇蜡,可以沒有,但推薦有 -->
<!-- iOS 圖標(biāo) end -->
 
<!-- iOS 啟動(dòng)畫面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 豎屏 768 x 1004(標(biāo)準(zhǔn)分辨率) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 豎屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 橫屏 1024x748(標(biāo)準(zhǔn)分辨率) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 橫屏 2048x1496(Retina) -->
 
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
<!-- iOS 啟動(dòng)畫面 end -->
 
<!-- iOS 設(shè)備 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁貼圖標(biāo) -->
 
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 訂閱 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->

http-equiv

http-equiv顧名思義辆亏,相當(dāng)于http的文件頭作用风秤,它可以向?yàn)g覽器傳回一些有用的信息,以幫助正確和精確地顯示網(wǎng)頁內(nèi)容扮叨,與之對(duì)應(yīng)的屬性值為content缤弦,content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。

---- Expires

可以用于設(shè)定網(wǎng)頁的到期時(shí)間彻磁。一旦網(wǎng)頁過期碍沐,必須到服務(wù)器上重新傳輸。日期必須是GMT格式衷蜓。

<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />
----refresh

自動(dòng)刷新并指向新頁面累提。

<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com">
----Window-target

強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示,用來防止別人在框架里調(diào)用自己的頁面恍箭。

<meta http-equiv="Window-target" content="_top"> 
----Pragma

是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容刻恭,設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出.這樣設(shè)定瞧省,訪問者將無法脫機(jī)瀏覽扯夭。

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

清除緩存(再訪問這個(gè)網(wǎng)站要重新下載w⒓帧)

<meta http-equiv="cache-control" content="no-cache">  
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市交洗,隨后出現(xiàn)的幾起案子骑科,更是在濱河造成了極大的恐慌,老刑警劉巖构拳,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咆爽,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡置森,警方通過查閱死者的電腦和手機(jī)斗埂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凫海,“玉大人呛凶,你說我怎么就攤上這事⌒刑埃” “怎么了漾稀?”我有些...
    開封第一講書人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)建瘫。 經(jīng)常有香客問我崭捍,道長(zhǎng),這世上最難降的妖魔是什么啰脚? 我笑而不...
    開封第一講書人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任殷蛇,我火速辦了婚禮,結(jié)果婚禮上橄浓,老公的妹妹穿的比我還像新娘晾咪。我一直安慰自己,他們只是感情好贮配,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開白布谍倦。 她就那樣靜靜地躺著,像睡著了一般泪勒。 火紅的嫁衣襯著肌膚如雪昼蛀。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評(píng)論 1 297
  • 那天圆存,我揣著相機(jī)與錄音叼旋,去河邊找鬼。 笑死沦辙,一個(gè)胖子當(dāng)著我的面吹牛夫植,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼详民,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼延欠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起沈跨,我...
    開封第一講書人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤由捎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后饿凛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狞玛,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年涧窒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了心肪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡纠吴,死狀恐怖蒙畴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情呜象,我是刑警寧澤膳凝,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站恭陡,受9級(jí)特大地震影響蹬音,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜休玩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一著淆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拴疤,春花似錦永部、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蜒犯,卻和暖如春组橄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背罚随。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來泰國(guó)打工玉工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人淘菩。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓遵班,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子狭郑,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5腹暖? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,474評(píng)論 1 45
  • Mobile Web Favorites 參與貢獻(xiàn) 移動(dòng)前端開發(fā)收藏夾愿阐,歡迎使用Issues以及 Pull Req...
    柴東啊閱讀 734評(píng)論 0 2
  • 文章參考: HTML meta標(biāo)簽總結(jié)與屬性使用介紹 和 HTML中的meta標(biāo)簽常用屬性及其作用總結(jié) 在ht...
    臥江流閱讀 2,214評(píng)論 0 1
  • meta是什么 是一個(gè)HTML的標(biāo)簽(輔助性標(biāo)簽)。它的位置位于文檔的頭部 標(biāo)簽之中趾疚。 meta的組成 meta標(biāo)...
    hcxowe閱讀 485評(píng)論 0 2
  • 常見的meta標(biāo)簽 定義和用法: 元素可提供有關(guān)頁面的元信息(meta-information)缨历,比如針對(duì)搜索引擎...
    PYFang閱讀 1,593評(píng)論 1 2