溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html中的meta標(biāo)簽如何使用

發(fā)布時(shí)間:2022-03-05 15:59:12 來(lái)源:億速云 閱讀:153 作者:iii 欄目:web開(kāi)發(fā)

本篇內(nèi)容介紹了“html中的meta標(biāo)簽如何使用”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!

meta標(biāo)簽介紹

meta標(biāo)簽是HTML語(yǔ)言head區(qū)域的一個(gè)輔助性標(biāo)簽,常用于定義頁(yè)面的說(shuō)明,關(guān)鍵字,最后修改的日期和其他的元數(shù)據(jù)。這些元數(shù)據(jù)將服務(wù)于瀏覽器,搜索引擎和其他網(wǎng)絡(luò)服務(wù)。

meta標(biāo)簽的組成

meta標(biāo)簽共有兩個(gè)屬性,分別是http-equiv屬性和name屬性。

name屬性

name屬性主要是用于描述網(wǎng)頁(yè),比如網(wǎng)頁(yè)的關(guān)鍵詞,敘述等。與之對(duì)應(yīng)的屬性值為content,content中的內(nèi)容是對(duì)name填入類(lèi)型的具體描述,便于搜索引擎抓取。

meta標(biāo)簽中name屬性語(yǔ)法格式是:

1

<meta name="參數(shù)" content="具體的描述">

其中name屬性共有以下幾種參數(shù)。(A-C為常用屬性)

(1) keywords(關(guān)鍵字)

說(shuō)明:用于告訴搜索引擎,你網(wǎng)頁(yè)的關(guān)鍵字。舉例:

1

<meta name="keywords" content="PHP中文網(wǎng)">

(2)description(網(wǎng)站內(nèi)容的描述)

說(shuō)明:用于告訴搜索引擎,你網(wǎng)站的主要內(nèi)容。舉例:

1

<meta name="description" content="php中文網(wǎng)提供大量免費(fèi)、原創(chuàng)、高清的php視頻教程">

(3)viewport(移動(dòng)端的窗口)

說(shuō)明:這個(gè)概念較為復(fù)雜,具體的會(huì)在下篇博文中講述。這個(gè)屬性常用于設(shè)計(jì)移動(dòng)端網(wǎng)頁(yè)。在用bootstrap,AmazeUI等框架時(shí)候都有用過(guò)viewport。

1

<meta name="viewport" content="width=device-width, initial-scale=1">

(4) robots(定義搜索引擎爬蟲(chóng)的索引方式)

說(shuō)明:robots用來(lái)告訴爬蟲(chóng)哪些頁(yè)面需要索引,哪些頁(yè)面不需要索引。content的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。

1

<meta name="robots" content="none">

具體參數(shù)如下:

1、none : 搜索引擎將忽略此網(wǎng)頁(yè),等價(jià)于noindex,nofollow。
2、noindex : 搜索引擎不索引此網(wǎng)頁(yè)。
3、nofollow: 搜索引擎不繼續(xù)通過(guò)此網(wǎng)頁(yè)的鏈接索引搜索其它的網(wǎng)頁(yè)。
4、all : 搜索引擎將索引此網(wǎng)頁(yè)與繼續(xù)通過(guò)此網(wǎng)頁(yè)的鏈接索引,等價(jià)于index,follow。
5、index : 搜索引擎索引此網(wǎng)頁(yè)。
6、follow : 搜索引擎繼續(xù)通過(guò)此網(wǎng)頁(yè)的鏈接索引搜索其它的網(wǎng)頁(yè)。

(5)author(作者)

說(shuō)明:用于標(biāo)注網(wǎng)頁(yè)作者舉例:

1

<meta name="author" content="PHP中文網(wǎng)">

(6) generator(網(wǎng)頁(yè)制作軟件)

說(shuō)明:用于標(biāo)明網(wǎng)頁(yè)是什么軟件做的舉例: (不知道能不能這樣寫(xiě)):

1

<meta name="generator" content="Sublime Text3">

(7)copyright(版權(quán))

說(shuō)明:用于標(biāo)注版權(quán)信息舉例:

1

<meta name="copyright" content="PHP中文網(wǎng)"> //代表該網(wǎng)站為PHP中文網(wǎng)個(gè)人版權(quán)所有。

(8)revisit-after(搜索引擎爬蟲(chóng)重訪時(shí)間)

說(shuō)明:如果頁(yè)面不是經(jīng)常更新,為了減輕搜索引擎爬蟲(chóng)對(duì)服務(wù)器帶來(lái)的壓力,可以設(shè)置一個(gè)爬蟲(chóng)的重訪時(shí)間。如果重訪時(shí)間過(guò)短,爬蟲(chóng)將按它們定義的默認(rèn)時(shí)間來(lái)訪問(wèn)。舉例:

1

<meta name="revisit-after" content="7 days" >

(9)renderer(雙核瀏覽器渲染方式)

說(shuō)明:renderer是為雙核瀏覽器準(zhǔn)備的,用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁(yè)面。比如說(shuō)360瀏覽器。舉例:

1

2

3

<meta name="renderer" content="webkit"> //默認(rèn)webkit內(nèi)核

<meta name="renderer" content="ie-comp"> //默認(rèn)IE兼容模式

<meta name="renderer" content="ie-stand"> //默認(rèn)IE標(biāo)準(zhǔn)模式

http-equiv屬性

http-equiv顧名思義,相當(dāng)于HTTP的作用。

meta標(biāo)簽中http-equiv屬性語(yǔ)法格式是:

1

<meta http-equiv="參數(shù)" content="具體的描述">

其中http-equiv屬性主要有以下幾種參數(shù):

(1) content-Type(設(shè)定網(wǎng)頁(yè)字符集)(推薦使用HTML5的方式)

說(shuō)明:用于設(shè)定網(wǎng)頁(yè)字符集,便于瀏覽器解析與渲染頁(yè)面舉例:

1

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //舊的HTML,不推薦

1

<meta charset="utf-8"> //HTML5設(shè)定網(wǎng)頁(yè)字符集的方式,推薦使用UTF-8

(2)X-UA-Compatible(瀏覽器采取何種版本渲染當(dāng)前頁(yè)面)

說(shuō)明:用于告知瀏覽器以何種版本來(lái)渲染頁(yè)面。(一般都設(shè)置為最新模式,在各大框架中這個(gè)設(shè)置也很常見(jiàn)。)

1

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當(dāng)前頁(yè)面

(3) cache-control(指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制)

說(shuō)明:指導(dǎo)瀏覽器如何緩存某個(gè)響應(yīng)以及緩存多長(zhǎng)時(shí)間

1

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

共有以下幾種用法:

no-cache: 先發(fā)送請(qǐng)求,與服務(wù)器確認(rèn)該資源是否被更改,如果未被更改,則使用緩存。

no-store: 不允許緩存,每次都要去服務(wù)器上,下載完整的響應(yīng)。(安全措施)

public : 緩存所有響應(yīng),但并非必須。因?yàn)閙ax-age也可以做到相同效果

private : 只為單個(gè)用戶緩存,因此不允許任何中繼進(jìn)行緩存。(比如說(shuō)CDN就不允許緩存private的響應(yīng))

maxage : 表示當(dāng)前請(qǐng)求開(kāi)始,該響應(yīng)在多久內(nèi)能被緩存和重用,而不去服務(wù)器重新請(qǐng)求。例如:max-age=60表示響應(yīng)可以再緩存和重用 60 秒。

禁止百度自動(dòng)轉(zhuǎn)碼

說(shuō)明:用于禁止當(dāng)前頁(yè)面在移動(dòng)端瀏覽時(shí),被百度自動(dòng)轉(zhuǎn)碼。雖然百度的本意是好的,但是轉(zhuǎn)碼效果很多時(shí)候卻不盡人意。所以可以在head中加入例子中的那句話,就可以避免百度自動(dòng)轉(zhuǎn)碼了。

1

<meta http-equiv="Cache-Control" content="no-siteapp" />

(4)expires(網(wǎng)頁(yè)到期時(shí)間)

說(shuō)明:用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間,過(guò)期后網(wǎng)頁(yè)必須到服務(wù)器上重新傳輸。

1

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

(5) refresh(自動(dòng)刷新并指向某頁(yè)面)

說(shuō)明:網(wǎng)頁(yè)將在設(shè)定的時(shí)間內(nèi),自動(dòng)刷新并調(diào)向設(shè)定的網(wǎng)址。

1

<meta http-equiv="refresh" content="2;URL=http://www.php.cn/"> //意思是2秒后跳轉(zhuǎn)到PHP中文網(wǎng)

(6) Set-Cookie(cookie設(shè)定)

說(shuō)明:如果網(wǎng)頁(yè)過(guò)期。那么這個(gè)網(wǎng)頁(yè)存在本地的cookies也會(huì)被自動(dòng)刪除。

1

2

<meta http-equiv="Set-Cookie" content="name, date"> //格式

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體范例

“html中的meta標(biāo)簽如何使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI