前端面试__谈谈你对meta的理解（HTML）

1. 是什么

meta元素标签是提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。

简单来讲：meta标签是用来让机器识别的，有利于SEO。

2. 常见的meta元素

2.1 charset属性

指定了html文档的编码格式，常用的是utf-8(Unicode的字符编码)，还有ISO-8859-1(拉丁字母的字符编码)。当然还有其他的，但是一般不常用也就不介绍了

<meta charset="utf-8">

2.2 name 属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

• author——定义了页面的作者

<meta name="author" content="Tony">

• keywords——为搜索引擎提供关键字

<meta name="keywords" content="HTML, CSS, JavaScript">

• description——对网页整体的描述

<meta name="description" content="My tutorials on HTML, CSS and JavaScript">

• viewport——对页面视图相关进行定义

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0">

width=device-width——将页面宽度设置为跟随屏幕宽度变化而变化
initial-scale=1.0——设置浏览器首次加载页面时的初始缩放比例(0.0-10.0正数)
maximum-scale=1.0——允许用户缩放的最大比例(0.0-10.0正数)，必须大于等于minimum-scale
minimum-scale=1.0——允许用户缩放的最小比例(0.0-10.0正数)，必须小于等于maximum-scale
user-scalable=no——是否允许用户手动缩放(yes或者no)

• theme-color——定义主题颜色

<meta name="theme-color" content="#222">

2.3 http-equiv 属性

• refresh——每60s刷新一次文档

<meta http-equiv="refresh" content="60">

• X-UA-Compatible——告知浏览器以何种版本渲染界面。

<meta http-equiv="X-UA-Compatible" content="ie=edge">

• Cache-Control——请求和响应遵循的缓存机制，可以声明缓存的内容，修改过期时间，可多次声明

no-transform——不得对资源进行转换或转变。

no-siteapp——禁止百度进行转码

<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">

property & content——可以让网页成为一个富媒体对象，同意网页内容被其他网站引用，同时在应用的时候不会只是一个链接，会提取相应的信息展现给用户。

<meta property="og:type" content="website">
<meta property="og:url" content="https://zjgyb.github.io/index.html">
<meta property="og:site_name" content="tony's blog">

3. 作用

常见作用如下：

1.搜索引擎优化（SEO）

2.定义页面使用编码

3.自动刷新并指向新的页面

4.实现网页转换时的动态效果等