HTML5
文章平均质量分 53
天外野草
现任职移动研发部Team Leader, 高级咨询顾问、开发架构师,移动开发布道师, CSDN专家博主,CSDN讲师, 主修数学专业,曾获全国大学生数学建模大赛、东北三省大学生数据建模大赛一等奖,精通移动开发,熟悉 Angular、React、SAP FIORI等各种HTML5主流框架,对大数据开发,AI技术领域有一定的经验心得,同时拥有丰富的课程录制以及授课经验,也拥有多个大型企业级跨平台项目开发经验,乐观向上,乐于求知,不限领域!
展开
-
HTML5工具汇总
HTML5图形工具原创 2014-12-05 21:57:31 · 1170 阅读 · 0 评论 -
你不知道的5个HTML5新功能
HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征。有些新特征我们已知多年并大量的使用,而另外一些主要是用在前沿的手机移动技术上,或者桌面应用中起辅助作用。不管这些HTML5新功能有多强大,多好用,它们都是为了帮助我们更好的开发浏览器前端应用。我之前给大家分享过一篇你不知道的5个HTML5新功能,目的是希望里面的提到的一些技术能帮助改进你的web应用。这里我还想分享转载 2015-02-01 22:20:20 · 1183 阅读 · 0 评论 -
NodeJs 4.x 安装后 不是内部或外部命令(windows)解决方案
如果安装的express是4.X就要安装 express-generator 不然 express目录是没有bin文件目录的。其中最主要的问题在于C:\Users\xxxxx\AppData\Roaming\npm 没有express.sh 或express.bat文件,如果有的话将C:\Users\xxxxx\AppData\Roaming\npm;加入到环境变量里就可以,注意要重新开启原创 2014-12-14 20:18:45 · 1682 阅读 · 0 评论 -
15个程序员需要知道的Chrome扩展
现在大多数程序员会选择谷歌Chrome浏览器作为主要的浏览器。下面我要为各位Web开发人员介绍的是15个最好的谷歌Chrome浏览器扩展。 1. Web Developer 支持Chrome的Web Developer扩展,允许你通过添加一个小工具栏来使用不同的工具。 官方网站:ht转载 2015-03-25 18:37:29 · 614 阅读 · 0 评论 -
让Office(word excel)显示在网页中的实现技术
I provide follow solutions: 1)Only working in Chrome browser. It is very simple, we do not need to do any otherpage.First, we must install a plugin for chromebrowser(https://chrome.google.com/we原创 2015-04-25 16:57:17 · 1101 阅读 · 0 评论 -
HTML5新特性汇总
1. 新的选择器通过 class 定位元素 (DOM API) var el = document.getElementById(‘section1’); el.focus();var els = document.getElementsByTagName(‘div’); els[0].focus();var els = document.getElementsByClassName(‘sec原创 2015-04-25 21:27:07 · 647 阅读 · 0 评论 -
前端开发者必备的JavaScript库
现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计。为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node.js 扩展等等。有了这些工具,开发者们就能专注于创意设计了,而不用为某个功能而花费太多精力。这里我们介绍的是 12 个开发者们必备的 JavaScript 库,都是一些很基础功能很强大的库。有了这转载 2015-04-25 17:01:09 · 662 阅读 · 0 评论 -
CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。outline属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持,在CSS3中对outline作了一定原创 2015-05-02 17:34:45 · 704 阅读 · 0 评论 -
HTML5弹性图片
弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放,用于适应各种网格的尺寸。而实现方法是比较简单,一句代码就能搞定的事情。img {max-width:100%;}来看一个断点解决图片自适应的例子。对应的CSS代码:@media (min-device-width:600px){img[data-src-600px]{ con原创 2015-05-05 13:11:03 · 2617 阅读 · 0 评论 -
JS禁用鼠标滚轮事件
function disabledMouseWheel() { if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFu原创 2015-05-18 16:38:08 · 1498 阅读 · 0 评论 -
One or more constraints have not been satisfied.(SAPUI5+Eclipse)
I was getting this error but now it is working. Solution:initially JDK compiler was set 1.4 but in my system 1.6 was there. so just i have made JDK compiler 1.6. Please fol原创 2015-07-11 13:06:42 · 1728 阅读 · 0 评论 -
用 grunt-contrib-connect 构建实时预览开发环境
本文基本是参照着 用Grunt与livereload构建实时预览的开发环境 实操了一遍,直接实现能实时预览文件列表,内容页面。不用刷新页面了,这比以前开发网页程序都简单。这里要用到的 Grunt 插件有grunt-contrib-connect , 用来充当一个静态文件服务器,本身集成了 livereload 功能 grunt-contrib-watch , 监视文件的原创 2015-07-27 09:16:08 · 661 阅读 · 0 评论 -
HTML5调用本地相机服务(实现代码)
Document photo var video = document.getElementById("video"); var context = canvas.getContext("2d") var errocb = functio原创 2015-09-10 13:14:46 · 1963 阅读 · 0 评论 -
CSS 之Box-sizing 属性的使用方法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。默认值:content-box继承性:no版本:CSS3原创 2015-09-10 13:17:37 · 939 阅读 · 0 评论 -
移动web如何显示出滚动条
最近在做cordova得混合应用,发现页面得滚动条不见了,但是页面是完全可以滚动得,于是研究了一下,发现如下方案是可行得,大家可以尝试一下:::-webkit-scrollbar { -webkit-appearance: none;}::-webkit-scrollbar:vertical { width: 12px;}::-webkit-scrollbar:ho原创 2015-09-29 14:25:00 · 4993 阅读 · 0 评论 -
JavaScript+Canvas 实现网页截屏
最近一个项目需要开发一种可以实现页面截屏的技术,并且用h5技术,找来找去,发现html2Canvas这个框架做的很不错,也满足了我得需要。html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。环境要求: jQuery兼容性: Firefox 3原创 2015-10-08 21:04:44 · 10638 阅读 · 1 评论 -
HTML5你不知道的那些功能
对于一个IT从业人员来讲,无论是项目经理,还是工程师,很多时候我们会面临很多功能需求,而H5的火热,往往又是一个不错的选择,所以我们有必要了解那些很实用的功能。以下是之前学习的一些HTML5 API的总结,在HTML5中有许多功能和接口很值得我们去了解和学习。页面可见性API--page Visbility全屏API --full Screen转载 2015-12-05 13:20:12 · 696 阅读 · 0 评论 -
ReactJS学习系列课程附加2(React虚拟DOM分析)
最近在学习ReactJS过程中,总会时不时的提及到虚拟dom,据说会很大强度上提升app性能,那么它的原理是什么呢,到底什么是虚拟dom:在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)原创 2016-06-24 20:09:02 · 1869 阅读 · 0 评论 -
ReactJS学习系列课程(React 表单应用)
到目前为止,我们已经学习了很多react的特性,对于表单的使用其实也没有大的区别,下面我们为了更加熟悉React, 我们纯当练习:我们看看代码吧:我们创建一个简单form: //约束组件 var MyForm = React.createClass({ getInitialState: function () { return原创 2016-06-25 15:53:40 · 964 阅读 · 0 评论 -
ReactJS学习系列课程(React 动画使用)
常用Angular的开发者,一定熟悉angular的Animation的使用,其实React的动画效果原理和Angular是极其相似的。首先,我么需要导入一个额外的库(Angular也一样哦), <script src="../libs/react-with-addons.min.js"></script>下面我们引入Transition插件:// 引入react-with-addons中的C原创 2016-06-25 16:16:26 · 2655 阅读 · 0 评论 -
ReactJS学习系列课程附加(Flux应用架构)
React相对于传统HTML5框架来讲,不同点在于React使用了Flux架构。Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。相比于形式化的框架它更像是一个架构思想,不需要太多新的代码你就可以马上使用Flux构建你的应用。Flux应用主要包括三部分:dispatcher(调度者)、store(仓库)和view翻译 2016-06-24 17:02:14 · 999 阅读 · 0 评论 -
ReactJS学习系列课程2(React环境搭建)
作为任何一款HTML5的框架,基础搭建都会相对简单,但是实际项目中我们都会基于业务进行相应架构,会做部分更改,但是为了入门,我们先从最开始的进行学习。首先我们要下载React的核心资源库,我们可以从官方网站下载,其中包括很多Demo实例,还有React几个核心文件库。官网: https://facebook.github.io/react/downloads.html下面我们开始创建一个html模板原创 2016-06-24 17:38:26 · 1223 阅读 · 0 评论 -
ReactJS学习系列课程1(ReactJS简介)
最近几年HTML5技术日新月异,各种框架更是层出不穷,如果说2016年最火爆的框架,当属ReactJS莫属。React起源是Facebook的内部项目,当时市场上已经有很多流行的框架了,比如Angular, KnockoutJs等等,但是Facebook公司都不是特别的满意,个人感觉大公司这方面都比较类似,你懂得,于是决定自己写一套框架,用来架设自己公司的Instagram网站,做成以后,发现这套框原创 2016-06-24 15:42:22 · 1274 阅读 · 0 评论 -
ReactJS学习系列课程3(React State状态)
对于React来讲,一切都已组件形式拼接,有组件就免不了要进行用户交互,用户交互就会有交互状态,react中设定了一个state进行状态管理。大家可以参考如下代码:var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: fun原创 2016-06-24 17:57:50 · 2492 阅读 · 0 评论 -
ReactJS学习系列课程(JSX语法)
JSX语法很多人也不是第一次遇见,类似的语法在Java 的Jsp, .net等平台中都有出现,那么到底什么才是JSX语法呢?其实,HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:var names = ['red', 'yello原创 2016-06-24 20:35:29 · 1454 阅读 · 0 评论 -
ReactJS学习系列课程(props 组件属性)
对于React而言,组件的属性在程序中,我们多用this.props获取,讲到这里,可能有些人还不清楚什么是组件的属性呢,下面我们来看段代码:var Greet = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } })原创 2016-06-24 21:07:13 · 1010 阅读 · 0 评论 -
ReactJS学习系列课程(组件的生命周期)
对于任何一个框架,或者组件而言,都有其生命周期的定义,比如从定义到销毁,会有一定的流程在其中控制,以前我们接触过IONIC, 不得不说这个框架对生命周期的定义是非常完美的,也为开发者提供了很多的便利。那么,对于React而言,是基于Component的一个框架,那么我们今天来谈谈Componet的生命周期是一个什么样的状态呢?组件的生命周期分成三个状态:Mounting:已插入真实 DOMUpd原创 2016-06-24 21:41:55 · 872 阅读 · 0 评论 -
ReactJS学习系列课程(React学习总结)
进来学习React, 下面来总结一下,主要有以下几点: 1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。 2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。 3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部原创 2016-06-24 21:52:46 · 1529 阅读 · 0 评论 -
ReactJS学习系列课程(React ES6语法使用)
自从ES6发布以来,越来越多的人开始追捧这一崭新的语法,丰富的语义化方法,简介的符号说明,吸引了很多人,虽然目前ES6的语法还不被广大浏览器支持,仍需要用babel转化使用,但是ES6仍是一个不错的选择。那么,如果我们就想用ES6的语法定义React该如何去编写呢?首先我们用ES6定义个React组件尝试一下,上代码:import React, { PropTypes, Component } fr原创 2016-06-25 11:41:51 · 1407 阅读 · 0 评论 -
ReactJS学习系列课程(React 组件的组合使用)
React是基于组件的,整个项目就是各个组件拼接而成,这也是目前最主流的架构方案,组件化,react的这一个特性十分鲜明,那么react组件的组合使用也是非常简单,说多无用,我们看代码:var Child = React.createClass({ render: function(){ return( <div> <s原创 2016-06-25 15:29:35 · 2267 阅读 · 0 评论 -
ReactJS学习系列课程(React 调试工具集)
学习React过程中,我们一定知道,React有两个视图,一个虚拟机DOM,也就是我们创建的Component, 另一个就是渲染到页面中的view,这也就导致我们调试过程中会有一定的障碍,所以我们尝试一下:这是一个全新的调试工具,名字是New React Devtools, 下面我们来看一下效果吧!这个插件工具可以做哪些工作呢:Tree view,树形结构,可以看到和编辑所有的props, sta原创 2016-06-25 17:20:28 · 17839 阅读 · 0 评论 -
ReactJS学习系列课程(React webpack使用)
什么是webpack?webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。之前,我们肯定用过grunt, gulp 等等的工具,其实webpack的存在时间不亚于这两款工具,webpack的普及正是由于React的火爆而推广开发,因为Facebok官方就是用webpack打包编译的,比如原创 2016-06-25 17:54:31 · 1381 阅读 · 0 评论 -
ES6 之 const 的说明
最近,很多人问我,const的用法问题,这里给大家澄清一个误区。常量索引,不是值在ES6中另外一个定义变量的关键字是 const , 但是它经常被误会为一个“常量”。在ES6中, const 代表一个值的 常量索引 (事实上绝大多数语言都提供这样的功能)。换句话说,变量名字在内存中的指针不能够改变,但是指向这个变量的值 可能 改变。这里有一个简单的例子。在下面的例子中我们可以创建一个拥有常量索引的数原创 2016-06-26 09:08:53 · 7096 阅读 · 0 评论 -
ReactJS学习系列课程(React Router 使用)
对于任何一个前端框架都有页面跳转,而这个跳转就一定需要路由的定义,比如Angular, Durandal等等,今天我们学习一下如果定义个路由在React中。为了便于理解,我们同样附上一段代码,看看究竟是如何实现的:import React from 'react'import { render, findDOMNode } from 'react-dom'import { browserHi原创 2016-06-25 13:19:19 · 5000 阅读 · 0 评论 -
ReactJS学习系列课程(React Http网络数据读取)
我学习过很多HTML5前端框架,比如AnguarJS, VUE.js Durandal, Avalon, Jquey, SAPUI5等等,对于任何一款框架都有自己的网络请求方案。Jquery: $.get()Anguar: $httpSAPUI5: 这个就更多了,比如XMLModel JSONModel ODataModel.那个React该如何去请求网络数据呢,在这里要说明一个,Reac原创 2016-06-25 13:26:47 · 10421 阅读 · 0 评论 -
ReactJS学习系列课程(React ref的使用)
在我学习React的过程当中,总会被一些名词搞得晕头转向,但是细想起来又非常简单,比如React定义的这个refs,其实就是用于获取dom的一种方式。在React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然原创 2016-06-25 13:42:36 · 17873 阅读 · 0 评论 -
ReactJS学习系列课程(React mixin的使用)
React是基于组件的,也就是整个项目是各个组件组合到一起的,这样往往会用到通用的一些特性,这就衍生了mixin的概念。其实,mixin,可以非常简单的理解,他就是把 一个 mixin 对象上的方法都混合到了另一个组件上,和 es6的extend极为类似。在mixin中写的生命周期相关的回调都会被合并,也就是他们都会执行,而不会互相覆盖掉。比如 你在mixin中可以定义 componentDidMo原创 2016-06-25 14:03:25 · 3583 阅读 · 0 评论 -
Angular2 (One framework 概要)
Angular1.x 版本的火爆,我们不用多说,是很多前端工作者不错的选择,速度快,方便快捷,可拓展性强,我做过很多项目都是基于Anguar 1.x架构的。但是Goolge公司在2.x版本,确做了新的设计,可以说和1.x版本是完全不同的,是一个崭新的框架,我们暂且不去评论它的好与坏, 我们先来看看,官方给出一个什么的解释。Develop Across All PlatformsLearn one w原创 2016-06-26 10:46:36 · 601 阅读 · 0 评论 -
ReactJS学习系列课程(React 整体流程使用案例)
对于一门语言的学习,少不了动手练习,今天我们就尝试一下,如何用React编写一个简单的程序,实现功能包括网络请求数据,绑定数据进行增删改查,并进行相应的路由操作。下面我们来年代码:package.json我们创建一个package.json, 里面包含一些开发库还有核心库:{ "name": "demo4", "version": "1.0.0", "description": "",原创 2016-06-27 16:06:28 · 6223 阅读 · 0 评论 -
ReactJS学习系列课程(React react常用架构分析)
最近学习React框架,与其说react是一个新的框架,不如过React是一个新的思想,新的尝试,做惯了前端框架的工程师都知道,MVC,MVVM一直被大家公认为一个非常不错的模式,但是Facebook的工程师确不以为然,推陈出现,创作了这个新的开始,对于一个新的模式,必然有新的架构出现,今天我们来看看React常用架构是什么样的呢?当然这并不是唯一,但是大同小异,万变不离其宗。我们看下面这张架构图:原创 2016-06-28 11:54:05 · 4892 阅读 · 0 评论