小編給大家分享一下html meta標(biāo)簽使用及屬性的案例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

淮陽ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

自學(xué)前端開始，我對(duì)meta標(biāo)簽接觸不多，主要把精力都集中在能顯示出來的標(biāo)簽上，比如span、button、h2等等。有時(shí)候去查看一些知名網(wǎng)站的源碼，發(fā)現(xiàn)head標(biāo)簽里有一大摞的meta。

今天就來學(xué)習(xí)一下meta的用處，看看有些啥屬性。

一、定義及作用

meta，即元數(shù)據(jù)（Metadata）是數(shù)據(jù)的數(shù)據(jù)信息。

該標(biāo)簽提供了 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在客戶端，但是會(huì)被瀏覽器解析。

通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時(shí)間，作者及其他元數(shù)據(jù)。

元數(shù)據(jù)可以被使用瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 Web 服務(wù)調(diào)用。

二、屬性

charset(htm5新增)	定義文檔的字符編碼
content	定義與 http-equiv 或 name 屬性相關(guān)的元信息。
http-equiv	http響應(yīng)頭
name	屬性名稱
scheme (htm5廢棄)	翻譯 content 屬性的值的方案

1、charset

HTML5新增的屬性，定義當(dāng)前頁面的字符編碼

新寫法：

<meta charset="UTF-8">

老寫法：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5中優(yōu)先用新寫法

2、name屬性

a、keywords，當(dāng)前網(wǎng)頁的關(guān)鍵字，便于搜索引擎識(shí)別，提高搜索準(zhǔn)確性

<meta name="keywords" content="cdn，網(wǎng)絡(luò)加速，運(yùn)營商">

b、description，對(duì)當(dāng)前網(wǎng)頁的簡單描述，如果用百度搜索的話，在搜索結(jié)果的每個(gè)標(biāo)題下面會(huì)顯示description的內(nèi)容，方便用戶快速定位

<meta name="description" content="本公司專注提供CDN網(wǎng)絡(luò)加速，同時(shí)也提供云計(jì)算服務(wù)">

c、viewport，這個(gè)meta有點(diǎn)復(fù)雜，主要用在移動(dòng)網(wǎng)頁中，需要單獨(dú)寫一篇文章，這里暫時(shí)略過

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

d、robots，搜索引擎爬蟲的索引方式

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

content的取值有all、none、index、noindex、follow、nofollow，默認(rèn)是all，具體的說明如表格所示：

all	文檔可以被索引，文檔中的鏈接可以被查詢
none	文檔不能被索引，同時(shí)文檔中的鏈接不能被查詢
index	文檔可以被索引
noindex	文檔不能被索引，但是文檔中的鏈接可以被查詢
follow	文檔中的鏈接可以被查詢
nofollow	文檔可以被索引，但是文檔中的鏈接不能被查詢

e、author，文檔的作者

<meta name="author" content="liuhw，liuhuansir@126.com">

f、copyright，文檔的版權(quán)說明

<meta name="copyright" content="liuhw">

g、revisit-after，搜索引擎爬蟲重訪的時(shí)間間隔，如果你的網(wǎng)站不經(jīng)常更新，那可以把這個(gè)時(shí)間設(shè)置的稍長一些，能略微的減輕服務(wù)器的壓力，節(jié)省帶寬資源

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

h、renderer，雙核瀏覽器的渲染方式，指定默認(rèn)用哪個(gè)瀏覽器內(nèi)核來渲染，例如360瀏覽器：

<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)模式

3、http-equiv

模擬http里的頭，回傳給服務(wù)器一些信息

a、expires，網(wǎng)頁的到期時(shí)間，過期之后，需要重新訪問服務(wù)器

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

b、pragma(兼容http1.0，1.1)，cache-control(http1.1新增)，設(shè)置緩存方式，建議用cache-control，該屬性的content具體參考http里的cache-control

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

c、refresh，自動(dòng)刷新并跳轉(zhuǎn)到content中聲明的url

<meta http-equiv="refresh" content="5；URL=http://www.liuhw.club/"> //5秒后跳轉(zhuǎn)向我自己的域名

d、set-cookie，添加cookie

<meta http-equiv="set-cookie" content="TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/">

e、content-Type，文檔的字符編碼，同charset，建議使用charset

<meta http-equiv="content-type" content="text/html;charset=gb2312">

f、x-ua-compatible，告訴瀏覽器用哪個(gè)版本來渲染文檔

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

以上是html meta標(biāo)簽使用及屬性的案例分析的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

本文名稱：htmlmeta標(biāo)簽使用及屬性的案例分析-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://aaarwkj.com/article8/ccpgop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站改版、軟件開發(fā)、網(wǎng)站收錄、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)