手机视频网站系统HTML5播放器怎么做？

首先swf就是flash的视频格式。而且flash虽然不说是一统天下，但是现在HTML5的video视频播放器刚开始起步，根本不可能替代flash，所以就算你用了HTML5的video来做网页，也必须加上Flash做后备，用HTML5video的作用在于：现在先写好标签，等过N年之后，video越来越强大，到时候你就不用再重新写代码了。但谁都不知道那个“N年”到底是多久。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网页空间、营销软件、网站建设、邹城网站维护、网站推广。

其次，HTML5支持的视频格式非常有限，目前一般有：

H.264

Ogg Vorbis

WebM

而且各个浏览器分别支持不同格式，除了Chrome，好像没有浏览器能完全支持以上三种HTML5视频格式。你如果仅仅使用HTML5video来做网页，估计你的视频网站客户很快就跑光了，因为他们绝大部分没法看你的视频。

html5 里面的meta有什么用

meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。

1、声明文档使用的字符编码

meta charset='utf-8'11

2、声明文档的兼容模式

meta http-equiv="X-UA-Compatible" content="IE=edge" / 指示IE以目前可用的最高模式显示内容

meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" /指示IE使用 !DOCTYPE 指令确定如何呈现内容。标准模式指令以IE7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。1212

3、SEO 优化

meta name="description" content="不超过150个字符" /页面描述

meta name="keywords" content="html5, css3, 关键字"/页面关键词

meta name="author" content="魔法小栈" /定义网页作者

meta name="robots" content="index,follow" /定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。12341234

4、为移动设备添加 viewport

meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

content 参数解释：

width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：

meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"1234567891012345678910

5、iOS 设备

meta name="apple-mobile-web-app-title" content="标题"添加到主屏后的标题（iOS 6 新增）

meta name="apple-mobile-web-app-capable" content="yes" /是否启用 WebApp 全屏模式

meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /设置状态栏的背景颜色

只有在 "apple-mobile-web-app-capable" content="yes" 时生效

content 参数：

default 默认值。

black 状态栏背景是黑色。

black-translucent 状态栏背景是黑色半透明。

设置为 default 或 black ,网页内容从状态栏底部开始。

设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。1234567891012345678910

6、iOS 图标 rel 参数

apple-touch-icon 图片自动处理成圆角和高光等效果。

apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。

link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /iPhone 和 iTouch，默认 57x57 像素，必须有

link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /iPad，72x72 像素，可以没有，但推荐有

link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /Retina iPad，144x144 像素，可以没有，推荐大家使用

meta name="apple-mobile-web-app-title" content="标题"title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS 6 新增）12345671234567

7、iOS 启动画面

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004（标准分辨率）

link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /iPad 竖屏 1536x2008（Retina）

link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /iPad 横屏 1024x748（标准分辨率）

link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /iPad 横屏 2048x1496（Retina）

link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /iPhone/iPod Touch 竖屏 640x960 (Retina)

link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /

link rel="apple-touch-startup-image" href="Startup.png" / 当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好123456789101112123456789101112

8、Windows 8

meta name="msapplication-TileColor" content="#000"/ Windows 8 磁贴颜色

meta name="msapplication-TileImage" content="icon.png"/Windows 8 磁贴图标1212

9、不常用的

link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /添加 RSS 订阅

link rel="shortcut icon" type="image/ico" href="/favicon.ico" /添加 favicon icon

meta name="format-detection" content="telephone=no" /禁止数字识自动别为电话号码

meta name="format-detection" content="email=no" /不让android识别邮箱

meta name="renderer" content="webkit"启用360浏览器的极速模式(webkit)

meta http-equiv="X-UA-Compatible" content="IE=edge"避免IE使用兼容模式

meta name="HandheldFriendly" content="true"针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓

meta name="MobileOptimized" content="320"微软的老式浏览器

meta name="x5-orientation" content="portrait"QQ强制竖屏

meta name="full-screen" content="yes"UC强制全屏

meta name="x5-fullscreen" content="true"QQ强制全屏

meta name="browsermode" content="application"UC应用模式

meta name="x5-page-mode" content="app"QQ应用模式

meta http-equiv="Cache-Control" content="no-siteapp" /禁止百度转码

meta name="msapplication-tap-highlight" content="no"windows phone 点击无高光

meta name="keywords" content="" / 关键字

meta name="description" content="" / 描述

meta name="title" content="" / 标题

meta name="author" content="-06" / 作者

meta name="Copyright" content="" / 公司

meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核

meta name="apple-mobile-web-app-capable" content="yes" IOS6全屏

meta name="mobile-web-app-capable" content="yes" Chrome高版本全屏

meta name="renderer" content="webkit" 让360双核浏览器用webkit内核渲染页面

meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）1234567891011121314151617181920212223242512345678910111213141516171819202122232425

10、sns 社交标签

参考微博API

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="描述" /1234512345

11、条件注释判断IE浏览器

!--[if IE]条件注释区分非IE浏览器

!--[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]--

!--[if lt IE 9] ![endif]--123456123456

12.如果页面上出现很多http请求会自动转换成https

meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /

HTML5这个格式对吗？

没错的 这个基本格式

!DOCTYPE html

html

head

title文档的标题/title

/head

body

文档的内容......

/body

/html

HTML5终于定稿，谈谈怎么改变世界

我们第一次谈论 HTML5 要改变世界大概是因为乔布斯，他坚持在 iOS 上不兼容 Flash，在 Adobe 统治多媒体开发的那个年代，这需要付出极大的勇气。这么多年过去了，虽然所有人都在谈论 HTML5，但是大部分人甚至都忘了它还是一个仍在完善中的体系。

2007 年 W3C（万维网联盟）立项 HTML5，直至 2014 年 10 月底，这个长达八年的规范终于正式定稿。接下来，HTML5 将真正开始颠覆原生（Native） App 世界。虽然这种危言耸听已经让人有点厌烦。但是如果回顾 HTML 这些年走过的路，你就不会再怀疑它的能量。

一、HTML5的诞生

自 W3C 于 1999 年发布 HTML4 后，Web 世界快速发展，一片繁荣。人们一度认为 HTML 标准不需要升级了。一些致力于发展 Web App 的公司另行成立了 WHATWG 组织，直到 2007 年，W3C 从 WHATWG 接手相关工作，重新开始发展 HTML5。

HTML5 的发展史，有用户的需求在推动，有技术开发者的需求在推动，更有巨大的商业利益在推动。在互联网的早期，对用户而言，能打开浏览器接入到互联网世界就是一个神奇的事情，但互联网发展到 2005 年前后，开始出现下一个变化，就是宽带互联。

随着宽带的普及和电脑性能的增强，人们不再满足于单纯的通过互联网看新闻、收发邮件，消耗更高带

宽的娱乐产品开始出现，就是流视频和网页游戏。其实视频和游戏是古老的需求，在互联网不普及的时候，需求的满足方式是离线传输的 VCD

和游戏光盘；后来互联网逐渐普及，人们更改了使用方式，通过下载软件 + 本地媒体播放器来看视频，下载体积较大的端游玩游戏。

但是对消费者体验更好的新方式还是出现并颠覆了以前的一切，那就是流媒体和网页游戏。Youtube 等公司把握住潮流飞速崛起，各种页游公司也如雨后春笋。

HTML

标准没有把握住产业的变化及时演进，浏览器产品也未升级，这块新需求被浏览器插件满足了，那就是

Flash。这个部署在亿万浏览器里的商业插件俨然成为事实标准。2005 年 Adobe 巨资收购 Macromedia，把 Flash

收归旗下，紧接着大幅推广 FLV 流媒体和 action script 语言，很明显这桩收购可以列为 IT 并购的经典案例，FLV 流媒体和

Flash 游戏风靡互联网，Adobe 在新的产业升级中攫取了大量的利润。

除了 Flash 这个商业产品成为了事实标准，W3C

还面临一个尴尬，就是另一个私有扩展协议的制造者—IE。IE 当时在桌面浏览器占有垄断地位，并且扩展了大量的 IE Only

语法，开发者完全不知道这些语言是谁定义的。整个 web 世界，就被两家公司微软 +Adobe 绑架了。

很多 IT 巨头都坐不住了，尤其是苹果和 Google。PC

操作系统的世界难有突破，Web 浏览器被苹果寄予厚望；新贵 Google 虽然大量赞助 Mozilla，但并未对 IE

的地位产生实质影响，收购了 YouTube 后发现命脉在 Adobe 手里，也是非常难过，而且 Google 每年给 IE 的搜索框和

Adoble FLV 缴纳的费用真不是小数目。

既然大家都是 W3C 的主席单位，好吧，我们重新开始做 HTML5 吧。是的，HTML5 其实就是这么诞生的。

二、HTML5第一阶段： Web 增强与破垄断

自 HTML5 诞生以来，一共经历了两个阶段，分别是 Web 增强和移动互联网。我们先从 Web 增强说起。Web 体验的丰富增强主要表现在：

WebApp HTML5新增了离线存储、更丰富的表单（比如Input type=date）、js线程、socket、标准扩展embed、css3…

流媒体 HTML5新增了audio、video

游戏 HTML5新增了canvas、webgl

当然 HTML5 还为搜索引擎的语义分析做了优化，比如新增 Header 和 Section 等标签，也在无障碍等领域做了不少工作，这些不再多述。HTML5 在流媒体和游戏方面的努力，成功的遏制了 Flash 的发展，然后就该遏制 IE 私有语法了。

在 HTML5 标准的升级过程中，苹果和 Google

同时也看到了浏览器市场重新洗牌的机会，他们一方面参与 HTML5 的规范，一边在浏览器产品上发力。Apple 首先开始大力发展

Safari，建立 WebKit 开源项目，迁移 Safari 到 Windows 平台；Google 起初是赞助 Mozilla 开发

Firefox，后来自己开发了 v8 引擎，合并 WebKit，于 2008 年正式推出 Chrome。“IE 的私有规范 +Flash

不是标准，我们才是标准”这样的口号在新一代浏览器大战中打响，IE 瞬间成为千夫所指的垄断代表，甚至成了阻碍 Web 发展的罪人（当时 IE6

已数年未更新，并且丝毫不惧 Firefox 的发展）。

、

偏偏微软此时也出了晕招，推出了一系列即不完整支持规范又互相不兼容的 IE7、8、9、10，彻底失去了开发者的支持。

Adobe 的 Flash 被遏制，与 Web 霸主的位子擦肩而过；IE

的私有标准被遏制，并且造成 IE 市场份额不停下滑，直到 IE 最新的移动版本反过来开始支持 WebKit 语法，真是令人唏嘘。不知道

HTML6 是不是该打倒 WebKit 垄断了。

三、HTML5第二阶段： 移动互联网

随着 Chrome 和 Safari 的高歌猛进，以及 IE+Flash

的衰落，HTML5 告一段落，进入了下一个时代——移动互联网。HTML5 的跨平台优势在移动互联网时代被进一步凸显。HTML5 是唯一一个通吃

PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平台的跨平台语言。Java 和 Flash

都曾梦想这个位置，但梦断于 iOS。此时人们纷纷开始研究基于 HTML5 开发跨平台手机应用。很多人当时认为，原生应用只是过渡，就像当年从

C/S 结构转变为 B/S 结构一样。而且学习 Objective-C 和 Java 很费劲，我既然会网页开发，为何不试试 HTML5。

W3C 此时成立了 Device API 工作组，为 HTML5 扩展了

Camera、GPS 等手机特有的 API，然而麻烦的是，移动互联网初期的迭代太快了，手机 OS 在不停的扩展硬件

API，陀螺仪、距离感应器、气压计。。。每年手机 OS 都有大版本更新。而 W3C

作为一个数百家会员单位共同决策的组织，从标准草案的提出到达成一致是非常复杂的过程，跟不上移动互联网初期的快速迭代。

PhoneGap 的出现，给开发者打开了一扇窗。很多人期待 PhoneGap 不停扩展 API，来补充浏览器的不足。Adobe 看到

PhoneGap 仿佛看到了重振江湖地位的希望，但在 Adobe 收购 PhoneGap 后，又发现这个东西问题很多，而且开源使得 Adobe

无法像 Flash 那样获取商业利益，于是就把 PhoneGap 捐给了 Apache，改名为 Cordova。

因为各种原因，Cordova

的定位最终没有成为浏览器的强化，而走向了混合式开发。基于当时的背景，他们认为原生是不可替代的，“原生 +HTML5”的混合模式更有意义。所以现在

Cordova 的使用往往是“原生工程师 +HTML5 工程师”一起协作完成 App。

这时 Facebook 加入了 W3C，牵头成立了 Mobile Web

工作组。Facebook 是混 Web 圈的，并且在手机 OS 上并无自己的领地，他不喜欢被苹果和 Google

掌控的原生应用生态系统。Mobile Web 这个工作组的重要目标就是让 HTML5

开发的网页应用达到原生应用的体验。然而，事与愿违，它不努力也就算了，结果是努力了却失败了。2012 年，Facebook 放弃了 HTML5

的新闻充斥了全世界的 IT 媒体，HTML5 瞬间被打入冷宫。

Facebook 为何放弃 HTML5？核心是当时基于 HTML5 真的做不出好的移动

App。对比 Twritter 等竞争对手的原生 App，Facebook 的 HTML5 版本实在无法让用户满意。比如 Push 功能，到现在

HTML5 的推送和原生的推送体验差距依然巨大，更不用说 HTML5 应用的页面切换白屏、下拉刷新 /

侧滑菜单不流畅等众多问题。看着原生工程师轻松实现摇一摇、二维码、语音输入、分享到朋友圈等功能，更是让 HTML5 工程师感觉自己站错了队。

即使 Facebook 不喜欢被控制，也不能拿被用户抛弃来冒险。而且 Facebook 并没有掌握关键点—手机浏览器内核。如果浏览器不跟上，其他都是白搭。

而浏览器在手机上的表现是什么呢？先看 Google，Chrome 性能虽高，但

Android 上的浏览器却并非 Chrome，而是 WebKit 改出来的一个蹩脚的 Android 浏览器；再看苹果，iOS

上不允许其他浏览器引擎上架 App Store，而且其他使用 Safari 引擎的应用也无法调用苹果自己的 JavaScript 加速引擎

Nitro。结果是苹果和 Google 不但不在浏览器上积极实现 HTML5 关于移动 App 所需的规范，反而对 HTML5 做出种种限制。

不管是当时硬件能力不足，还是手机 OS 厂商的故意限制，总之结果很明显：在移动互联网的初期，一定是原生应用生态系统的天下，iOS 和 Android 首先把自己变成老大后，其他小弟才能寻觅到成长的机会。

Facebook 也好，PhoneGap 也好，想在移动互联网初期就分一杯羹是分不到的，但坚持下来，机会往往会出现。

四、HTML5这回真的来了

HTML5 在这个时间定稿，不晚不早，硬件性能更强、手机 OS 迭代速度下降。随着

HTML5 标准定稿，一切纷争将告一段落，现在，属于 HTML5 的时代到来了。这个曾让人满怀希望，又被 Facebook

等众多满怀希望的开发者放弃的技术，现在会告诉大家，曾经让各位失望的原因，现在已经不存在了！这听起来有些惊人，大家不禁要问：是真的吗？让我们细细分

析。

业内俗称 HTML5 有“性功能”障碍。即 HTML5 性能不如原生、开发工具不如原生、能力调用不如原生。

这几个问题导致开发者无法使用 HTML5 做出与原生一样的 App。然而，不管是硬件升级还是 OS 厂商策略变化，以及相关软件技术的成熟，已解决了 HTML5 的“性工能”障碍。

移动端硬件军备竞赛 2011年，iPhone 4s的CPU是A5，现在iPhone 6是A8，按苹果的历次发布会的说法，速度共提升了7.5倍。这3年间7.5倍的速度提升，抹平了太多HTML5的性能问题。

苹果、Google的策略变化 Google

在2013年底发布的Android 4.4，内置的Webview不再是蹩脚的Android

WebKit浏览器，而是Chromium。2012年iPhone

5发布后，HTML5在iOS上的表现已令人满意，Safari独家的JavaScript加速引擎Nitro不再那么重要，不过在iOS

8发布后，苹果还是很识趣地取消了三方程序调用Nitro的限制，现在任意浏览器或应用调用iOS的UIWebview都可以利用Nitro加速。两大手

机操作系统霸主和浏览器巨头的态度发生了变化，使得HTML5在手机上的发展不再受限，而且这个变化不可逆只能继续向前，这种变化势必会产生深远的影响。

软件技术的成熟 PhoneGap的发展虽然放缓了，但其他产品技术却成熟了。2014年的iWeb大会上，众多厂商的产品提供了面向开发者免费或开源的HTML5性工能障碍的解决方案。

我们都知道浏览器的默认控件样式和原生控件样式差别很大，一个高性能的、样式体验与原生控件一样

的 UI 框架是非常重要的，之前 jQuery Mobile 等产品的因性能不足，所以难当此任。在这里做一个广告，我所在的 DCloud 公司在

iWeb 大会上发布了系统的 HTML5“性工能缺失”的解决方案，包括解决 HTML5 性能问题的手机端引擎、超快的 HTML5 开发 IDE

产品 HBuilder、还有把 40 万原生 API 封装成 JavaScript 对象，以解决 HTML5 能力不足问题的

Native.js 技术。

英特尔公司发布了 Crosswalk 引擎，可以让 Android 4.0-4.3

的手机上的应用打包 Chromium 引擎而不是 Android WebKit。虽说未来 Android 4.4

会占据更多市场份额，但目前主流的 Android 手机的系统版本毕竟还是 4.1、4.2。

在专业方向上很多公司也做出了不错的成绩。触控的 Cocos2d-html5、Egret runtime 和 Ludei CocoonJS 强化了 Canvas 的表现，让 HTML5 游戏体验更好；UC、猎豹等手机浏览器也强化了音视频播放的表现。

不管是硬件升级、软件成熟，还是操作系统厂商策略变化，都在强力推动 HTML5 的爆发。

不过要注意，我说的 HTML5 爆发，不是指手机浏览器爆发。有人说 HTML5 不好，因为用户讨厌打开浏览器输入 URL

的过程。我想说这种想法是对 HTML5 的片面理解。HTML5!= 传统浏览器，虽然编程语言还是

HTML、Javascript、CSS，但发行方式绝不是传统网站那么简单。HTML5 应用的入口，反而很少是启动浏览器输入

URL，它可以是存在于手机桌面的图标、也可以来自超级

App（如微信朋友圈）、以及搜索引擎、应用市场、广告联盟。。。到处都是它的入口。它的入口，比原生 App 更多。

五、原生App的颠覆

HTML5 的“性工能”障碍得到解决，可以接近原生 App 的效果，所以它就可以替代原生

App 吗？很多人认为，即使 HTML5 会发展的比现在好，也将是与原生 App 各占一部分市场的格局，要求不高的长尾应用会使用

HTML5，而主流应用仍是原生 App 的天下。

但我认为这样的想法很危险，就像 HP 的高层告诉沃兹：谁会在家里摆一台电脑呢？未来 HTML5 肯定会颠覆原生 App。“性工能”障碍的消除，只是 HTML5 的劣势被削弱，但劣势被消除后，它的优势就会大放异彩，HTML5 的优势是什么？对开发者来说：

跨平台 在

多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电脑早期世

界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平

台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。

快速迭代 移

动互联网是一个快鱼吃慢鱼的时代，谁对用户的需求满足的更快，谁的试错成本更低，谁就拥有巨大的优势。互联网产品大多免费、且有网络效应，后入者抢夺用户

的难度非常大。使用原生开发，从招聘、开发、上线各个环节的效率都慢一倍以上，而且参与的人越多，沟通效率往往拖慢不止一倍。

减低成本 创业者融资并不容易，如何花钱更高效非常重要。如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别，但你的开发成本高出一倍，我相信没有投资人会喜欢给你投钱。

导流入口多 HTML5应用导流非常容易，超级App（如微信朋友圈）、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。

分发效率高 前

段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore，绝对没有那么多流量，超级App带来的流量，远大于原生应用市场。假如微信允许

游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广

告，广告变用户的转化率，页游远远高于端游。

HTML5

对用户的好处是：和流量入口多、分发效率高相对应的。大幅降低使用门槛。用户眼睛看到一个兴趣点，点击后，就应该立即开始满足用户需求。比如流媒体可以立

即看，页游可以立即玩。而目前的原生应用市场，用户需要这样操作：选一个应用、等待下载、确认权限、等待安装，然后点击打开。这样糟糕的体验迟早要被颠

覆。不管是 App、游戏还是音视频，未来都将即点即用。谁先满足用户这个需求，谁就制胜。

这就是所谓“天下武功，唯快不败”。分析至此，我们可以明显的看出，不管是站在最终用户角度、还是站在开发者角度，HTML5 必将取代原生应用当前的位置。并由此引发一系列颠覆。

六、还有什么会被改变？

HTML5 的爆发，原生 App 生态系统的颠覆，是一场产业革命，很多角色都会受到影响，我们来预测一番。

标准的 HTML5 引擎并不能解决 HTML5 的所有问题，拥有大流量入口的互联网巨头，莫不在思考内嵌更优秀的增强引擎。腾讯推出了 X5 浏览器引擎，就是看中这个机会。

目前各路浏览器厂商、应用市场厂商、甚至 rom 厂商，都在努力整合更优质的浏览器引擎。

假使微信内嵌的 webview 可以运行更优秀的 canvas 游戏、假使 360 手机助手可以发行即点即用的 HTML5

应用并且能力体验与原生一致、假使小米 rom 内置更强大的 webview 使得所有 HTML5

应用在小米手机上运行的更流畅。所有巨头都会闻风而动，没错，这场战役会是移动互联网世界的二次世界大战。

应用分发市场将面临洗牌，

由于超级 App 的巨大流量能轻易成为 HTML5

应用的入口，并且会形成大者更大的效应，传统的应用商店、甚至线下预装，这些流量不足和效率偏低的发行模式将被挤出市场主流。本身也是超级 App

的大流量应用商店，如果转型得当，也将以发行 HTML5 应用为主。

原生的广告和统计SDK提供商会面临尬尴，Google、百度等基于网页的广告和统计服务会取得更大的优势。开发者不再需要打包 SDK，引入一个 Script 即可。

开源技术将在移动互联网领域更加流行。HTML 的开放性造就了大量的开源产品，也反向促进了 HTML 的繁荣。在 Github 上有大量的 JS 框架，而原生的开源代码数量相比甚少。而未来移动互联网世界将因为开源而发展的更迅速，这里也同样存在类 Github 厂商的机遇。

早期 HTML 只需要记事本写几个 Tag，中期的 HTML、JS、CSS

比较复杂，需要更高级的文本编辑器，但 HTML5 到来后，它的代码量、复杂度、开发模型将与原生开发看齐，需要类似 XCode、Eclipse

等专业的 IDE 工具来解决开发、调试的问题。一些以会使用记事本写代码为荣的开发者，将面临思路转换甚至被更高效的开发者淘汰。

HTML5 的强大会引发很多安全问题，并且解决思路与原生不一样，业内有可能会出现新的安全厂商领导者。

七、结语

写到结尾，感觉话题有点大了。其实未来如何发展是没人能准确预测的，变量非常多。但我想让用户和开发者都更方便的趋势是不会错的。欢迎大家一起讨论 HTML5 的问题，在争议中提炼真知。（36氪最近将会优先接受一些 HTML5 的开发者来投稿参与讨论，关注但不限于 HTML 游戏开发，浏览器内核，轻应用分发，邮箱 tips#36kr.com）

HTML5定稿了，为什么原生App世界将被颠覆

过去这些年，HTML5颠覆了PC互联网的格局，优化了移动互联网的体验，接下来，HTML5将颠覆原生App世界。这听起来有点危言耸听，但若认真分析HTML5的发展史，你会发现，这个世界的发展趋势确实就是这样。

熟知历史才能预知未来，先让我们来看看HTML5为什么诞生、这8年是怎么过来的。

一、 HTML5的诞生

自W3C于1999年发布HTML4后，Web世界快速发展，一片繁荣。人们一度认为HTML标准不需要升级了。一些致力于发展Web App的公司另行成立了WHATWG组织，直到2007年，W3C从WHATWG接手相关工作，重新开始发展HTML5。

HTML5的发展史，有用户的需求在推动，有技术开发者的需求在推动，更有巨大的商业利益在推动。

在互联网的早期，对用户而言，能打开浏览器接入到互联网世界就是一个神奇的事情，但互联网发展到2005年前后，开始出现下一个变化，就是宽带互联。

随着宽带的普及和电脑性能的增强，人们不再满足于单纯的通过互联网看新闻、收发邮件，消耗更高带宽的娱乐产品开始出现，就是流视频和网页游戏。其实视频和游戏是古老的需求，在互联网不普及的时候，需求的满足方式是离线传输的VCD和游戏光盘;后来互联网逐渐普及，人们更改了使用方式，通过下载软件+本地媒体播放器来看视频，下载体积较大的端游玩游戏。

但是对消费者体验更好的新方式还是出现并颠覆了以前的一切，那就是流媒体和网页游戏。Youtube等公司把握住潮流飞速崛起，各种页游公司也如雨后春笋。

但是HTML标准没有把握住产业的变化及时演进，浏览器产品也未升级，这块新需求被浏览器插件满足了，那就是Flash。这个部署在亿万浏览器里的商业插件俨然成为事实标准。2005年Adobe巨资收购Macromedia，把Flash收归旗下，紧接着大幅推广FLV流媒体和action script语言，很明显这桩收购可以列为IT并购的经典案例，FLV流媒体和Flash游戏风靡互联网，Adobe在新的产业升级中攫取了大量的利润。

除了Flash这个商业产品成为了事实标准，W3C还面临一个尴尬，就是另一个私有扩展协议的制造者—IE。IE当时在桌面浏览器占有垄断地位，并且扩展了大量的IE Only语法，开发者完全不知道这些语言是谁定义的。整个web世界，就被两家公司微软+Adobe绑架了。

很多IT巨头都坐不住了，尤其是苹果和Google。PC操作系统的世界难有突破，Web浏览器被苹果寄予厚望，而且第一代iPhone只支持网页，那时还没有Appstore，Safari是乔布斯非常看重的产品;新贵Google虽然大量赞助Mozilla，但并未对IE的地位产生实质影响，收购了YouTube后发现底层被Adobe控制，也是非常难过，而且Google每年给IE的搜索框和Adoble FLV缴纳的费用真不是小数目。

既然大家都是W3C的主席单位，好吧，我们重新开始做HTML5吧。

是的，HTML5其实就是这么诞生的。那是2007年，IE和Flash由盛转衰的转折点。

二、 HTML5第一阶段： Web 增强与破垄断

自HTML5诞生以来，一共经历了两个阶段，分别是Web增强和移动互联网。我们先从Web 增强说起。

web体验的丰富增强主要表现在：1. webapp，比如gmail;2. 流媒体;3. 游戏。我们就这3个方面来讲HTML5做了什么。

1. webApp

HTML5新增了离线存储、更丰富的表单(比如Input type=date)、js线程、socket王乐、标准扩展embed、以及很多css3新语法…

2. 流媒体

HTML5新增了audio、video

3. 游戏

HTML5新增了canvas、webgl

当然还有Google努力在HTML5中推进Header和Section等标签，以利于搜索引擎分析，这些不多述。

HTML5补充流媒体和游戏能力后，加上苹果强势拒绝在iOS上引入Flash，成功的遏制了Flash的发展，然后就该遏制IE私有语法了。

在HTML5标准的升级过程中，苹果和Google同时也看到了浏览器市场重新洗牌的机会，他们一方面参与HTML5的规范，一边在浏览器产品上发力。Apple首先开始大力发展Safari，建立WebKit开源项目，Mac、iOS、Windows多平台齐发力;Google起初是赞助Mozilla开发Firefox，后来自己开发了v8引擎，合并WebKit，于2008年正式推出Chrome。“IE的私有规范+Flash不是标准，我们才是标准”这样的口号在新一代浏览器大战中打响，IE瞬间成为千夫所指的垄断代表，甚至成了阻碍Web发展的罪人(当时IE6已数年未更新，并且丝毫不惧Firefox的发展)。

偏偏微软此时也出了晕招，推出了一系列即不完整支持规范又互相不兼容的IE7、8、9、10，彻底失去了开发者的心。

Adobe的Flash被遏制，与Web霸主的位子擦肩而过;IE的私有标准被遏制，并且造成IE市场份额不停下滑，直到IE最新的移动版本反过来开始支持WebKit私有语法，真是令人唏嘘。不知道HTML6是不是该打倒WebKit垄断了。

三、 HTML5第二阶段： 移动互联网

随着Chrome和Safari的高歌猛进，以及IE+Flash的衰落，HTML5告一段落，进入了下一个时代——移动互联网。HTML5的跨平台优势在移动互联网时代被进一步凸显。HTML5是唯一一个通吃PC、Mac、iPhone、iPad、Android、Windows Phone等主流平台的跨平台语言。Java和Flash都曾梦想这个位置，但梦断于iOS。此时人们纷纷开始研究基于HTML5开发跨平台手机应用。很多人当时认为，原生应用只是过渡，就像当年从C/S结构转变为B/S结构一样。而且学习Objective-C和Java很费劲，我既然会网页开发，为何不试试HTML5。

W3C此时成立了Device API工作组，为HTML5扩展了Camera、GPS等手机特有的API，然而麻烦的是，移动互联网初期的迭代太快了，手机OS在不停的扩展硬件API，陀螺仪、距离感应器、气压计。。。每年手机OS都有大版本更新。而W3C作为一个数百家会员单位共同决策的组织，从标准草案的提出到达成一致是非常复杂的过程，跟不上移动互联网初期的快速迭代。

PhoneGap的出现，给开发者打开了一扇窗。很多人期待PhoneGap不停扩展API，来补充浏览器的不足。Adobe看到PhoneGap仿佛看到了重振江湖地位的希望，但在Adobe收购PhoneGap后，又发现这个东西可商用性不足，而且开源使得Adobe无法像Flash那样获取商业利益，于是就把PhoneGap捐给了Apache，改名为Cordova。

因为各种原因，Cordova的定位最终没有成为浏览器的强化，而走向了混合式开发。基于当时的背景，他们认为原生是不可替代的，“原生+HTML5”的混合模式更有意义。所以现在Cordova的使用模型是“原生工程师+HTML5工程师”一起协作完成App。

这时Facebook加入了W3C，牵头成立了Mobile Web工作组。Facebook是混Web圈的，并且在手机OS上没有自己的领地，他不喜欢被苹果和Google掌控的原生应用生态系统。Mobile Web这个工作组的重要目标就是让HTML5开发的网页应用达到原生应用的体验。然而，事与愿违，它不努力也就算了，结果是努力了却失败了。2012年，Facebook放弃了HTML5的新闻充斥了全世界的IT媒体，HTML5瞬间被打入冷宫。

Facebook为何放弃HTML5?核心是当时基于HTML5真的做不出好的移动App。对比Twritter等竞争对手的原生App，Facebook的HTML5版本实在无法让用户满意。比如Push功能，到现在HTML5的推送和原生的推送体验差距依然巨大，更不用说HTML5应用的页面切换白屏、下拉刷新/侧滑菜单不流畅等众多问题。看着原生工程师轻松实现摇一摇、二维码、语音输入、分享到朋友圈等功能，更是让HTML5工程师感觉自己站错了队。

即使Facebook不喜欢被控制，也不能拿被用户抛弃来冒险。而且Facebook并没有掌握关键点—手机浏览器内核。如果浏览器不跟上，徒然定一堆标准草案落不了地。

而浏览器在手机上的表现是什么呢?先看Google，Chrome性能虽高，但Android上的浏览器却并非Chrome，而是WebKit改出来的一个蹩脚的Android浏览器;再看苹果，iOS上不允许其他浏览器引擎上架App Store，而且其他使用Safari引擎的应用也无法调用苹果自己的JavaScript加速引擎Nitro。结果是苹果和Google不但不在浏览器上积极实现HTML5关于移动App所需的规范，反而对HTML5做出种种限制。

不管是当时硬件能力不足，还是手机OS厂商的故意限制，总之结果就是：在移动互联网的初期，一定是原生应用生态系统的天下，iOS和Android首先自己的地盘稳固后，产业才会向下个阶段升级。

Facebook也好，PhoneGap也好，想在移动互联网初期就分一杯羹是分不到的，但坚持下来，机会往往会出现。

在手机浏览器访问为什么不进mui.plusReady

为解决HTML5在低端Android机上的性能缺陷，mui引入了原生加速，其中最关键的就是webview控件，因此mui若要发挥其全部能力，需和5+ App配合适用，若脱离5+ App，mui功能会受限，主要涉及三个部分： 一、webview窗口相关 涉及webview的，除了5+App，其它所有手机浏览器及PC浏览器均无法使用，涉及功能点包括： webview模式窗体动画创建子窗口（除了为解决区域滚动的常见双webview场景，还涉及webview模式的选项卡等多webview场景）webview模式的侧滑菜单（也有div方式侧滑菜单）webview模式的tab选项卡（也有div方式选项卡）nativeUI，如原生的警告框、确认框、popover、actionsheet、toast。这些也有HTML5的实现。预加载自定义事件二、第三方扩展插件 涉及webview的，除了5+App，其它所有手机浏览器及PC浏览器均无法使用，目前主要包括：语音输入； 三、Touch事件相关（注意pc浏览器没有touch事件） Touch事件相关的，手机端浏览器均可使用、pc端chrome模拟手机浏览器也可以正常使用。 但普通PC端浏览器因为没有touch事件，可以显示控件但滑动操作功能会受限；涉及功能点包括： 手势事件mui封装的tap相关处理业务：折叠面板、二级列表、二级选项卡；mui封装的swipe、drag相关处理业务：图片轮播、可左右滑动的图文表格、可左右滑动的9宫格、滑动触发列表项菜单、可拖动式侧滑菜单、下拉刷新和上拉加载、可拖动式选项卡【备注】：在PC端，大家将tap替换成click，将HTML5默认的Drag事件替换mui 的swipe和drag，就可以解决如上两个问题。 除上述列出的功能点，其它mui功能，均可以在其它手机浏览器及PC服务端使用，所有CSS均不受影响。

文章标题：html5宫格,html九宫格div
文章转载：http://azwzsj.com/article/dsddsgh.html