[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" />

不希望手机自动将网页中的电话号码显示为拨号的超链接