您现在的位置是:群英 > 开发技术 > web开发
HTML5中meta标签的使用是怎样,有何用处
Admin发表于 2022-05-16 11:42:10914 次浏览
这篇文章给大家分享的是“HTML5中meta标签的使用是怎样,有何用处”,文中的讲解内容简单清晰,对大家学习和理解有一定的参考价值和帮助,有这方面学习需要的朋友,接下来就跟随小编一起学习一下“HTML5中meta标签的使用是怎样,有何用处”吧。


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

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

一、定义及作用

meta,即元数据(Metadata)是数据的数据信息。

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

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

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

二、属性

charset(htm5新增) 定义文档的字符编码
content  定义与 http-equiv 或 name 属性相关的元信息。
http-equiv http响应头
name       属性名称
scheme (htm5废弃) 翻译 content 属性的值的方案

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,具体的说明如表格所示:

all 文档可以被索引,文档中的链接可以被查询
none 文档不能被索引,同时文档中的链接不能被查询
index 文档可以被索引
noindex 文档不能被索引,但是文档中的链接可以被查询
follow 文档中的链接可以被查询
nofollow 文档可以被索引,但是文档中的链接不能被查询

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中meta标签的使用是怎样,有何用处”已经有了进一步的了解,更多相关的问题,欢迎关注群英网络或到群英官网咨询客服。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: meta标签
相关信息推荐
2022-05-27 18:08:05 
摘要:当没有定义构造方法时每个类里都有一个默认的无参的构造方法,此时该类就只有一个构造方法;而当你显示定义类的构造方法时,那就没有那个默认的构造方法了,该类所以的构造方法就是定义了的那些构造方法。
2022-02-21 18:16:58 
摘要:怎样用Python实现画红色五角星图形?Python实现画红色五角星效果并不难,这里我们需要使用到Python的绘图Turtle库,具体的实现代码及效果如下,感兴趣的朋友可以参考了解看看。
2022-05-17 11:50:55 
摘要:fillRect方法用于在画布上绘制已填充的矩形,语法为“context.fillRect(x,y,width,height);”;其中,参数“x”和“y”表示矩形左上角的x与y坐标,,“width”和“height”表示矩形的宽度与高度。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部