Hxp的前端学习 - HTML - meta标签详解

HTML - meta标签详解

原文链接：https://blog.csdn.net/hwc3737/article/details/109030177

<meta>标签

常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面）、搜索引擎和其它网络服务。

常用属性：

①charset

作用：用于定义文档的字符编码

<meta charset="utf-8">		//定义使用utf-8编码进行解析

②content

作用：用于定义元信息，与name和http-equiv属性相关联

③name

作用：用于把content属性关联到一个名称

常用可选值：

1）keywords（关键字），对应content为网站相关的关键字

<meta name="keywords" content="博客,前端,零基础学习">

2）description（网站内容的描述），对应content为网站的介绍

<meta name="description" content="这是我的个人博客。">

3）viewport（移动端的窗口属性），对应content为一些设置项

//	width（手机端虚拟屏幕宽度，可填具体数值或设备宽度device-width）
//	height（手机端虚拟屏幕高度，可填具体数值或设备宽度device-height）
//	initial-scale（初始缩放比例）
//	maximum-scale（最大缩放比例）
//	minimum-scale（最小缩放比例）
//	user-scalable（是否允许用户手动缩放，可选值1 或 0、yes 或 no）

//设置移动端虚拟屏幕分辨率宽度1600px，初始缩放比例为1.0
<meta name="viewport" content="width=1600, initial-scale=1.0">
//设置移动端网页呈现固定，不可拖动
<meta name="viewport" content="width=device-width,initial-scale=1.0">

4）robots（搜索引擎爬虫索引方式），对应content为all、none、index、follow、noindex、nofollow及其组合，默认为all

//	none（搜索引擎将忽略此网页，等价于noindex,nofollow）
//	noindex（常用，告诉搜索引擎不索引此网页）
//	nofollow（常用，告诉搜索引擎不继续通过此网页得链接索引其他网页）
//	all（搜索引擎将索引此网页并通过链接索引其他的网页，等价于index,follow）
//	index（与noindex相对）
//	follow（与nofollow相对）

//设置此网页不被搜索引擎索引进数据库，但搜索引擎可以通过此网页的链接继续索引其它网页
<meta name="robots" content="noindex,follow">

//设置此网页可被搜索引擎索引进数据库，但搜索引擎不可以通过此网页的链接继续索引其它网页
<meta name="robots" content="index,nofollow">

//设置搜索引擎忽略此网页
<meta name="robots" content="none">

5）author（标注作者信息），对应content为网页作者信息

<meta name="author" content="Hxp,267****340@qq.com">

6）copyright（版权），对应content为网站版权信息

<meta name="copyright" content="Hxp">		//代表该网站为Hxp个人所有

7）revisit-after（搜索引擎爬虫重返时间），对应content为 整数数字 + 空格 + ‘days’，如：5 days

<meta name="revisit-after" content="7 days">

用途：如果页面不是经常更新，为减轻搜索引擎爬虫对服务器带来的压力，可设置一定的爬虫重返时间。

④http-equiv

作用：用于把content属性关联到HTTP头部

常用可选值：

1）content-Type（定义文档的字符编码）

//旧html所采用的方式，不推荐
<meta http-equiv="content-Type" content="text/html;charset=utf-8">

//推荐使用以下html5的方式
<meta charset="utf-8">

2）X-UA-Compatible（设置IE兼容性模式）

说明：

X-UA-Compatible是自IE8新增的一个设置，对IE8以下版本不兼容，用以指定网页的兼容性模式。并且此种指定的方式优先权高于在服务器中通过HTTP header所指定的模式。

知识补充：

Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页，因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。

注意点：

此指定必须写在网页中除title元素和其他meta元素以外的所有其他元素之前。否则将不起作用。

//指定IE8/9以IE7引擎来渲染页面  
<meta http-equiv="X-UA-Compatible" content="IE=7">  
//指定IE8/9以IE8引擎来渲染页面  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
//指定IE8/9及以后的版本都以最高版本IE来渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge">    

//指定IE和Chrome使用最新的引擎渲染网页，chrome=1表示可以激活Chrome Frame（常见设置）
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

3）refresh（自动刷新并指向某页面）

//设置两秒后自动刷新并跳转到百度
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">

以上仅包含meta标签的部分常用属性及其说明，并非全部包含。
仅供参考学习，转载请注明出处。
欢迎留言指错。