见到很多人写H5页面都不设置头部，不忍直视，于是整理一篇文章，不定期更新，为了让自己显得专业一点，也为了方便自己复制粘贴

一般来说必须设置项

<!-- meta信息，可维护 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />

<!-- ====必须设置 Start==== -->

<!-- 页面编码 -->
<meta charset="UTF-8" />


<!--
       http-equiv常见还有其它如下等（合理使用可增加 SEO 收录）。
       Content-Language : 设置网页语言
       Refresh : 指定时间刷新页面
       set-cookie : 设定页面 cookie 过期时间
       last-modified : 页面最后生成时间
       expires : 设置 cache 过期时间
       cache-control : 设置文档的缓存机制
       ...
       -->

<!-- 缓存与过期时间设置 -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="Expires" content="0">

<!-- dns预加载（SEO优化） -->
<link rel="dns-prefetch" href="//css.cdn.com" />
<link rel="dns-prefetch" href="//js.cdn.com" />

<!-- 宽度默认100%全屏宽度，禁止手指缩放，初始缩放值1.0 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />


<!-- ====必须设置 End==== -->

根据使用配置项

<!-- ====根据使用配置Start==== -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">

<!-- 不自动识别手机号,邮箱地址 -->
<meta name="format-detection" content="telephone=no,email=no">

<!-- 页面关键字优化 -->
<meta name="keywords" content="H5页面通用配置">
<!-- 页面标签icon配置 -->
<link rel="icon" href="//icon.img.com/favicon.ico" type="image/x-icon">
<!-- 一些国内webkit内核浏览器默认使用极速模式 -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

<!-- apple-touch-icon：在webapp下，指定放置主屏幕上 icon 文件路径 -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

<!-- apple-touch-startup-image：在 webapp 下，设置启动时候的界面 -->

<link rel="apple-touch-startup-image" href="/startup.png" />

<!-- ====根据使用配置End==== -->

一些接近过时的参考项

<!-- ====几乎用不到 Start ==== -->

<!--禁用IE8兼容模式（IE8兼容模式使用的是IE7的渲染方式）-->

<meta http-equiv="X-UA-Compatible" content="IE=8" /> <!--//设置内核为IE8，这里改变时，下面会自动改变-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><!--//设置渲染文档模式为IE8-->
<!--使用IE8兼容模式-->
<meta http-equiv="X-UA-Compatible" content="IE=7" /><!--//设置内核为IE7，这里改变时，下面会自动改变-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" ><!--//设置渲染文档模式为IE7-->

<!-- 从左向右依次查询使用内核，左侧优先级高 -->
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9; IE=8;" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11;IE=EmulateIE10;IE=EmulateIE9;IE=EmulateIE8" />

<!--chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- ====几乎用不到 End ==== -->

源码