meta标签的使用

META元素通常用于指定网页的描述，关键词，作者及其他元数据。

包括的属性有：charset、http-equiv、name、content

枚举属性：http-equiv, name

http-equiv

相当于http协议中header的作用

格式：<meta http-equiv="参数" content="参数的值">

属性名列举：

• content-language(指定页面使用的默认语言)

<meta http-equiv="content-language" content="en">

• content-type

<meta http-equiv="content-type" content="text/html;charset=utf-8'">

• content-security-policy(指定当前网页的内容安全策略)
  https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

<meta http-equiv="content-security-policy" content="script-src 'self'; object-src 'none'; style-src https://example.com/; frame-src https:">

• refresh(刷新模式)

<meta http-equiv="refresh" content="4; url='/login'">

• default-style(指定页面使用的首选样式表)

<meta http-equiv="default-style" content="title">
<link href="mystyle.css" title="compact" rel="stylesheet" type="text/css">

name 利于SEO

格式：<meta name="参数" content="参数的值">

属性名列举：

• application-name(应用程序的名称)
• keywords(关键字)
• description(网站描述信息)
• author(作者)
• robots(指定搜索引擎爬虫的行为)
• googlebot(for google)
• slurp(for Yahoo)

<meta name="robots" content="index, nofollow"> 

值	描述
index	允许检索该页面
noindex	不允许检索该页面
follow	允许检索页面上的链接
nofollow	不允许检索页面上的链接

• referrer (控制网页发送给服务器的referrer信息)

<meta name="application-name" content="app"> 
<meta name="keywords" content="p2p, 投资"> 

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
引用策略：

策略名称	属性值（新）	属性值（旧）
no-referrer	no-referrer	never
no-referrer-when-downgrade	no-referrer	default
origin	origin	--
origin-when-crossorigin	unsafe-url	--
unsafe-URL	unsafe-url	always

• no-referrer-when-downgrade协议降级时，不发送referrer
• no-referrer 不发送referrer
• origin 只发送host部分，不包括路径和参数
• origin-when-crossorigin 在跨域的时候只发送host部分，同源则发送完整的url
• unsafe-URL总是发送referrer字段，最宽松的策略，不考虑是否同源等问题

<meta name="referrer" content="no-referrer"> 

• viewport 定义视区大小，用来控制布局，仅供移动设备使用,有以下属性
  width:如果不指定该值，默认是layout viewport的宽度，
  initial-scale :页面初次加载的缩放比例
  minimum-scale ：允许缩放的最小比例
  maximum-scale：允许缩放的最大比例
  user-scalable ：是否允许用户进行缩放

layout viewport 布局视窗，默认980或1024（主要由设备来决定）
visual viewport 视觉视窗（浏览器可视区域）
ideal viewport 理想视窗 设备的独立像素

layout viewport.jpg visual viewport.jpg

inital-scale = ideal viewport的宽度 / layout viewport的宽度

同时解决iphone和IE上横竖屏时都把宽度设置为竖屏的ideal viewport

<meta name="viewport" content="width=device-width, initial-scale=1">
//device-width是理想视口的宽度，把layout viewport的css宽度设为ideal viewport / 1的宽度

charset

声明当前文档所使用的字符编码，在HTM5中

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

改为

<meta charset="UTF-8">