关于<meta>,我们都不陌生,随意打开一个网页查看源代码就可以看到<head>里出现它的身影。
简单来说,<meta>是描述 HTML 文档的元数据。例如网页描述、关键词、页面刷新、作者和日期等。
元数据(Metadata),可以理解为描述数据的数据信息。
元数据不会显示在客户端,但是会被浏览器解析,或其他 Web 服务调用。这样通过这些描述信息就知道如何去解析此网页数据。
meta标签的属性和使用
<meta>标签我们最常用的是charset、name和http-equiv属性,另外还有scheme(HTML5不支持)和针对移动端显示优化的viewport属性,感兴趣自己查一下。
1.charset属性,HTML5新特性,使得我们更容易定义文档的字符编码。
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--HTML4.01--> <meta charset="UTF-8"><!--HTML5-->
2.name属性,定义了HTML文档的描述、关键词和作者,对应于 content 属性。
<head>
<meta name="description" content="meta标签学习"> <meta name="author" content="three-stone">
</head>
3.http-equiv属性,标签相当于HTTP的头文件,向浏览器传递有用的信息,该属性使用的变量的值会在content属性中规定。
<head> <meta http-equiv="content-Type" content="text/html; charset=gb2312"><!-- 设定页面使用的字符集。 --> <meta http-equiv="expires" content="Fri, 12 Jan 2018 18:18:18 GMT"><!--可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。 --> <meta http-equiv="Pragma" content="no-cache"><!--禁止浏览器从本地计算机的缓存中访问页面内容。 --> <meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"><!--自动刷新并指向新页面。 --> <meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/"><!-- 设置cookie, 如果网页过期,那么存盘的cookie将被删除。--> <meta http-equiv="Window-target" content="_top"><!--强制页面在当前窗口以独立页面显示,用来防止别人在框架里调用自己的页面。 --> </head>
基本用法就是这样了。