meta提供頁面的有關(guān)的元信息蜕该，不顯示在頁面上，而是提供給瀏覽器和搜索引擎搜索洲鸠。
使用：放在head中，不需要關(guān)閉標簽也沒有內(nèi)容馋缅。
瀏覽器支持性：all
屬性：charset 扒腕、content 、http-equiv 萤悴、 name 瘾腰、scheme
- charset (h5)
html5的新屬性，指定html文檔的字符編碼
value:字符集覆履，瀏覽器不能識別所有的字符集蹋盆，廣泛使用的有 UTF-8、ISO-8859-1
eg:<meta charset='UTF-8'>
tip: html4中<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- content
描述html元數(shù)據(jù)硝全，http-equiv和name值
eg:
<meta name="keywords" content="創(chuàng)作,圖文">
?? ???<meta http-equiv="X-UA-Compatible" content="IE=Edge">
- http-equiv
提供了http頭栖雾，可以用來模擬http響應(yīng)頭
eg:
<meta http-equiv="refresh" content="5">//5s后刷新頁面
?? ???<meta http-equiv="refresh" content="5,URL=https://www.baidu.com">//停留5s重定向后面的網(wǎng)址上
| http-equiv | 描述 | 值 |
|---|---|---|
| X-UA-Compatible | IE8的專用標記，用來模擬渲染方式 | IE=edge,chrome=1 IE=edge告訴IE使用最新的引擎渲染網(wǎng)頁伟众，chrome=1則可以激活Chrome Frame |
| cache-control | 請求和響應(yīng)緩存機制 | Public：指示響應(yīng)可被任何緩存區(qū)緩存析藕，可在多用戶共存。 Private：緩存響應(yīng)凳厢，但不能被共享緩存處理账胧。 no-cache：響應(yīng)不緩存。 no-store：用于防止重要的信息被無意的發(fā)布先紫。在請求消息中發(fā)送將使得請求和響應(yīng)消息都不使用緩存 max-age：[單位s]頁面的最大緩存時間,時間內(nèi)再次訪問不會去服務(wù)器. no-transform:百度官方給的禁止轉(zhuǎn)碼; no-siteapp:禁止轉(zhuǎn)碼;等 |
| expires | 網(wǎng)頁過期時間 | 必須使用GMT的時間格式 |
- name
主要用于描述網(wǎng)頁
value: description|keyswords|viewport等
tip：如果設(shè)置了http-equiv屬性治泥，name屬性就不應(yīng)該設(shè)置了
keywords;
description;
author;
viewport：用于控制頁面縮放
????<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
renderer：指定雙核瀏覽器默認以何種方式渲染頁面;
????<meta name="renderer" content="webkit"> //webkit內(nèi)核
????<meta name="renderer" content="ie-comp"> //IE兼容內(nèi)核
????<meta name="renderer" content="ie-stand"> //IE標準內(nèi)核
?????content的取值為webkit,ie-comp,ie-stand之一，區(qū)分大小寫
robots：用來告訴搜索機器人哪些頁面需要索引遮精，哪些頁面不需要索引居夹。
- scheme
format/URI不支持HTML5。 指定用于解釋內(nèi)容屬性值的方案
常用meta總結(jié)
<!-- 控制頁面縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 雙核瀏覽器優(yōu)先使用的極速模式(webkit)渲染 -->
<meta name="renderer" content="webkit">
<!-- IE8以最新標準渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--打開dns預(yù)解析 -->
<meta http-enquiv="x-dns-prefetch-control" content="on"/>
<!-- 刪除默認的蘋果工具欄和菜單欄,默認是顯示（無需添加 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 在webapp應(yīng)用下狀態(tài)條(屏幕頂部條)的顏色,默認default為白色，可以定義為黑色black和灰色半透明black-translucent）
注意：若值為“black-translucent”將會占據(jù)頁面px位置吮播，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數(shù)字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" />
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
