<meta> 标签属于HTML文档 head 中的一份子,居于<head>元素的内部,且没有结束标签;
该标签提供了很多网页相关的信息,且这些信息都是隐藏的属性;
该标签通过一个name属性来设置元数据,而元数据所对应的值则放在content属性里,有点于对象的key/value类似;
如下罗列一些日常开发中可能会涉及到的常用属性:
一.http-equiv
该属性类似于请求的头部,其作用是向浏览器传回相关的信息,例如如下一些较为常用的
1.content-type
用于声明网页字符的编码
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-f'>
或者简洁一些的方式
<meta charset="utf-8">
注:该标签应放置于<head>标签内的最首行的位置,高于<title>
2.expires
用于设置浏览器时效性
<meta http-equiv='expires' content='Wed, 10 Jun 2022'>
3.pragma
用于设置浏览器本地缓存机制,浏览器是否可以从本地缓存中读取访问内容
<meta http-equiv='pragma' content='no-cache'>
4.set-cookie
用于设置浏览器中cookie相关
<meta http-equiv='set-cookie' content='cookievalue=xxx;expires=Thursday, 04-Nov-2021 11:05:00 GMT； path=/'>
5.refresh
用于页面的自动刷新或重定向
<meta http-equiv='refresh' content='2; URL='https://blog.csdn.net/survivorsfyh''>
6.window-target
用于页面是否需要独立显示,可配置 _top、_blank、_parrent、_self
<meta http-equiv='window-target' content='_top'>
7.page_enter、page_exit
用于页面进入或离开时的特效
有几种过渡的方式可以依次尝试从0到23;
盒状收缩: 0 盒状放射: 1
圆形收缩: 2 圆形放射: 3
由下往上: 4 由上往下: 5
从左向右: 6 从右向左: 7
百叶窗(垂直): 8 百叶窗(水平): 9
百叶窗(水平格状): 10 百叶窗(垂直格状): 11
溶解: 12
13:从左右两端向中间 14:从中间向左右两端
15:从上下两端向中间 16:从中间向上下两端
17:从右上角向左下角 18:从右下角向左上角
19:从左上角向右下角 20:从左下角向右上角
21:水平线状 22:垂直线状
23:随机
<meta http-equiv='page-enter' content='revealTrans(duration=1.0, transtion=4)'>
<meta http-equiv='page-exit' content='revealTrans(duration=1.0, transtion=7)'>
二.name
该属性用于对网页的描述,与 http-equiv 的用法类似,name 为 key 即属性名称,content 为 value 即设置属性值
1.author
用于设置网页的作者
<meta name='author' content='survivorsfyh'>
2.description
用于设置一些描述信息
<meta name='description' content='xxxxxxx'>
3.keywords
用于设置一些关键词、关键字相关
<meta name='keywords' content='key1, key2, key3'>
4.revlsed
用于设置一些版本号相关
<meta name='revised' content='V1.0.0'>
以上便是此次分享的全部内容，希望能对大家有所帮助！
网友评论