meta 标签是 HTML 语言头部的一个辅助性标签,我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等。
mata标签常用属性和值见下表:
| 属性 | 值 | 描述 |
|---|---|---|
| charset | utf-8(默认值) | 定义文档的字符编码。 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type default-style refresh |
把 content 属性关联到 HTTP 头部。 |
| name | author description generator keywords |
把 content 属性关联到一个名称。 |
1.name
为搜索引擎提供的关键字列表
<meta name="keywords" content="程序员,程序猿,攻城狮"/>
说明网站采用什么编辑器制作。
<meta name="generator" content="你所用的编辑器"/>
能优化移动浏览器的显示(屏幕的缩放)
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
浏览器内核控制。国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
2.http-equiv
http-equiv类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新传输。
<meta http-equiv="expires" content="Wed, 26 Feb 2021 08:21:57 GMT"/>
禁止浏览器从本地计算机的缓存中访问页面内容。
<meta http-equiv="Pragma" content="no-cache"/>
自动刷新并指向新页面。
<meta http-equiv="refresh"content="5; url=https://www.baidu.com/"/>
设定页面使用的字符集。
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
优先使用 IE 最新版本和 Chrome。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
3.charset
定义html文档使用的字符编码。
<meta charset="utf-8">
通常一个html页面的标准meta定义格式如下:
<head>
<meta name="description" content="牛牛编程自学网站">
<meta name="keywords" content="HTML,CSS,XML,JavaScript,前端,Java,大数据">
<meta name="author" content="simoniu">
<meta charset="UTF-8">
</head>