html5 app开发

HTML5是一些新的独立特性的集合，因此我们不能检测浏览器是否支持“HTML5”,但是我们可以分别检测浏览器是否支持诸如“画布(canvas)”、“视频(video)”、“地理位置(geolocation)”等特性 简介 做web前段开发人员已经习惯了处理多浏览器兼容(如IE、firefox、chrome)、多浏览器版本兼容(Ie6、ie7、ie8、ie9)，我们需呀从js和css上考虑让它如何兼容，如何一致；HTML5也一样，只是它更广泛的被浏览器开发商接受并兼容，而且效果良好；但是这里仍旧有一个问题，就是“有些老的浏览器不支持” :(；你把html5用的炉火纯青，忽然来个ie6用户；所以我们需要对浏览器对html5的支持做一定的检测，从而给用户以有好提示； 怎么检测 当浏览器在渲染web页面的时候会构造一个文档对象模型(DOM)，通过它来表示页面上的HTML元素，任何一个tag都会被表示为一个对象；当然也有windwos和document这些不和特定页面元素绑定在一起的全局对象； 所有的dom对象都共享一些属性，但是有些对象会拥有特定的属性。在支持HTML5特性的浏览器中，特性相关的dom对象就会有特定的属性。通过这些特定的属性，我们可以快速的检测出那些html5特性是被支持的。比如常见的四种方法： 1.检测全局对象(如window,navigator)是否拥有特定的属性

你也许会觉得Web前端开发是一个很简单的工作，但当你深入其中时，一定会发现好像Web前端开发不是那么简单，光网站性能优化、响应式、框架就让你焦头烂额。确实，做前端开发就是先易后难，想成为一个优秀的Web前端开发，没有那么简单。 不过，天下事难则不会，会则不难，你只需要掌握11项技能就可以成为Web前端“大拿” 一、入门必备的技能： 第1项技能：HTML超文本标记语言： 技能要点： HTML文件的结构 HTML文件的编写方法 HTML基本标记 文字与段落标记 框架 使用表单 XHTML页面结构 第2项技能：JavaScript脚本 技能要点： JavaScript基本语法 流程控制 函数 对象与数组 程序调试与错误处理 事件处理 处理文档对象 文档对象模型 window窗口对象 第3项技能：CSS网页样式布局 技能要点： CSS定位与div布局 div 标记与 span 标记 CSS+div美化与布局 CSS与JavaScript的综合应用 CSS与XML的综合运用 CSS与Ajax的综合应用 二、晋级提升必会的技能 第4项技能：HTML5开发技能 技能要点： HTML5语法 新增的input输入类型 新增的form元素 HTML5音频与视频 HTML5多媒体技术 Web存储 WebSQL混合开发 Workers多线程处理 第5项技能：常用Javascript框架 技能要点：

最近关于HTML5吵得火热，很多人认为HTML5出现会秒杀Flash，以至于在各大web前端开发论坛吵得不可开交。论坛里三言两语说的不够 尽兴，只好在自己一亩三分地里敞开了说说。也当一次神棍，展望一下web前端开发的未来。首先这里所说的HTML5也不仅指HTML5本身，而是泛指HTML5、CSS3、 JavaScript以及新的浏览器API所包含的整 个web端技术。 谁需要HTML5？ Google最需要！Apple的Jobs也需要。但这两个肯定各怀鬼胎。微软无所谓了，反正他还有Silverlight。 Mozilla/Firefox非盈利组织，目标可能会高尚些，是w3c标准就要支持。Opera那点浏览器市场占有率估计还没敢有太多想 法。 Google的云计算帝国就差一个支持 RIA(Rich Internet Applications)富互联网应用的客户端了，试想 HTML5得到普及，更多的应用转向BS模式时，微软帝国的桌面软件生态环境必定受到很大威胁，垂涎多年的Google一定是最大受益者。当在一台操作系 统免费的电脑上使用和MS Word差不多功能的免费Google Doc时，你还会掏钱买微软的Word吗？当你所有的办公应用都只需要打开浏览器窗口 时，你还会花钱买操作系统吗？Google的Chrome OS操作系统界面已经说明了这个意图。 Jobs也需要HTML5

跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程 作者： sunhuaqiang1 前端开发APP，从HBuilder开始~ 序 通过 HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.HTML5Plus.org组织，推出HTML5+规范。 HTML5+扩展了JavaScript 对象plus，使得js 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。 HBuilder 的手机原生能力调用分2 个层面： a) 跨手机平台的能力调用都在HTML5+ 规范里，比如二维码、语音输入，使用plus.barcode 和plus.speech。编写一次，可跨平台运行。 b) JS Bridge是另一项创新技术，通过js 可以直接调ios 和android 的原生API，这部分就不再跨平台，比如调ios game center，或在android 手机桌面创建快捷方式。 JSB 的用法是var obj = plus.android.import("android.content.Intent");将一个原生对象android.content.Intent 映射为js 对象obj，然后在js

快速增长的APP应用软件市场，以及智能手机的普及，手机应用：Native（原生）APP快速占领了APP市场，成为了APP开发的主流，但其平台的不通用性，开发成本高，多版本开发等问题，一直困扰着专业APP开发企业，和APP服务提供商。 安卓和IOS的操作方式，开发模式，界面UI显示方面的差别，也使得原生APP的不同版本体验有很大的区别，光是做兼容性调测，都要花费开发企业不少的时间。 近年来，另一种应用形态——基于HTML5技术的Web App也如雨后春笋般出现，于是关于原生APP与HTML5 APP 谁将成为未来的王者，APP开发者们一直争论不休。 html5最主要的优势： 1、一套HTML5 APP 即可同时适用安卓及IOS平台，甚至WP平台，适配性和统一体验较好。 2、版本服务器端更新，用户永远看到的都是最新的APP端信息。 3、手机客户端及存储数据较少，节约用户手机空间 4、技术难度较低，开发工作量小，开发成本低。 **局限性：** 用户体验大幅落后于原生APP，操作的流畅度，程序的执行效率，与原生APP都有较大差距；HTML5 APP 受网速的影响较大，在网络情况较差的情况下，HTML5 APP 往往连打开都困难，而原生程序，基本都能顺利打开运行（只是速度较慢）。 因公司项目需求，近端时间研究html5 app开发框架，发现有很多，查资料总结下。

最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的PC网站都会做， 难道连一个小小的手机网站难道都搞不定吗？其实手机网站就是一个微缩版的PC网站罢了！至于为什么觉得难、觉得无从下手。 段亮觉得有以下几点： 一、没有完整的思路和流程 就像做 网站的流程 一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。 二、把html5这门技术想的高深莫测 好像觉得学会用html5+css3做手机网站，就相当于学会了顶尖的绝世武功。其实你错了！不要把html5这玩意想的太高深， 其实做手机网站，真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言：你的手机网站是用HTML5+CSS3做的啊， 简直牛逼呀！能用上目前互联网上最新最前沿的技术。其实明眼人一看，就知道是用什么技术做的。俗话说的好：" 外行看热闹，内行看门道 ") 好了扯了这么多，下面就说说怎么来开发移动手机网站吧！ 基本上开发手机网站，可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。 一、框架开发手机网站 一般用现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..当然可能还有一些移动端开发的框架，这些我就 没具体去研究过。 为什么说 BootStrap

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” /> 忽略将页面中的数字识别为电话号码 <meta name=”format-detection” content=”telephone=no” /> 忽略Android平台中对邮箱地址的识别 <meta name=”format-detection” content=”email=no” /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name=”apple-mobile-web-app-capable” content=”yes” /> <!– ios7.0版本以后，safari上已看不到效果 –> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> <!– 可选default、black、black-translucent –> viewport模板

本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！不可能的！不可能的 前端还是一个年轻的行业，新的行业标准， 框架， 库都不断在更新和新增，正如赫门在2015JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术，跟上快速变化的节奏，也是身为一个前端程序员必备的技能之一。 目录 1.面试注意 2.HTML 2.1 Doctype作用？标准模式与兼容模式各有什区别？ 2.2 HTML5 为什么只需要写 !DOCTYPE HTML？ 2.3 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 2.4 页面导入样式时，使用link和@import有什么区别？ 2.5 介绍一下你对浏览器内核的理解？ 2.6 常见的浏览器内核有哪些？ 2.7 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 2.8 简述一下你对HTML语义化的理解？ 2.9 HTML5的离线储存怎么使用，工作原理能不能解释一下？ 2.10 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ 2

项目里用到了kendo UI DataViz的折线图、饼状图等去显示一些统计信息，这些图的显示用到了SVG。 　　现在最新的Chrome、Safari、Moz都支持了SVG标签，甚至是iPhone里的Safari都支持了SVG。 　　但是Android要到3.0版本及以上才支持SVG，如果不是3.0及更高版本，用户必须升级浏览器内核才能显示。 　　这里有个解决方案，可以将SVG转换为canvas再显示。用到了由google提供的canvg-1.2库。 　　具体解决方案实例： 　　首先探测浏览器是否支持SVG，这里借鉴了modernizr的判断方法。如果支持，这个函数返回true，反之false： 　　function testSVG(){ 　　var ns = {'svg': 'http://www.w3.org/2000/svg'}; 　　return !!document.createElementNS && !!document.createElementNS(ns.svg, 'svg').createSVGRect; 　　} 　　做出判断之后，就能动态的加载图像，如果支持SVG，直接用SVG标签就OK，反之就需要将SVG的标签转换为canvas再显示。 　　SVG转化成canvas就要用到canvg，可以到http://code.google.com/p/canvg/去下载

在开发app时，会经常用到HTML5 LocalStorage 本地存储相关的资料。例如记住用户名，原来是使用 cookie，现在基本都改成了LocalStorage 。 使用LocalStorage 其实很简单，localStorage.setItem(key, value );设置值，localStorage.getItem(key)读取值。 可以使用的代码： LocalMobelInfo = function () { }; LocalMobelInfo.prototype.putStringData = function (key, value) { localStorage.setItem(key, value + ""); }; LocalMobelInfo.prototype.putBooleanData = function (key, value) { localStorage.setItem(key, value + ""); }; LocalMobelInfo.prototype.putIntData = function (key, value) { localStorage.setItem(key, value + ""); }; LocalMobelInfo.prototype.updateUser = function (name) {