html中的meta標籤是什麼？有哪些屬性？-html教學-PHP中文網

首頁

web前端

html教學

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

Apr 27, 2019 pm 04:25 PM

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

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

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

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

【推薦課程：HTML教學】

#meta標籤介紹

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

meta標籤的組成

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

name屬性

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

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

&lt;meta name=&quot;参数&quot; content=&quot;具体的描述&quot;&gt;

登入後複製

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

（1） keywords(關鍵字)

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

&lt;meta name=&quot;keywords&quot; content=&quot;PHP中文网&quot;&gt;

登入後複製

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

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

&lt;meta name=&quot;description&quot; content=&quot;php中文网提供大量免费、原创、高清的php视频教程&quot;&gt;

登入後複製

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

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

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

登入後複製

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

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

&lt;meta name=&quot;robots&quot; content=&quot;none&quot;&gt;

登入後複製

具體參數如下：

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

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

（5）author(作者)

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

&lt;meta name=&quot;author&quot; content=&quot;PHP中文网&quot;&gt;

登入後複製

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

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

&lt;meta name=&quot;generator&quot; content=&quot;Sublime Text3&quot;&gt;

登入後複製

（7）copyright(版權)

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

&lt;meta name=&quot;copyright&quot; content=&quot;PHP中文网&quot;&gt; //代表该网站为PHP中文网个人版权所有。

登入後複製

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

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

&lt;meta name=&quot;revisit-after&quot; content=&quot;7 days&quot; &gt;

登入後複製

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

&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt; //默认webkit内核
&lt;meta name=&quot;renderer&quot; content=&quot;ie-comp&quot;&gt; //默认IE兼容模式
&lt;meta name=&quot;renderer&quot; content=&quot;ie-stand&quot;&gt; //默认IE标准模式

登入後複製

http-equiv屬性

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

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

&lt;meta http-equiv=&quot;参数&quot; content=&quot;具体的描述&quot;&gt;

登入後複製

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

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

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

&lt;meta http-equiv=&quot;content-Type&quot; content=&quot;text/html;charset=utf-8&quot;&gt;  //旧的HTML，不推荐

登入後複製

&lt;meta charset=&quot;utf-8&quot;&gt; //HTML5设定网页字符集的方式，推荐使用UTF-8

登入後複製

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

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

&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;/&gt; //指定IE和Chrome使用最新版本渲染当前页面

登入後複製

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

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

&lt;meta http-equiv=&quot;cache-control&quot; content=&quot;no-cache&quot;&gt;

登入後複製

共有以下几种用法：

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

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

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

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

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

禁止百度自动转码

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

&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-siteapp&quot; /&gt;

登入後複製

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

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

&lt;meta http-equiv=&quot;expires&quot; content=&quot;Sunday 26 October 2016 01:00 GMT&quot; /&gt;

登入後複製

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

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

&lt;meta http-equiv=&quot;refresh&quot; content=&quot;2；URL=http://www.php.cn/&quot;&gt; //意思是2秒后跳转到PHP中文网

登入後複製

（6） Set-Cookie(cookie设定)

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

&lt;meta http-equiv=&quot;Set-Cookie&quot; content=&quot;name, date&quot;&gt; //格式
&lt;meta http-equiv=&quot;Set-Cookie&quot; content=&quot;User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT&quot;&gt; //具体范例

登入後複製

content 属性

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

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

scheme 属性

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

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn