[移動web]了解移動web中的meta相關(guān)

移動設(shè)備相關(guān)

  • 0.視口
<!--視口設(shè)置-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  • 1.打開手機瀏覽器對webAPP全屏樣式支持
    • 注意:只有當頁面往下滑動時(手勢上拉)系瓢,頂部瀏覽器窗口才會隱藏(進入全屏)谅将,一旦往上滑動(手勢下拉)积暖,瀏覽器窗口就會出現(xiàn)去扣。
<!--打開手機瀏覽器對webAPP全屏樣式支持-->
    <meta name="apple-mobile-web-app-capable" content="yes">
  • 2.設(shè)置手機中狀態(tài)欄樣式
<!--設(shè)置手機中狀態(tài)欄樣式,為黑色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
  • 3.禁止網(wǎng)頁自動識別數(shù)字為電話號碼與郵箱
<!--設(shè)置不識別網(wǎng)頁中的數(shù)字為電話號碼宁改,也可以設(shè)置不識別郵箱-->
    <meta name="format-detection" content="telephone=no缕探,email=no">

其它 待續(xù)

  • SEO相關(guān)
 <!--告訴搜索引擎網(wǎng)頁的關(guān)鍵字是什么,SEO-->
    <meta name="Keywords" content="網(wǎng)上購物,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東商城">
    <!--告訴搜索引擎網(wǎng)頁的內(nèi)容是什么还蹲,SEO-->
    <meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,在線銷售家電爹耗、數(shù)碼、電腦谜喊、服裝潭兽、母嬰、圖書斗遏、食品等數(shù)萬個品牌商品.便捷山卦、誠信的服務(wù),為您提供愉悅的網(wǎng)上商城購物體驗! ">
  • 作者及其聯(lián)系方式
<!--告訴瀏覽器頁面作者-->
    <meta name="author" content="06xmgh5@126.com">
  • 流量統(tǒng)計
<meta name="data-spm" content="a215s">

一、概述
A诵次、http-equiv顧名思義账蓉,相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息逾一,以幫助正確和精確地顯示網(wǎng)頁內(nèi)容铸本,與之對應(yīng)的屬性值為content,content中的內(nèi)容其實就是各個參數(shù)的變量值遵堵。
B箱玷、Cache-control用于控制HTTP緩存(在HTTP/1.0中可能部分沒實現(xiàn),僅僅實現(xiàn)了Pragma: no-cache)
二、基本內(nèi)容

meat標簽的http-equiv屬性語法格式是:<meta http-equiv="參數(shù)" content="參數(shù)變量值"> 汪茧;其中http-equiv屬性主要有以下幾種參數(shù):

1椅亚、Expires(期限) 說明:可以用于設(shè)定網(wǎng)頁的到期時間限番。一旦網(wǎng)頁過期舱污,必須到服務(wù)器上重新傳輸。 用法:
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">
  注意:必須使用GMT的時間格式弥虐。
2扩灯、Pragma(cache模式)
說明:是用于設(shè)定禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容,設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出 用法:
<meta http-equiv="Pragma" content="no-cache">

注意:這樣設(shè)定霜瘪,訪問者將無法脫機瀏覽珠插。
3、Refresh(刷新)
說明:自動刷新并指向新頁面颖对。 用法:
<meta http-equiv="Refresh" content="2捻撑;URL=http://www.net.cn/">

注意:其中的2是指停留2秒鐘后自動刷新到URL網(wǎng)址。
4缤底、Set-Cookie(cookie設(shè)定)
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT顾患; path=/">

注意:必須使用GMT的時間格式。
5个唧、Window-target(顯示窗口的設(shè)定)
說明:強制頁面在當前窗口以獨立頁面顯示江解。 用法:
<meta http-equiv="Window-target" content="_top">

注意:用來防止別人在框架里調(diào)用自己的頁面。
6徙歼、content-Type(顯示字符集的設(shè)定)
說明:設(shè)定頁面使用的字符集犁河。 用法:
<meta http-equiv="content-Type" content="text/html; charset=gb2312">

7、Pics-label(網(wǎng)頁等級評定)
用法:
< meta http-equiv="Pics-label" contect="">

說明:在IE的internet選項中有一項內(nèi)容設(shè)置魄梯,可以防止瀏覽一些受限制的網(wǎng)站桨螺,而網(wǎng)站的限制級別就是通過meta屬性來設(shè)置的。
8酿秸、Page_Enter灭翔、Page_Exit
設(shè)定進入頁面時的特殊效果
< meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion=12)">

設(shè)定離開頁面時的特殊效果
< meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion= 12)">

Duration的值為網(wǎng)頁動態(tài)過渡的時間,單位為秒允扇。 ****Transition是過渡方式缠局,它的值為0到23,分別對應(yīng)24種過渡方式考润。如下表: 0 盒狀收縮 1 盒狀放射 2 圓形收縮 3 圓形放射 4 由下往上 5 由上往下 6 從左至右 7 從右至左 8 垂直百葉窗 9 水平百葉窗 10 水平格狀百葉窗 11垂直格狀百葉窗 12 隨意溶解 13從左右兩端向中間展開 14從中間向左右兩端展開 15從上下兩端向中間展開 16從中間向上下兩端展開 17 從右上角向左下角展開 18 從右下角向左上角展開 19 從左上角向右下角展開 20 從左下角向右上角展開 21 水平線狀展開 22 垂直線狀展開 23 隨機產(chǎn)生一種過渡方式
9狭园、清除緩存(再訪問這個網(wǎng)站要重新下載!)
< meta http-equiv="cache-control" content="no-cache">

具體用法

數(shù)據(jù)包中的格式:

Cache-Control: cache-directive

cache-directive可以為以下:

request時用到:

| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response時用到:

| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"
部分說明:
根據(jù)是否可緩存分為
Public  指示響應(yīng)可被任何緩存區(qū)緩存糊治。
Private  指示對于單個用戶的整個或部分響應(yīng)消息唱矛,不能被共享緩存處理。這允許服務(wù)器僅僅描述當用戶的
部分響應(yīng)消息,此響應(yīng)消息對于其他用戶的請求無效绎谦。
no-cache  指示請求或響應(yīng)消息不能緩存(HTTP/1.0用Pragma的no-cache替換)
根據(jù)什么能被緩存
no-store  用于防止重要的信息被無意的發(fā)布管闷。在請求消息中發(fā)送將使得請求和響應(yīng)消息都不使用緩存。
根據(jù)緩存超時
max-age  指示客戶機可以接收生存期不大于指定時間(以秒為單位)的響應(yīng)窃肠。
min-fresh  指示客戶機可以接收響應(yīng)時間小于當前時間加上指定時間的響應(yīng)包个。
max-stale  指示客戶機可以接收超出超時期間的響應(yīng)消息。如果指定max-stale消息的值冤留,那么客戶機可以
接收超出超時期指定值之內(nèi)的響應(yīng)消息碧囊。
Expires 表示存在時間,允許客戶端在這個時間之前不去檢查(發(fā)請求)纤怒,等同max-age的
效果糯而。但是如果同時存在,則被Cache-Control的max-age覆蓋泊窘。
格式:
Expires = "Expires" ":" HTTP-date
例如
Expires: Thu, 01 Dec 1994 16:00:00 GMT (必須是GMT格式)
 
2.應(yīng)用
通過HTTP的META設(shè)置expires和cache-control
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />
上述設(shè)置僅為舉例熄驼,實際使用其一即可。這樣寫的話僅對該網(wǎng)頁有效烘豹,對網(wǎng)頁中的圖片或其他請求無效瓜贾,并不會做任何cache。
這樣客戶端的請求就多了吴叶,盡管只是檢查Last-modified狀態(tài)的東西阐虚,但是請求一多對瀏覽速度必定有影響。
如果要對文件添加cache可以通過apache的mod_expire模塊蚌卤,寫法為
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 days"
</IfModule>
記得ExpiresActive設(shè)為On实束,我起先沒設(shè)置On,似乎怎樣YSlow都查不到緩存機制逊彭。這樣添加的話就是默認所有的咸灿。
如果要針對個別MIME類型則可以:
ExpiresByType image/gif "access plus 5 hours 3 minutes"
見 Apache Module mod_expires
另外,當點擊瀏覽器上的刷新侮叮,客戶端發(fā)送的請求中均是max-age=0避矢,表示validate操作,發(fā)送請求到服務(wù)器
要求檢查cache囊榜,再更新cache审胸,一般得到的是304 Not Modified,表示沒變動卸勺。

10砂沛、設(shè)定網(wǎng)頁的到期時間
< meta http-equiv="expires" content="0">

11、關(guān)鍵字,給搜索引擎用的
< meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

12.頁面描述
< meta http-equiv="description" content="This is my page">

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末曙求,一起剝皮案震驚了整個濱河市碍庵,隨后出現(xiàn)的幾起案子映企,更是在濱河造成了極大的恐慌,老刑警劉巖静浴,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件堰氓,死亡現(xiàn)場離奇詭異,居然都是意外死亡苹享,警方通過查閱死者的電腦和手機双絮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來富稻,“玉大人掷邦,你說我怎么就攤上這事白胀⊥指常” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵或杠,是天一觀的道長哪怔。 經(jīng)常有香客問我,道長向抢,這世上最難降的妖魔是什么认境? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮挟鸠,結(jié)果婚禮上叉信,老公的妹妹穿的比我還像新娘。我一直安慰自己艘希,他們只是感情好硼身,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著覆享,像睡著了一般佳遂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上撒顿,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天丑罪,我揣著相機與錄音,去河邊找鬼凤壁。 笑死吩屹,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的拧抖。 我是一名探鬼主播煤搜,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼徙鱼!你這毒婦竟也來了宅楞?” 一聲冷哼從身側(cè)響起针姿,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎厌衙,沒想到半個月后距淫,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡婶希,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年榕暇,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喻杈。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡彤枢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出筒饰,到底是詐尸還是另有隱情缴啡,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布瓷们,位于F島的核電站业栅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏谬晕。R本人自食惡果不足惜碘裕,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望攒钳。 院中可真熱鬧帮孔,春花似錦、人聲如沸不撑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽燎孟。三九已至禽作,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間揩页,已是汗流浹背旷偿。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留爆侣,地道東北人萍程。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像兔仰,于是被迫代替她去往敵國和親茫负。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

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

  • 1. meta標簽的組成 meta標簽共有兩個屬性乎赴,它們分別是http-equiv屬性和name屬性 1. nam...
    Maggie_77閱讀 496評論 1 1
  • 隨著html5的普及和Web技術(shù)的凈化忍法,從Windows XP的IE6到IE8潮尝、IE9、IE10饿序、IE11勉失,Edg...
    波段頂?shù)?/span>閱讀 2,204評論 1 1
  • meta ??元素可提供相關(guān)頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關(guān)...
    hx永恒之戀閱讀 676評論 0 2
  • (注1:如果有問題歡迎留言探討原探,一起學習乱凿!轉(zhuǎn)載請注明出處,喜歡可以點個贊哦Q氏摇)(注2:更多內(nèi)容請查看我的目錄徒蟆。) ...
    love丁酥酥閱讀 876評論 2 3
  • 站在風下面输莺, 看著它送來花的味道 甜甜的戚哎,濃濃的 等著等著就變了。 何時養(yǎng)成的習慣嫂用? 有它的地方就四處張望 像尋找...
    南緯以北的貓閱讀 172評論 0 0