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">
网友评论