很多前端开发对 HTML 的标签视而不见,经常会忽略它的存在,认为它没有太大的作用,现在我们就谈谈这个标签的使用。
meta 标签的作用
搜索引擎(SEO)优化;
定义页面使用语言;
自动刷新页面;
控制页面缓存;
网页定级评价;
控制页面显示的窗口;
等等...
meta 使用
标签总共有 3 个属性,不同的属性和值组成了网页不同的功能:
name
http-equiv
content
name 属性
name属性主要是用于描述网页的,对应content属性中的内容是便于搜索引擎查找和分类信息。语法:
name="keywords"
它是用来设置,让搜索引擎获取网页的关键字:
name="description"
它是用来设置,让搜索引擎获取网页的内容描述:
name="robots"
它是用来设置,让搜索引擎哪些页面需要索引,哪些页面不需要索引。content 有如下参数:
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
noindex:文件将不被检索,但页面上的链接可以被查询;
follow:页面上的链接可以被查询;
nofollow:文件将被检索,但页面上的链接不可以被查询。
name="author"
它是来设置页面的作者:
name="generator"
它是来设置网站采用什么软件制作的:
name="COPYRIGHT"
它是来设置网站的版权信息的:
name="revisit-after"
它是来设置网站的重访,30day代表30天:
name="viewport"
它是来控制浏览器窗口的大小和缩放的,由于它在现代浏览器,特别是 Mobile 端浏览器非常常用,我们会用专门的一片文章来讲解它:
http-equiv 属性
http-equiv相当于 HTTP 的文件头的设置。语法:
http-equiv="expires"
它是来设置网页的过期时间的:
http-equiv="Pragma"
它是来设置禁止浏览器从本地缓存中访问页面:
http-equiv="Refresh"
它是来设置自动刷新并跳转新页面,其中content第一个数字代表 5 秒后自动刷新:
http-equiv="Set-Cookie"
它是来设置 Cookie 的:
http-equiv="Window-target"
强制页面在当前窗口以独立页面显示:
http-equiv="content-Type"
它是来设置页面使用的字符集:
http-equiv="Content-Language"
它是来设置页面的语言的:
http-equiv="Cache-Control"
它是设置页面缓存:
这里可以设置很多不同的缓存机制
http-equiv="Content-Script-Type"
它是设置页面中脚本的类型: