HTML页面meta标签常用的属性/属性值

标签定义及使用说明
<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
web开发中我们经常用到meta标签,这里我们来汇总一些meta标签常用的属性及其属性值。
1.<meta charset="UTF-8">
charset 属性是 HTML5 中的新属性,定义HTML文档的字符编码,告诉浏览器使用要使用哪种编码格式编码,‘UTF-8’属性值是一种支持中文的编码格式,
如果不使用,在火狐、IE、搜狗等浏览器会出现中文乱码。
例如,如果不使用<meta charset="UTF-8">,<p>厉害了,我的哥</p>,会显示为:

2.<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
规定一个逗号分隔的关键词列表 - 相关的网页(告诉搜索引擎页面是与什么相关的)。提示:总是规定关键词(对于搜索引擎进行页面分类是必要的)。
3.<meta name="description" content="Free Web tutorials on HTML and CSS">
规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
4.<meta name="author" content="Hege Refsnes"> 规定页面的作者的名字。 5.<meta http-equiv="refresh" content="3">
定义文档自动刷新的时间间隔。如<meta http-equiv="Refresh" content="5;URL=http://www.baidu.com/">两秒后自动刷新并指向新页面。一般不推荐使用此属性,刷新页面通常使用js实现。
6.<meta http-equiv="X-UA-Compatible"content="IE=edge">
7.<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
8.<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
清除浏览器中的缓存,它和其它几句合起来用,就可以使你再次进入曾经访问过的页面时,浏览器必须从服务端下载最新的内容,达到刷新的效果。用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出 。
此属性用于:当我们使用IE浏览器渲染页面时,告诉IE应该使用其渲染引擎的最新版本(edge)。此属性官方解释比较冗余,个人理解是:使用IE浏览器渲染页面时,若该浏览器有多个版本的内核(IE9、IE10...)时,使用最高版本的内核渲染页面,这样也会对一些CSS3新特性兼容的更好,比如CSS动画在IE9是不能实现的。更多关于该标签的理解可以参考老外的解释(http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e)。在bootstrap框架中有使用该标签(http://getbootstrap.com/),如下图

'viewport'是一个显示区域,就是指定在设备的哪一区域显示页面,这个属性常用于移动端开发(如微信公众号页面)
width - viewport的宽度
此标签可以使当前显示区域成为一个响应式容器,可以使用CSS3新属性@media查询,实现不同终端的适配
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值