meta標記的主要功能是定義頁面中的信息,這些信息並不會顯示在瀏覽器中,而只在源代碼中顯示。meta標記通過屬性定義文件信息的名稱、內容等,能夠提供文檔的關鍵字、作者及描述等多種信息,在HTML頭部可以包括任意數量的meta標記。
格式:<meta name="屬性名稱" content="屬性內容" />
1.定義頁面關鍵字(屬性名稱爲:keywords):是爲了向搜索引擎說明網頁的關鍵詞,從而幫助搜索引擎對該網頁進行查找和分類,它可以提高被搜索到的概率,有時搜索引擎在檢索時限制關鍵字的數量,因此在設置關鍵字時不要過多,關鍵字之間用逗號隔開。
語法:<meta name="keywords" content="關鍵字的內容" />
例如:<meta name="keywords" content="網頁,教程" />
2.定義頁面描述(屬性名稱爲:description):用來描述網頁的主題,與關鍵字一樣,是爲了便於搜索引擎的查找。
語法:<meta name="description" content="定義頁面描述內容" />
例如:<meta name="description" content="網頁製作教程網站" />
疑問:是否可以同1中的一樣,有多個頁面描述,然後用逗號隔開?
3.定義編輯工具(屬性名稱爲:generator):越來越多的可視化軟件也可以製作網頁,在源代碼的頭部中可以設置網頁編輯軟件的名稱。
語法:<meta name="generator" content="定義編輯工具的名稱" />
例如:<meta name="generator" content="Dreamwaver" />
疑問:是否可以同1中的一樣,有多個編輯工具, 然後用逗號隔開?
4.定義作者信息(屬性名稱爲:author):可以定義作者的姓名及個人信息。
語法:<meta name="author" content="作者的姓名" />
例如:<meta name="author" content="風葉" />
疑問:是否可以同1中的一樣,有多個作者, 然後用逗號隔開?
5.限制搜索方式(屬性名稱爲:robots):可以限制搜索引擎搜索當前網頁的方式。
語法:<meta name="robots" content="搜索方式" />
屬性值 |
說明 |
all | 能搜索當前網頁及其鏈接的網頁 |
index | 能搜索當前網頁 |
nofollow | 不能搜索與當前網頁鏈接的網頁 |
noindex | 不能搜索當前網頁 |
none | 不能搜索當前網頁及與其鏈接的網頁 |
例如:<meta name="robots" content="index" />
疑問:是否可以同1中的一樣,有多個多個取值方式, 然後用逗號隔開?還有index下,是否不能搜索與當前網頁鏈接的網頁?
6.定義網頁文字及語言(無屬性名稱,這個比較特殊~):可以設置語言的編碼方式,這樣瀏覽器可以正確地選擇語言,而不需要人工選取。
語法:<meta http-equiv="content-type" content="text/html;charset=字符集類型" />
說明:http-equiv用於傳送HTTP通信協議的標頭,而在content中才是具體的屬性值。charset用於設置網頁的內碼語系,也就是字符集的類型,國內常用的是GB碼,charset往往設置爲gb2312,即簡體中文。英文是ISO-8859-1字符集,此外還有其他的字符集。
例如:<meta http-equiv="content-type" content="text/html;charset=gb2312" />
疑問:content裏的設置是什麼意思呢?這裏爲什麼沒有屬性名稱的設置呢?
7.定義網頁的定時跳轉(無屬性名稱,這個也比較特殊~):就是在經過一段時間後,會自動轉到其他網頁中,這就是網頁的跳轉。
語法:<meta http-equiv="refresh" content="跳轉時間;URL=跳轉到的地址" />
說明:refresh表示設置網頁的刷新,而在content中給出了刷新的時間和刷新後的地址,時間和鏈接地址之間用分號。默認情況下,跳轉時間以秒爲單位。(不僅可以實現頁面之間的跳轉,而且可以完成頁面自身的自動刷新,但爲想效果不會很好的吧~)
例如:<meta http-equiv="refresh" content="5;URL=index.html" />
疑問:爲什麼沒有屬性名稱的設置呢?
8.定義網頁的過渡效果(無屬性名稱,這個也比較特殊~):是指當進入或離開網站時,頁面具有不同的切換效果,添加此功能可以使網頁看起來更具動感。(好像就ie支持的樣子,測試起來有些麻煩)
語法:<meta http-equiv="過渡事件" content="revealtrans(duration=過渡效果的持續時間,transition=過渡方式)" />
說明:過渡事件可以是進入頁面或者離開頁面,進入頁面的http-equiv值爲page-enter,離開的頁面的http-equiv值爲page-exist。過渡效果的持續時間默認情況下以秒爲單位,過渡方式取值如不表所示。
編號 | 過渡方式 | 編號 | 過渡方式 |
0 | 盒狀收縮 | 12 | 隨意溶解 |
1 | 盒狀放射 | 13 | 從左右兩端向中間展開 |
2 | 圓形收縮 | 14 | 從中間兩端向左右展開 |
3 | 圓形放射 | 15 | 從上下兩端向中間展開 |
4 | 由下往上 | 16 | 從中間兩端向上下展開 |
5 | 由上往下 | 17 | 從右下角向左下角展開 |
6 | 從左至右 | 18 | 從右下角向左上角展開 |
7 | 從右至左 | 19 | 從左上角向右下角展開 |
8 | 垂直百葉窗 | 20 | 從左上角向右上角展開 |
9 | 水平百葉窗 | 21 | 水平線狀展開 |
10 | 水平格狀百葉窗 | 22 | 垂直線狀展開 |
11 | 垂直格狀百葉窗 | 23 | 隨機產生一種過渡方式 |
例如:<meta http-equiv="page-enter" content="revealtrans(duration=5,transition=8)" />
疑問:content裏的設置是什麼意思呢,revealtrans是什麼呢,是否就ie支持的?