meta标签详解

一，meta标签的作用

他没有结束标签，主要用来设置html文档的配置信息。描述一个html文档的属性、作者、日期、描述、关键词等。

二，meta标签的常用属性

2.1 必选属性content

必须配合name或者http-equiv其中一个属性来使用，定义他们描述的内容

2.2 name属性

提供元数据的名称，通过content属性设置元数据的值。

常用的属性名称有：

• author-作者
• keywords-关键词（SEO）
• description-页面内容的描述（SEO）
• copyright-网站版权信息
• renderer-双核浏览器的渲染方式
• robots-爬虫抓取的规则
• viewport-控制页面缩放

        viewport的content内容中的常用属性

        width：宽度

        initial-scale：页面的初始缩放值

        minimum-scale：允许用户的最小缩放值

        maximum-scale：允许用户的最大缩放值

        user-scalable：是否允许用户进行缩放

部分实例：

<meta name="keywords" content="新闻,热点,新闻频道,国际新闻">

<meta name="description" content="包含有时政新闻、社会新闻、时事评论、军事、历史、的专业时事报道门户网站"/>

<!-- webkit内核 -->
<meta name="renderer" content="webkit"/>

<!-- 禁止设置页面缩放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2.3 属性http-equiv

相当于http文件头的作用，向浏览器传递一些有用的信息。

常用的属性名称有：

• X-UA-Compatible：用来做IE浏览器适配（IE的支持范围是IE8~IE11、IE=edge是用最新版本渲染、chrome=1则可以激活Chrome Frame）
• content-type：声明文档类型和字符编码（内容通常设置为text/html;charset=utf-8）
• expires：设置网页过期时间（必须使用GMT时间格式！）
• refersh：设置指定时间后自动刷新，跳转到指定页面（时间和网址用分号“;”隔开）
• cache-control：缓存机制

       cache-control的content内容中的常用属性：

       no-cache：请求或响应消息不能缓存

       Public：响应可以被任何缓存区缓存

       Private：对于单个用户的整个或部分响应消息，不能被共享缓存处理（此响应消息对于                        其他用户的请求无效）

       no-store：请求和响应消息都不使用缓存（主要用于防止重要的信息被无意发布）

部分实例：

<!-- 以IE8的内核渲染 -->
<meta http-equiv="X-UA-compatible" content="IE-8">

<!-- 设置网页字符编码 -->
<meta http-equiv="content-Type" content="text/html; charset=utf-8"＞

<!-- 设置网页过期时间 -->
<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞

<!-- 两秒后跳转到百度页面 -->
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">

2.4 charset属性

可以单独使用charset属性设置页面的字符编码

<meta charset="utf-8">

其他详细使用可以参考：html meta标签使用总结 - 掘金