您的位置:首页 > Web前端 > HTML

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

2017-04-13 10:34 671 查看
标签定义及使用说明
<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">
a76c

清除浏览器中的缓存,它和其它几句合起来用,就可以使你再次进入曾经访问过的页面时,浏览器必须从服务端下载最新的内容,达到刷新的效果。用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从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查询,实现不同终端的适配
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: