HTML meta标签基本讲解

1. meta概念

<meta>是HTML 语言头部的一个辅助性标签，常用于定义页面的说明，关键字，最后修改日期，页面编码语言，索引擎优化，自动刷新并指向新的页面，控制页面缓冲，响应式视窗等以及其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。该标签常用属性如下：

属性	值	说明
charset	character_set类型（如utf-8）	定义文档的字符编码类型
content	文本值	定义与 http-equiv 或 name 属性相关的元信息
http-equiv	常用可选值有content-type，default-style，refresh	定义 HTTP 头部信息
name	常用可选值有application-name，author，description，generator，keywords	把 content 属性关联到一个名称

2. http-equiv

相当于HTTP头文件的作用，用于定义需要的头文件参数的值，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。其格式为：

<meta http-equiv="头参数名" content="头参数值">

示例1：X-UA-Compatible用于告知浏览器以何种版本来渲染页面

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--  定义ie浏览器使用最新版本渲染页面-->

示例2：content-Type用于设定网页字符集（HTML5建议使用charset属性来定义）

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

3. charset

HTML5设定网页字符集的方式，推荐使用UTF-8

<meta charset="utf-8"> 

4. name

name属性主要用于描述网页，比如网页的关键词，叙述等，以便于搜索引擎查找和搜索引擎优化。其常用值介绍如下：

4.1 keywords

用于告诉搜索引擎你的网页的关键字，多个关键字之间用逗号隔开

示例：

<meta name="keywords" content="html,css,javascript,sass,less,react,vue"/>

4.2. description

网站内容的简介描述，大致主题

示例：

<meta name="description" content="铸心个人博客，专注于互联网前端技术学习与分享">

4.3. viewport

网页的显示视口的设置（如视口大小，缩放设置）

示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

其中content中各属性简单介绍：

width：viewport的宽度

height ：viewport 的高度

user-scalable：是否允许缩放(yes,no)

initial-scale：初始化缩放比例（范围为0到10）

minimum-scale：允许缩放的最小比例

maximum-scale：允许缩放的最大比例

4.4 robots

用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

示例：

<meta name="robots" content="all"/>

其中content中可选值简单介绍：

all ：文件将被检索，且页面上的链接可以被查询；

none ：文件将不被检索，且页面上的链接不可以被查询；

index ：文件将被检索；

follow ：页面上的链接可以被查询；

noindex ：文件将不被检索，但页面上的链接可以被查询；

nofollow ：文件将被检索，但页面上的链接不可以被查询；

4.5. author

标注网页的作者

示例：

<meta name="author" content="铸心"/>

参考链接：https://blog.csdn.net/zhangank/article/details/94014629