html中的meta標籤是什麼？有哪些屬性？

html中meta的意思為“元”，是在head區域中的一個輔助性標籤，不包含任何內容，用於提供有關頁面的元信息，例如針對搜尋引擎和更新頻度的描述和關鍵字；meta標籤的屬性定義了與文件相關聯的名稱/值對。

html中的meta標籤是在head區域中的一個輔助性標籤，一般用於頁面的說明，關鍵字和其他元數據，這些數據將服務於瀏覽器，搜尋引擎等，它有4個屬性分別是name屬性、http-equiv屬性、content 屬性、scheme 屬性。

學前端的過程中對於meta標籤的了解大多都是這句，打開任意的網站我們都會看見這句話但是對於meta標籤卻不怎麼熟悉，接下來在文章中將為大家具體介紹這個標籤，具有一定的參考作用，希望對大家有幫助。

【推薦課程：HTML教學】

#meta標籤介紹

##meta標籤是HTML語言head區域的一個輔助性標籤，常用於定義頁面的說明，關鍵字，最後修改的日期和其他的元資料。這些元資料將服務於瀏覽器，搜尋引擎和其他網路服務。

meta標籤的組成

meta標籤共有兩個屬性，分別是http-equiv屬性和name屬性。

name屬性

name屬性主要是用來描述網頁，例如網頁的關鍵字，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，以便於搜尋引擎抓取。

meta標籤中name屬性語法格式是：

<meta name="参数" content="具体的描述">

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

（1） keywords(關鍵字)

說明：用來告訴搜尋引擎，你網頁的關鍵字。範例：

<meta name="keywords" content="PHP中文网">

（2）description(網站內容的描述)

說明：用來告訴搜尋引擎，你網站的主要內容。舉例：

<meta name="description" content="php中文网提供大量免费、原创、高清的php视频教程">

（3）viewport(行動端的視窗)

說明：這個概念較為複雜，具體的會在下篇部落格文章中講述。這個屬性常用於設計行動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

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

（4） robots(定義搜尋引擎爬蟲的索引方式)

說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。 content的參數有all,none,index,noindex,follow,nofollow。預設是all。

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

具體參數如下：

1、none : 搜尋引擎將忽略此網頁，等價於noindex，nofollow。

2、noindex : 搜尋引擎不索引此網頁。
3、nofollow: 搜尋引擎不會繼續透過此網頁的連結索引搜尋其它的網頁。
4、all : 搜尋引擎將索引此網頁與繼續透過此網頁的連結索引，等價於index，follow。
5、index : 搜尋引擎索引此網頁。
6、follow : 搜尋引擎繼續透過此網頁的連結索引搜尋其它的網頁。

（5）author(作者)

說明：用於標註網頁作者範例：

<meta name="author" content="PHP中文网">

（6） generator(網頁製作軟體)

說明：用來標示網頁是什麼軟體做的範例: (不知道能不能這樣寫)：

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

（7）copyright(版權)

說明：用於標註版權資訊範例：

<meta name="copyright" content="PHP中文网"> //代表该网站为PHP中文网个人版权所有。

#（8）revisit-after(搜尋引擎爬蟲重訪時間)

##說明：如果頁面不是經常更新，為了減輕搜尋引擎爬蟲對伺服器帶來的壓力，可以設定一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將依照它們定義的預設時間來存取。範例：

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

（9）renderer(雙核心瀏覽器渲染方式)##說明：renderer是為雙核心瀏覽器準備的，用於指定雙核心瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。範例：

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv屬性

#http-equiv顧名思義，相當於HTTP的作用。

meta標籤中http-equiv屬性語法格式是：

<meta http-equiv="参数" content="具体的描述">

其中http-equiv屬性主要有下列幾種參數：

（1） content- Type(設定網頁字元集)(建議使用HTML5的方式)

說明：用於設定網頁字元集，方便瀏覽器解析與渲染頁面範例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML，不推荐

<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

#（2）X-UA-Compatible(瀏覽器採取何種版本渲染目前頁面)

#說明：用於告知瀏覽器以何種版本來渲染頁面。 （一般都設定為最新模式，在各大框架中這個設定也很常見。）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

（3） cache-control(指定請求和回應遵循的快取機制)

#說明：指導瀏覽器如何快取某個回應以及快取多久

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

共有以下几种用法：

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）

public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果

private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）

maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

禁止百度自动转码

说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。

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

（4）expires(网页到期时间)

说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

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

（5） refresh(自动刷新并指向某页面)

说明：网页将在设定的时间内，自动刷新并调向设定的网址。

<meta http-equiv="refresh" content="2；URL=http://www.php.cn/"> //意思是2秒后跳转到PHP中文网

（6） Set-Cookie(cookie设定)

说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。

<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"> //具体范例

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 标签的 profile 属性指定的概况文件中进行了定义。

总结：meta标签的自定义属性实在太多了。所以只总结了一些常用的，希望对大家有所帮助。

以上是html中的meta標籤是什麼？有哪些屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！