標籤:status 哪些 姓名 常見 imu 排序 add initial height
如果我們在瀏覽器中按下F12或者Ctrl+shift+J,便可以開啟開發人員工具,在element中即可看到<head>元素中有不少<meta>元素。對於網頁而言,<meta>元素是必不可少的。我們在建立一個html5文檔時,就會發現類似於<meta charset="UTF-8">這樣的標籤,來規定解析文檔的字元類型。那麼,它還有哪些作用呢?下面,我將一探究竟!我會通過下面幾個部分來講解,如果你希望直接看後面部分的內容,可以直接點擊下面的文字。
- <meta>標籤的基本介紹
- <meta>標籤中的屬性列舉
- <meta>標籤中的name屬性應用
- <meta>標籤中的http-equiv屬性應用
- <meta>標籤中在移動端的使用
第一部分:<meta>標籤的基本介紹
<meta>標籤是HTML網頁原始碼中的一個重要的html標籤。META便簽用來描述一個HTML網頁文檔的屬性,例如作者、日期和時間、關鍵詞、頁面重新整理。除此之外,<meta>標籤用於搜尋引擎最佳化(seo)。它位於HTML文檔中<head>元素內,雖然它提供的資訊使用者不可見,但它卻是文檔最基本的元資訊。
第二部分:<meta>標籤中的屬性列舉
<meta>標籤中屬性我們可以分為必選的屬性和可選的屬性。
1.必選屬性:content屬性。該屬性是為了定義與http-equiv或者name屬性相關的元資訊,其中的內容是為了便於搜尋機器人尋找資訊和分類使用的。
2.可選屬性:
- name屬性。該屬性主要用於描述網頁。name屬性的值可以有:author、description、keywords、generator等等
- http-equiv屬性。該屬性相當於http的標頭檔作用,可以向瀏覽器返回一些有用的資訊,以協助正確和精確的顯示內容。http-equiv屬性的值可以有content-type、expires、refresh等等。
第三部分:<meta>標籤中的name屬性應用
A keywords(關鍵字:告訴瀏覽器你的網頁的關鍵字是什麼) B description(描述:告訴瀏覽器你的網頁的主要內容是什麼)
這兩個屬性值我放在一起說,是因為它們的作用非常相似。因為設定這兩個值可以協助你的首頁被各大搜尋引擎登陸,提高網站的訪問量。於是這兩個屬性值的設定是格外重要的。因為按照搜尋引擎的工作原理,搜尋引擎會首先排除機器人自動檢索頁面中的keywords和description,並將其加入自己的資料庫,然後根據關鍵詞的密度將網站排序
我們可以像下面這樣使用:
12 |
<meta name= "keywords" content= "關於meta標籤,網頁,918之初" > <meta name= "description" content= "HTML中<meta>標籤如何正確使用" > |
注意:keywords的content內容要限制在36個字。
description的content內容要限制在76個字。
值得注意的是,name一定要和content屬性配合使用。
C robot(機器人嚮導:用於高速機器人哪些頁面需要索引,哪些頁面不需要索引)
該屬性的值有all、none、index、noindex、follow和nofollow。預設為all。
設定為all:檔案將被檢索,且頁面上的連結可以被查詢;
設定為none:檔案將不被檢索,且頁面上的連結不可以被查詢;
設定為index:檔案將被檢索;
設定為follow:頁面上的連結可以被查詢;
設定為noindex:檔案將不被檢索,但頁面上的連結可以被查詢;
設定為nofollow:檔案將不被檢索,頁面上的連結可以被查詢。
我們可以像下面這樣使用:
1 |
<meta name= "robot" content= "none" > |
即搜尋機器人在自動檢索頁面時,將不會檢索到這個頁面。
D author(用於告訴搜尋機器人網頁的作者)
1 |
<meta name= "author" content= "somebody" > |
第四部分:<meta>標籤中的http-equiv屬性應用
A.content-type(文檔內容類型:用於設定文檔的類型和字元集)
這是meta便簽中最為常見的一中設定,在製作網頁時,我們在純HTML代碼可看到它是定義你的網頁的語言,當瀏覽器訪問到你的網頁時,瀏覽器便會根據此來識別並進行相應的設定,否則,瀏覽器就會使用預設的設定方法。
1 |
<meta http-equiv= "content-type" content= "text/html; charset=UTF-8" > |
B.expires(期限:可以用於設定網頁的到期期限)
一旦網頁到期,那麼就必須在伺服器上重新重新整理而不能通過緩衝擷取網頁。值得注意的是:其中設定的時間必須是GMT格式。
1 |
<meta http-equiv= "expires" content= "Fri,12 Jan 2001 15:15:15 GMT" > |
如果你在瀏覽器中設定瀏覽器網頁先從本機快取中的頁面擷取,那麼當瀏覽時,就會只從本機快取擷取,直到meta中設定的時間到期,瀏覽器才會擷取新頁面。
C.pragma(cashe模式:即是否從緩衝中訪問網頁內容)
1 |
<meta http-equiv= "pragma" content= "no-cache" > |
這行代碼錶示不從緩衝擷取頁面,於是訪問者將無法離線工作。
D.refresh(重新整理:等待一定時間自動重新整理或跳轉到其他url)
1 |
<meta http-equiv= "refresh" content= "1; url=https://www.baidu.com" /> |
第五部分:<meta>標籤中在移動端的使用
這幾年,隨著移動端的興起,我們對移動端越來越需要進行專門的網頁設計,下面,我來介紹一些關於移動端布局中<meta>標籤的使用。
1.name屬性的viewport的值(移動端螢幕的縮放)
viewport也就是可視地區,就是出去所有工具列、狀態列、捲軸等等我們看網頁的地區。一般我們可以操控的屬性有width、height、initial-scale、minimum-scale、maxmum-scale、user-scalable。
舉例如下:
1 |
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> |
即:強制讓文檔與裝置的寬度保持1:1;文檔的其實比例和最大比例都是1.0。利用user-scalable=no定義使用者不可以通過手動縮放,使得頁面固定。
2.name屬性的format-detection值。
我們可以通過這個屬性禁止自動識別電話和郵箱。舉例如下:
1 |
<meta name= "format-detection" content= "telephone=no,email=no" /> |
這樣,是裝置瀏覽網頁時對數字不啟用電話功能(注意不同裝置的解釋可能不同),忽略將頁面中的數字識別為電話號碼。對郵箱同樣如此。
3.name屬性的apple-mobile-web-app-capable值(網站開啟對web app程式的支援)
1 |
<meta name= "app-mobile-web-app-capable" content= "yes" /> |
說明:1.網站開啟對web app的支援
2.該meta可以看出內容為”蘋果裝置web應用程式xx“,就是說該meta是專門定義web應用的。
4.name屬性的apple-mobile-web-app-status-bar-style值(改變頂部狀態條的顏色)
1 |
<meta name= "apple-mobile-web-app-status-bar-style" content= "black" /> |
說明:1.在web app應用下狀態條的顏色為黑色;
2.預設值為default(白色),可以定義為black(黑色)和black-translucent(灰色半透明);
5.name屬性設定作者姓名以及連絡方式
1 |
<meta name= "author" contect= "zzw, [email protected]" /> |
HTML中<meta>標籤如何正確使用