meta标签详解

🍳简单meta简单概述

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

页面内容的简要说明和定义
将说明用于seo,重载布局,其他网络服务

标签属性👇

charset
name
http-equiv

charset

<meta charset="utf-8">

name

主要用于简要描述网页便于seo,形式如下

<meta name="属性名" content="内容">

keywords

<meta name="keywords" content="illuminated,本科,前端,日常" />

description

<meta name="description" content="illuminated的blog">

viewport

它提供有关视口初始大小的提示，仅供移动设备使用。

width：一个正整数或者字符串 device-width，以pixels（像素）为单位。
height
initial-scale：一个0到10.0正数，定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
maximum-scale：范围同上，定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
maximum-scale：
user-scalable：yes/no; 定义用户是否能缩放

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

robots
- none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
- noindex : 搜索引擎不索引此网页。
- nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
- all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
- index : 搜索引擎索引此网页。
- follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。

<meta name="robots" content="none">//不写的话默认是all

author

<meta name="author" content="就是您嘞,您的联系方式">

标注版权信息

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

generator

包含生成页面的软件的标识符。

revisit-after

如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。

<meta name="revisit-after" content="7 days" >//我没用过这个主要参考文献[1]

renderer

为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。

//我没用过这个主要参考文献[1]

<meta name="renderer" content="webkit"> //默认webkit内核

<meta name="renderer" content="ie-comp"> //默认IE兼容模式

<meta name="renderer" content="ie-stand"> //默认IE标准模式

附在App中好用的属性

//详见文献[2]

/*保留历史记录以及动画效果*/

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">



/*是否启用 WebApp 全屏模式*/

<meta name="apple-mobile-web-app-capable" content="yes">



<!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->

<meta name="apple-mobile-web-app-status-bar-style" content="black">



/*添加到主屏后的标题*/

<meta name="apple-mobile-web-app-title" content="App Title">



/*在网页上方显示一个app banner，提供app store下载*/

<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"



/*启用360浏览器的极速模式(webkit)*/

<meta name="renderer" content="webkit">



/*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应用模式*/

<meta name="browsermode" content="application">



/*QQ应用模式*/

<meta name="x5-page-mode" content="app">



/*禁止自动探测并格式化手机号码*/

<meta name="format-detection" content="telephone=no">

http-equiv

主要用于定义与http相关的属性

content-security-policy（就是那个CSP！！！🙉）

控制某些可能被加载的确切的资源类型的位置。防止XSS跨站攻击
详见参考文献[3]

content-type

如果使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于MIME type为 text/html 的文档，不能用于MIME类型为XML的文档。

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

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

x-ua-compatible

If specified, the content attribute must have the value "IE=edge". User agents are required to ignore this pragma.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 

//指定IE和Chrome使用最新版本渲染当前页面

refresh

这个属性指定:

如果 content 只包含一个正整数,则是重新载入页面的时间间隔(秒);

如果 content包含一个正整数并且跟着一个字符串 ;url= 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)

default-style

设置默认CSS样式表组的名称。

参考文献

关于 HTML 中 meta 标签的理解和总结 [1]

HTML meta [2]

MDN - [3]

meta标签，这次一定会！