html5教程

文档类型声明

<!DOCTYPE HTML>

H5 meta全解

声明文档使用的字符编码

<meta charset='utf-8'>

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

页面描述

<meta name="description" content="不超过150个字符"/>

页面关键词

屏幕的缩放

<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">

width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
<p>height viewport 的高度 （范围从 223 到 10,000 ）</p>
<p>user-scalable [yes | no]是否允许缩放</p>
<p>initial-scale [数值] 初始化比例（范围从 &gt; 0 到 10）</p>
<p>minimum-scale [数值] 允许缩放的最小比例</p>
<p>maximum-scale [数值] 允许缩放的最大比例</p>
<p>target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）<br />
-- dpi_value 一般是70-400//没英寸像素点的个数<br />
-- device-dpi设备默认像素密度<br />
-- high-dpi 高像素密度<br />
-- medium-dpi 中等像素密度<br />
-- low-dpi 低像素密度</p>
<pre><code>####忽略电话号码和邮箱
`&lt;meta name=&quot;format-detection&quot; content=&quot;telphone=no, email=no&quot;/&gt;`
####设置作者姓名及联系方式
`&lt;meta name=&quot;author&quot; contect=&quot;hadong, dhso@163.com&quot; /&gt;`
####搜索引擎抓取
`&lt;meta name=&quot;robots&quot; content=&quot;index,follow&quot;/&gt;`
####启用360浏览器的极速模式(webkit)
`&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;`
####避免IE使用兼容模式
`&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;`
####不让百度转码
`&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-siteapp&quot; /&gt;`
####针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
`&lt;meta name=&quot;HandheldFriendly&quot; content=&quot;true&quot;&gt;`
####微软的老式浏览器
`&lt;meta name=&quot;MobileOptimized&quot; content=&quot;320&quot;&gt;`
####UC强制竖屏
`&lt;meta name=&quot;screen-orientation&quot; content=&quot;portrait&quot;&gt;`
####UC强制全屏
`&lt;meta name=&quot;full-screen&quot; content=&quot;yes&quot;&gt;`
####UC应用模式
`&lt;meta name=&quot;browsermode&quot; content=&quot;application&quot;&gt;`
####QQ强制竖屏
`&lt;meta name=&quot;x5-orientation&quot; content=&quot;portrait&quot;&gt;`
####QQ应用模式
`&lt;meta name=&quot;x5-page-mode&quot; content=&quot;app&quot;&gt;`
####添加 RSS 订阅
`&lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;RSS&quot; href=&quot;/rss.xml&quot;/&gt;`
####添加 favicon icon
`&lt;link rel=&quot;shortcut icon&quot; type=&quot;image/ico&quot; href=&quot;/favicon.ico&quot;/&gt;`
####SNS 社交标签
</code></pre>
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />

Windows 8 磁贴颜色

<meta name="msapplication-TileColor" content="#000"/>

Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon.png"/>

windows phone 点击无高光

<meta name="msapplication-tap-highlight" content="no">

IOS 开启全屏显示

<meta name="apple-mobile-web-app-capable" content="yes">

IOS 改变顶部状态条的颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
在 web app 应用下状态条（屏幕顶部条）的颜色, 默认值为 default（白色）,可以定为 black（黑色）和 black-translucent（灰色半透明）;

Safari 设置'添加到主屏幕图标'

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>

Safari 设置桌面图标的标题

<meta name="apple-mobile-web-app-title" content="标题">

判断浏览器

<!--[if lt IE 7 ]><html class="oldie ie ie6"> <![endif]-->
<!--[if IE 7 ]><html class="oldie ie ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->