[HTML知识体系]meta标签的常见用法
1.meta是什么
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
2.pc端常见
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta http-equiv="refresh" content="30">
需要注意的是
这个标签是XHTML的,可以算作已经废弃了,不建议使用了,直接
即可
3.移动端常见(比较重要)
1.清除缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
2.viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
这个对于移动端非常重要。参数的含义是:
width - // viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height - // viewport 的高度 (范围从223 到10,000)
initial-scale - // 初始的缩放比例 (范围从>0 到10)
minimum-scale - // 允许用户缩放到的最小比例
maximum-scale - // 允许用户缩放到的最大比例
user-scalable - // 用户是否可以手动缩 (no,yes)
minimal-ui - // iOS 7.1的Safari为meta标签新增minimal-ui属性,在网页加载时隐藏地址栏与导航栏
<meta name=”apple-mobile-web-app-capable” content=”yes” />
删除默认的苹果工具栏和菜单栏
3.拨号超链接
<meta name="format-detection" content="telephone=no" />
不希望手机自动将网页中的电话号码显示为拨号的超链接