HTML-meta標簽詳解

先附上幾篇網(wǎng)上查找的關(guān)于meta標簽的資料、文章,看完這個幾篇文章后,會對meta標簽有一定的了解!
HTML meta標簽總結(jié)與屬性使用介紹
html5手機網(wǎng)站需要加的那些meta/link標簽,html5 meta全解

下邊這些內(nèi)容是對一些資料進行了整理,因為有的文章由于廣告或者頁面排版看起來不是很舒服,所以對一些介紹meta標簽比較全面的文章進行了整理。內(nèi)容會有重復或者沖突,僅供參考?。?!

第一篇
META的屬性有三個:name,http-equiv和content
  先說Name和Content:
  META的NAME屬性就說說明當前的META標簽是什么類型,以便于搜索引擎抓取,索引網(wǎng)頁。相應的Content就是告訴搜索引擎相關(guān)的信息。
  打個比方<meta name= keywords content= meta />這行代碼的意思就是說:這個網(wǎng)頁的關(guān)鍵詞是meta”
  Name的常用取值有下面幾種
  1、Keywords:關(guān)鍵字,即告訴搜索引擎,這個網(wǎng)頁的主題是什么。示例:<meta name= Keywords Content= 關(guān)鍵字,關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3,...,... />
  每個關(guān)鍵字之間,應該用用英文的逗號,”分隔開。
  當數(shù)個META元素提供文檔語言從屬信息時,搜索引擎會使用lang特性來過濾并通過用戶的語言優(yōu)先參照來顯示搜索結(jié)果。例如:
  <meta name= Kyewords Content= vacation,greece,sunshine >
  <meta name= Kyewords Content= vacances,grè:ce,soleil >
  2、Description:簡介,即告訴搜索引擎,這個網(wǎng)頁的大致內(nèi)容。就好像Keywords是手機,Description再詳細說一下手機的大體功能、優(yōu)勢等等。
  示例:<meta name= Description Content= 這個網(wǎng)頁講述了的META用法... >
  3、Robots:純粹寫給搜索引擎看的,因為Keywords和Description,人類還可以看懂,而Robots是非專業(yè)人士所無法理解的。
  當name為Robots時,Content可選參數(shù)有
  index:當前頁面可以被抓取
  follow:被當前頁面內(nèi)所鏈接的頁面可以抓取
  noindex:當前頁面不可以被抓取
  nofollow:被當前頁面內(nèi)所鏈接的頁面不可以抓取
  由于Content的內(nèi)容可以是雙選的,例如CONTENT= INDEX,FOLLOW ,所以上述這四個參數(shù),共可以組成4種不同的雙選結(jié)果。
  其中
  <META NAME= Robots CONTENT= index,follow />可以寫成<META NAME= Robots CONTENT= all />
  <META NAME= Robots CONTENT= noindex,nofollow />可以寫成<META NAME= Robots CONTENT= none />
  4、Author:作者,即告訴搜索引擎,這個頁面的作者是誰,一般那種文章性質(zhì)的頁面,這個屬性被應用得比較多。
  示例<meta name= Author Content= czBin,11year@Gmail.com >
  5、Copyright:版權(quán),告訴搜索引擎,這個頁面的版權(quán)是屬于誰的。
  示例:<meta name= Copyright Content= 版權(quán)信息 >
  6、Generator:制作軟件,難道搜索引擎連這個也需要知道?用FrontPage和Dreamweaver制作出的頁面,抓取方式不同嗎?
  示例:<meta name= Generator Content= PCDATA|FrontPage| >
  7、revisit-after:更新時間,即告訴搜索引擎,這個頁面多長時間會更新,到時候,需要來重新抓取示例:<META name= revisit-after CONTENT= 2 days >
  再說HTTP-EQUIV:
  META的HTTP-EQUIV屬性,其作用類似于HTTP頭協(xié)議,它會告訴瀏覽器一些關(guān)于字符設定,頁面刷新,cookie,和緩存等等相關(guān)信息。
  常用的HTTP-EQUIV取值有如下11種:

1、Content-Type:聲明頁面所適用的的字符集,以及頁面文檔屬性。示例:
  <meta http-equiv= Content-Type Content= text/html; Charset=gb2312 >'
  告訴瀏覽器,該頁面為HTML類文檔,并且,適用gb2312(中文)作為默認字符。

2、Refresh:設置頁面刷新或自動跳轉(zhuǎn)的時間
。示例
:
  <meta http-equiv= Refresh Content= 60 >
  Content= 60 的意思是說,60秒后,頁面刷新
  <meta http-equiv= Refresh Content= 10; Url=http://www.isinwin.cn >
  Content= 10 的意思是說,10秒后,網(wǎng)頁將自動跳轉(zhuǎn)。

3、Expires:設定網(wǎng)頁的過期時間,當網(wǎng)頁過期后,必須重新讀取頁面信息
。示例
:
  <meta http-equiv= Expires Content= Fri, 15 Jun 2007 01:13:13 GMT >
  <meta http-equiv= Expires Content= 0 >
  時間格式必須為GMT標準時間,Content設置為0則代表該網(wǎng)頁永不過期。

4、Pragma:禁止瀏覽器緩存網(wǎng)頁。示例:
  <meta http-equiv= Pragma Content= No-cach >
  禁止瀏覽器緩存頁面(但是瀏覽者同樣可以保存頁面)

5、Set-Cookie :設定cookie的過期時間。示例:
  <meta http-equiv= Set-Cookie Content= cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/ >

6、Window-target:強制頁面在當前窗口以獨立頁面顯示
。示例
:
  <meta http-equiv= Widow-target Content= _top >
  這個屬性是用來防止別人在框架里調(diào)用你的頁面。Content選項:_blank、_top、_self、_parent。


第二篇
name屬性
<-- 頁面作者 -->
<meta name="author" content="author name" />
<-- 頁面描述 -->
<meta name="description" content="meta元素共有三個可選屬性(不超過150字符)" />
<-- 頁面關(guān)鍵詞 -->
<meta name="keywords" content="meta標簽總結(jié),meta標簽" />
<-- 頁面生成器 -->
<meta name="generator" content="hexo" />
<-- 頁面修改信息 -->
<meta name="revised" content="story,2015/07/22" />
<-- 版權(quán)信息 -->
<meta name="copyright" content="All Rights Reserved" />
<-- 頁面爬蟲設置 -->
<meta name="robots" content="index,follow" />
<-- robots的content取值 -->
<-- all:文件將被檢索,且頁面上的鏈接可以被查詢 -->
<-- none:文件將不被檢索,且頁面上的鏈接不可以被查詢 -->
<-- index:文件將被檢索 -->
<-- follow:頁面上的鏈接可以被查詢 -->
<-- noindex:文件將不被檢索,但頁面上的鏈接可以被查詢 -->
<-- nofollow:文件將被檢索,但頁面上的鏈接不可以被查詢 -->
http-equiv
<-- 字符編碼 -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<-- 頁面到期時間 -->
<meta http-equiv="expire" content="Wed,22Jul201511:11:11GMT" />
<-- 頁面重刷新,0秒后刷新并跳轉(zhuǎn) -->
<meta http-equiv="refresh" content="0;URL=''" />
<-- cookie設置 -->
<meta http-equiv="set-cookie" content="cookie value=xxx;expires=Wed,22-Jul-201511:11:11GMT;path=/" />
<-- 腳本類型 -->
<meta http-equiv="Content-Script-Type"Content="text/javascript">
<-- 禁止從本地緩存中讀取頁面 -->
<meta http-equiv="Pragma"content="no-cache">
移動端
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<-- viewport的content取值 -->
<-- width:寬度(數(shù)值 / device-width)(200~10000,默認為980px) -->
<-- height:高度(數(shù)值 / device-height)(223~10000) -->
<-- initial-scale:初始縮放比例 (0~10) -->
<-- minimum-scale:允許用戶縮放到的最小比例 -->
<-- maximum-scale:允許用戶縮放到的最大比例 -->
<-- user-scalable:是否允許用戶縮放 (no/yes) -->

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

<-- IOS啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<-- IOS全屏模式下隱藏狀態(tài)欄/設置狀態(tài)欄顏色 content的值為default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<-- IOS添加到主屏后的標題 -->
<meta name="apple-mobile-web-app-title" content="標題">
<-- IOS添加智能 App 廣告條 Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<-- 去除iphone 識別數(shù)字為號碼 -->
<meta name="format-detection" content="telephone=no">
<-- 不識別郵箱 -->
<meta name="format-detection" content="email=no">
<-- 禁止跳轉(zhuǎn)至地圖 -->
<meta name="format-detection" content="adress=no">
<-- 可以連寫-->
<meta name="format-detection" content="telephone=no,email=no,adress=no">

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,197評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,415評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,104評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,884評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,647評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,130評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,208評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,366評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,887評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,737評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,939評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,478評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,174評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,586評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,827評論 1 283
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,608評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,914評論 2 372

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

  • (注1:如果有問題歡迎留言探討,一起學習!轉(zhuǎn)載請注明出處,喜歡可以點個贊哦!)(注2:更多內(nèi)容請查看我的目錄。) ...
    love丁酥酥閱讀 921評論 2 3
  • 第一部分:Html Meta標簽的組成 Meta標簽的name屬性語法格式是:<meta name=”參數(shù)” co...
    嗝喯唲閱讀 979評論 0 0
  • meta ??元素可提供相關(guān)頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關(guān)...
    鹿守心畔光閱讀 687評論 0 2
  • meta的用途 我認為meta就好比網(wǎng)頁的明信片,它是網(wǎng)頁html文檔的從屬介紹屬性,那么當然一個網(wǎng)頁可以有多個m...
    JAZI閱讀 1,031評論 2 4
  • 之前學習前端中,對meta標簽的了解僅僅只是這一句。 <mate charset="UTF-8"> 但是打開任意的...
    唯愛述虞誰閱讀 586評論 0 1