html meta标签使用及属性的详细分析

自学前端开始，我对meta标签接触不多，主要把精力都集中在能显示出来的标签上，比如span、button、h1等等。有时候去查看一些知名网站的源码，发现head标签里有一大摞的meta。

今天就来学习一下meta的用处，看看有些啥属性。

一、定义及作用

meta，即元数据（Metadata）是数据的数据信息。

该标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

二、属性

1、charset

HTML5新增的属性，定义当前页面的字符编码

新写法：

 meta charset= UTF-8 

老写法：

 meta http-equiv= Content-Type content= text/html; charset=UTF-8 

HTML5中优先用新写法

2、name属性

a、keywords，当前网页的关键字，便于搜索引擎识别，提高搜索准确性

 meta name= keywords content= cdn，网络加速，运营商 

b、description，对当前网页的简单描述，如果用百度搜索的话，在搜索结果的每个标题下面会显示description的内容，方便用户快速定位

 meta name= description content= 本公司专注提供CDN网络加速，同时也提供云计算服务 

c、viewport，这个meta有点复杂，主要用在移动网页中，需要单独写一篇文章，这里暂时略过

 meta name= viewport content= width=device-width, initial-scale=1.0, maximum-scale=1.0 / 

d、robots，搜索引擎爬虫的索引方式

 meta name= robots content= none 

content的取值有all、none、index、noindex、follow、nofollow，默认是all，具体的说明如表格所示：

e、author，文档的作者

 meta name= author content= liuhw，liuhuansir@126.com 

f、copyright，文档的版权说明

 meta name= copyright content= liuhw 

g、revisit-after，搜索引擎爬虫重访的时间间隔，如果你的网站不经常更新，那可以把这个时间设置的稍长一些，能略微的减轻服务器的压力，节省带宽资源

 meta name= revisit-after content= 5 days 

h、renderer，双核浏览器的渲染方式，指定默认用哪个浏览器内核来渲染，例如360浏览器：

 meta name= renderer content= webkit //默认webkit内核 meta name= renderer content= ie-comp //默认IE兼容模式 meta name= renderer content= ie-stand //默认IE标准模式

3、http-equiv

模拟http里的头，回传给服务器一些信息

a、expires，网页的到期时间，过期之后，需要重新访问服务器

 meta http-equiv= expires content= Sunday 26 October 2018 01:00 GMT / 

b、pragma(兼容http1.0，1.1)，cache-control(http1.1新增)，设置缓存方式，建议用cache-control，该属性的content具体参考http里的cache-control

 meta http-equiv= cache-control content= no-cache 

c、refresh，自动刷新并跳转到content中声明的url

 meta http-equiv= refresh content= 5；URL=http://www.liuhw.club/ //5秒后跳转向我自己的域名

d、set-cookie，添加cookie

 meta http-equiv= set-cookie content= TOKEN_KEY=81BBF72619795017B6AC214AE705F1F8; Domain=10.1.100.111; Path=/ 

e、content-Type，文档的字符编码，同charset，建议使用charset

 meta http-equiv= content-type content= text/html;charset=gb2312 

f、x-ua-compatible，告诉浏览器用哪个版本来渲染文档

 meta http-equiv= x-ua-compatible content= IE=edge,chrome=1 / //指定IE和Chrome使用最新版本渲染当前页面

总结一下，上面只是列出了一些常用的属性，没有列出来的等需要用到的时候再查文档

【相关推荐：HTML5视频教程】

以上就是html meta标签使用及属性的详细分析的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。