HTML 理解标签 - meta
meta 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息.
--补充: 元数据: 又称中介数据、中继数据，为描述数据的数据, 主要是描述数据属性（property）的信息，用来支持如指示存储位置、历史数据、资源查找、文件记录等功能.
meta标签 , 常用的有以下几个属性:
1. name : 比较常见的一些属性
author: 就是这个文档的作者名称，可以用自由的格式去定义
description: 包括一个关于页面内容的缩略而精准的描述
keywords: 网页关键词
referrer: 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容, content可取的值请参考底部连接
viewport: 设备视口标签 , 可用于控制页面缩放及不同设备样式适配. content 可取的值有:
width: 一个正整数或者字符串 device-width => 指定页面的可视宽度, 像素值或 device-width
height: 一个正整数或者字符串 device-height => 指定页面的可视高度, 像素值或 device-height
initial-scale: 一个 0.0 到 10.0 之间的正数 => 设置页面初始化时的缩放比例
maximum-scale: 一个 0.0 到 10.0 之间的正数 => 设置页面最大缩放比例
minimum-scale: 一个 0.0 到 10.0 之间的正数 => 设置页面最小缩放比例
user-scalable: 一个布尔值(yes或者no) => 设置禁用缩放
2. httpEquiv : 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用 content 来定义. -摘自MDN
content-security-policy 内容安全策略： 它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。-摘自MDN
例如:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.bootcss.com"/>
通过上述定义(定义了 script 脚本的加载策略)后, 浏览器就只会加载当前网站和 https://cdn.bootcss.com 网站下的脚本资源;
不仅仅是脚本的安全策略, 还可以定义图像, style, font, plugin, video 等的安全策略;
更加详细的内容可以参考: https://www.jianshu.com/p/28cfa8508237
default-style 指定默认样式表: content属性必须包含<link> 元素的标题, href属性链接到CSS样式表或包含CSS样式表的<style>元素的标题.
refresh 刷新: 如果content 只包含一个正整数,则是重新载入页面的时间间隔(秒);
如果 content 包含一个正整数并且跟着一个字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)
x-ua-compatible 用于强制浏览器的渲染方式:
典型的：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> : 默认使用chrome来渲染，然后再按照IE该浏览器的最新版本来渲染。
3. content : 基于内容，这个属性为 http-equiv 或 name 属性提供了与其相关的值的定义. -摘自MDN
4. charset : 此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。-摘自MDN
此特性的值必须是一个符合由IANA所定义的字符编码首选MIME 名称, 关于字符编码相关可参考百度百科: https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81/8446880?fr=aladdin
根据声明的字符编码, 浏览器以此编码来解释你的文档, 有时候我们从网上扒下来的 demo打开显示异常, 多半是因为字符编码未正确设置的原因 ; 但也不是所有的编码都建议使用 , MDN文档中对于使用的字符编码给出了一下建议和警告;
贴上部分网站的代码:
京东首页:
<meta charset="UTF-8"> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /> ...其余省略... <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" />
淘宝首页:
<meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" /> <title>淘宝网 - 淘！我喜欢</title> <meta name="spm-id" content="a21bo" /> <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" /> <meta name="aplus-xplug" content="NONE"> <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
天猫首页:
<meta charset="utf-8"/> <meta name="renderer" content="webkit"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> ... <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="date=no"> <meta name="format-detection" content="address=no"> <meta name="keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活,服饰内衣,营养保健,钟表珠宝,饰品箱包,汽车生活,图书音像,礼品卡"/> <meta name="description" content="天猫，中国线上购物的地标网站，亚洲超大的综合性购物平台，拥有10万多品牌商家。每日发布大量国内外商品！正品网购，上天猫！天猫千万大牌正品,品类全，一站购，支付安全，退换无忧！理想生活上天猫!"/> <meta property="og:title" content="天猫"> <meta property="og:type" content="website"> <meta property="og:url" content=" https://www.tmall.com/"> <meta property="og:image" content=" https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
更多内容参考: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
