HTML中的meta標籤經常使用屬性及其做用總結

時間 2019-11-05

標籤 html meta 標籤經常使用屬性及其總結欄目 HTML 简体版

原文原文鏈接

文章同步到githubhtml

之前沒怎麼太注意過meta標籤的做用，只是簡單瞭解一些經常使用屬性，如今結合我的瞭解的進行記錄與總結:html5

元數據

首先須要瞭解一下 元數據(metadata)元素的概念，用來構建HTML文檔的基本結構，以及就如何處理文檔向瀏覽器提供信息和指示，它們自己不是文檔內容，但提供了關於後面文檔內容的信息。——出自《html5權威指南》

如title、base、meta都是元數據元素。本文主要介紹<meta>。git

<meta>元素

元素	meta
父元素	head
屬性	http-equiv、name、content、charset
HTML5中的變化	1. charset爲HTML5中新增的，用來聲明字符編碼;2. http-equiv屬性在HTML4中有不少值，在HTML5中只有refresh、default-style、content-type可用

<meta>具體用途

1. 指定名/值對定義元數據

name屬性與content屬性結合使用, name用來表示元數據的類型，表示當前<meta>標籤的具體做用；content屬性用來提供值。segmentfault

<meta name="參數" content="具體描述信息">

例如:瀏覽器

<!DOCTYPE HTML>
<html>
    <head>
        <title>demo</title>
        <meta name="keywords" content="電商,物流">
        <meta name="author" content="張三">
        <meta name="description" content="網站描述...">
    </head>
    <body>
        <div>welcome</div>
    </body>
</html>

元數據名稱(name的值)	說明
application name	當前頁所屬Web應用系統的名稱
keywords	描述網站內容的關鍵詞,以逗號隔開，用於SEO搜索
description	當前頁的說明
author	當前頁的做者名
copyright	版權信息
renderer	renderer是爲雙核瀏覽器準備的，用於指定雙核瀏覽器默認以何種方式渲染頁面
viewreport	它提供有關視口初始大小的提示，僅供移動設備使用

viewreport緩存

備註:圖片截取自MDN服務器

主要介紹一個當meta標籤的name屬性值爲viewreport時的視口的大小

1.mate標籤name屬性不設置viewreport

若是不設置name的值爲viewreport，默認視口寬度爲980

2.mate標籤name屬性設置viewreport

1.content內容爲空時，默認視口寬度爲980
2.content設置width，不設置initail-scale時，視口寬度爲設置的width值
3.content不設置width，只設置initail-scale時，是能夠根據initail-scale的值計算出視口的寬度

initail-scale = 屏幕寬度 / 視口寬度

4.content同時設置width和initail-scale時，視口寬度爲width的值，頁面顯示按照initail-scale比率進行縮放
5.通常都是進行以下設置，來實現視口寬等於設備寬，佈局完成後屏幕顯示也不進行縮放

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

renderer

<meta name="renderer" content="webkit"> //默認webkit內核 
<meta name="renderer" content="ie-comp"> //默認IE兼容模式 
<meta name="renderer" content="ie-stand"> //默認IE標準模式

<meta name="renderer" content="webkit|ie-comp|ie-stand">

2. 聲明字符編碼

charset屬性爲HTML5新增的屬性，用於聲明字符編碼,如下兩種寫法效果同樣

<meta charset="utf-8"> //HTML5

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

3. 模擬http標頭字段

http-equiv屬性與content屬性結合使用, http-equiv屬性爲指定所要模擬的標頭字段的名稱，content屬性用來提供值。

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

content-Type 聲明網頁字符編碼:

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

refresh 指定一個時間間隔(以秒爲單位),在此時間過去以後從服務器從新載入當前頁面,也能夠另外指定一個頁面.

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">//2秒後在當前頁跳轉到百度

X-UA-Compatible 瀏覽器採起何種版本渲染當前頁面

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

expires 用於設定網頁的到期時間，過時後網頁必須到服務器上從新傳輸

<meta http-equiv="expires" content="Sunday 22 July 2016 16:30 GMT">

catch-control 用於指定全部緩存機制在整個請求/響應鏈中必須服從的指令

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

content有如下值(百度百科):

content的值	說明
public	全部內容都將被緩存(客戶端和代理服務器均可緩存)
private	內容只緩存到私有緩存中(僅客戶端能夠緩存，代理服務器不可緩存)
no-cache	必須先與服務器確認返回的響應是否被更改，而後才能使用該響應來知足後續對同一個網址的請求。所以，若是存在合適的驗證令牌 (ETag)，no-cache 會發起往返通訊來驗證緩存的響應，若是資源未被更改，能夠避免下載。
no-store	全部內容都不會被緩存到緩存或 Internet 臨時文件中
must-revalidation/proxy-revalidation	若是緩存的內容失效，請求必須發送到服務器/代理以進行從新驗證
max-age=xxx (xxx is numeric)	緩存的內容將在 xxx 秒後失效, 這個選項只在HTTP 1.1可用, 並若是和Last-Modified一塊兒使用時, 優先級較高