meta标签

情景：在编写html代码的时候，经常看到

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

上面已经查阅了为什么需要写!DOCTYPE html，并总结了一遍博客，这次我又好奇为什么需要写这么多meta标签，有什么有呢？

meta标签的作用

首先meta标签通常是由 name 和 content属性定义的，主要用于描述网页文档的属性，例如网页的作者，网页的描述，关键词等等，但是HTTP标准也固定了一些 name 作为大家使用的共识，当然开发者也可以自定义name。

（1）charset 用于描述HTML的编码类型：

<meta charset="UTF-8" >

(2) keywords, 用作页面关键词

<meta name="keywords" content="关键词" />

(3) description, 用于页面描述

<meta name="description" content="页面描述内容" />

（4）refresh, 用于页面重定向和刷新

<meta http-equiv="refresh" content="0; url=" />

(5) viewport 用于适配移动端，可以控制视口的大小比例

<meta name="viewport" content="width-device-width, initial-scale=1, maximun-scale=1">

上述 content 参数主要有以下几种：

width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

（6）搜索引擎索引的方式：

<mete name="robots" content="index, follow" />

上述 content 参数主要有以下几种

all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。

常见的meta标签

meta标签

meta标签的作用