概述
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
下面列一下前端meta标签常用的几大类:
1.用于SEO优化(搜索引擎优化)
网页关键字
<meta name="keywords" content="jianshu-name"/>
网页描述
<meta name="description" content="jianshu-description"/>
搜索引擎索引方式
<meta name="robots" content="index, nofollow" />
<!-- 这里content可用值有:none,noindex,nofollow,all,index和follow-->
<!--
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。
-->
通知搜索引擎多少天访问一次
<meta name="revisit-after" content="15days"/>
2.用于移动端H5
申明代码
<meta charset='utf-8' />
响应式web设计-viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
针对一些不识别viewport的浏览器(如黑莓)
<meta name="HandheldFriendly" content="true">
WebApp启用全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />
隐藏状态栏/设置状态栏颜色(启用全屏模式下生效)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- content常用值有default,black,black-translucent -->
忽略数字自动识别为电话号码
<meta name="format-detection" content="telephone=no">
忽略识别邮箱
<meta name="format-detection" content="email=no">
QQ浏览器强制竖屏
<meta name="x5-orientation" content="portrait"/>
QQ浏览器强制全屏
<meta name="x5-fullscreen" content="true"/>
UC浏览器强制全屏
<meta name="screen-orientation" content="portrait"/>
UC浏览器强制全屏
<meta name="full-screen" content="yes"/>
3.用于Web端网页
网页中双内核浏览器优先加载webkit内核
<meta name="renderer" content="webkit">
网页中双内核浏览器优先加载IE兼容模式
<meta name="renderer" content="ie-comp">
禁止浏览器从本地计算机的缓存中访问页面内容
<meta http-equiv="Pragma" content="no-cache"/>
避免从第三方打开网页进行转码的问题
<meta http-equiv="Cache-Control" content="no-siteapp" />