Html <meta>标签

之前去面试的时候，曾经被问到过，对html中meta标签认识。由于在平时没有特别的学习和总结过，所以答得不算很好。希望通过这一篇文章能够令大家对<meta>这个标签有简单的理解~~

标签简介

关于<meta>标签，在W3SChool的描述是这样的:

可能大家看到这个描述还是有点懵逼的，什么叫元信息?我个人对<meta>标签的理解就是可以定义一些被浏览器识别但是不会显示到网页上的信息。

组成

<meta>标签共有三个属性:1.name属性 2.http-equiv属性 3.scheme 属性

但是scheme属性现在已经基本废除了，所以下面就只针对name属性和http-equiv属性进行详细的说明。

1.name属性

name 属性主要用于描述网页，包括网页的版权信息，作者，关键字等等。与之对应的属性值为content.可以将content理解为name的取值或者描述。

<meta name='参数' content='参数取值'>  //name属性语法格式
复制代码

name属性有以下几种常用的参数。

• keywords 关键字

顾名思义这个属性是用来告诉搜索引擎你的网页的关键字的。

<meta name='keywords content='测试,前端,掘金'>  //例子
复制代码

• author 作者

这个属性是用于标记网页的作者的。

<meta name='author' content='zhijie'>  //例子
复制代码

• description 描述

这个属性用于告诉搜索引擎你的网页的内容描述。

<meta name='description' content='这是一个例子'> //例子
复制代码

• generator 网页制作软件

这个属性用于标记网页是用什么软件开发的。

<meta name='generator' content='Sublime Text3'> //例子
复制代码

• copyright(版权)

这个属性用于标记版权信息。

<meta name='copyright' content='zhijie所有'> //例子
复制代码

• viewport 移动端的窗口

这个属性较为复杂,主要是用于设计移动端的网页。具体的可以参考掘金上关于viewport的文章。 传送地址:viewport 传送门

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale:1.0, user-scalable:no">
复制代码

• robots

这个属性用于告诉搜索引擎，哪些页面需要被爬虫爬取，哪些页面不需要被爬虫爬取。content的取值有以下几种:

1.all(默认):文件被检索，而且页面上的链接可以被查询。

2.none:与all对应，文件不会被检索，而且页面上的链接也不可以被查询。

3.index:文件被检索。

4.noindex:与index对应，文件将不被检索，但页面上的链接可以被查询。

5.follow:页面上的链接可以被查询。

6.nofollow:与follow对应，文件将被检索，但页面上的链接不可以被查询。

<meta name='robots' content'all'> //例子
<meta name='robots' content'none'> //例子
<meta name='robots' content'index'> //例子
<meta name='robots' content'noindex'> //例子
<meta name='robots' content'follow'> //例子
<meta name='robots' content'nofollow'> //例子
复制代码

• topic 话题

这个属性用于告诉搜索引擎，你的网页的话题。

<meta name='topic' content'meta 标签'> //例子
复制代码

• subject 主题

这个属性用于告诉搜索引擎，你的网页的主题。

<meta name='subject' content='meta 标签'> 
复制代码

2.http-equiv属性

http-equiv属性可以简单理解为与http协议相关的属性。如果<meta>标签不加name属性，content的值会默认对应http-equiv.

• content-type

这个属性用来设置网页的编码字符集。

<meta http-equiv='content-type' content='text/html; charset=utf-8'>
复制代码

上面的写法可能大家见得比较少，但是下面这种写法，基本每个页面都会有的。

<meta charset='utf-8'>
复制代码

• expires

相信熟悉http协议的朋友看到这个词语，都会马上知道这个属性应该是和缓存有关的。这个属性设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。使用GMT的时间格式。

<meta http-equiv="expires" content="31 Dec 2008"> //GMT时间格式
复制代码

• refresh

这个属性表示x秒之后重定向到新的链接。如果没有指定地址，则X秒后刷新页面。

<meta http-equiv='refresh' content="5;url=http://xxx.com"> //表示5秒后重定向
复制代码

• cache-control

这个属性用于指定网页的缓存机制。content的取值有以下几种：

1.no-cache: 这个属性并不是说不缓存，而是要求进行协商缓存。

2.no-store：这个属性才是强行页面不进行缓存，每次都必须从服务器获取新的资源。

3.private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。

4.public：指示响应可被任何缓存区缓存。

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="cache-control" content="private">
<meta http-equiv="cache-control" content="public">
复制代码

• X-UA-Compatible

这个属性用于告诉浏览器以什么模式渲染页面。

<meta http-equiv='X-UA-Compatible' content="IE=edge, chrome=1"> //以最新的模式渲染页面
复制代码

总结

本篇文章主要描述了一些基础和常用的meta标签，其实在实际开发中还有很多比较特别的<meta>标签的，特别是微信的开发。本文限制于篇幅就没有介绍这些特殊的<meta>标签。但是希望这篇文章也能帮助到大家~~

转载于:https://juejin.im/post/5d08903b5188250a8b1fd61c