html5
业余草
这个作者很懒,什么都没留下…
展开
-
使用Vue.js和Element-UI做一个简单的登录页面
最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面。效果很简单:代码如下:前端页面<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here&..原创 2018-09-18 11:07:17 · 6915 阅读 · 1 评论 -
Html5实现手机九宫格密码解锁功能
随着移动互联网的发展,九宫格解锁被大部分手机或一些应用所支持。对于app来说,实现九宫格解锁就是小菜一碟。那么对网页来说,照样可以实现。今天就带领大家来实现一个使用HTML5制作的网页九宫格解锁案例。原创 2015-12-10 17:31:51 · 11975 阅读 · 12 评论 -
input中加入图片的做法
有很多高大上的网站中都有这一做法。尤其是在登录页面,输入用户名和密码时加入小图标,看起来简单舒服。下面就列举一下我们公司中手机网站应用的截图:怎么样看起来还不错吧。下面直接上代码: input中加入图片的做法 .username {width:130px; background:#FFFFFF url("data:image/png;base64,iVBORw0KGgo原创 2015-08-29 10:28:26 · 61736 阅读 · 7 评论 -
HTML5中meta属性的使用详解
meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 1、声明文档使用的字符编码<meta charset='utf-8'>2、声明文档的兼容模式<meta http-equiv="X-UA-Compatible" content="IE=原创 2015-05-29 10:45:13 · 19715 阅读 · 6 评论 -
html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能详解
在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢。其实不难,今天我们就用html5来实现他们。简单的让你大开眼界。HTML5 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这...有 HTML5 启动模板、空白图片、打电话和发短信、自动完成等等,帮助你提高开发效率的同时,还带来了更炫的功能。好了,我们今天就来做一做看看效果吧!!看代码:伪专原创 2014-06-21 15:17:06 · 19127 阅读 · 10 评论 -
网页固定侧栏的做法
固定侧边的做法有很多种,今天为大家介绍一种非常简单的做法。整个html文档只有23行代码就搞定了。网上也有很多做法,但是都太过复杂,一大堆代码。而且有的很采用一些jquery的一些插件。侧栏的做法和顶部、页脚都大致雷同。掌握其中的一种,其他的都很容易实现。常见的例子有:新浪微博的菜单栏,新浪体育的右侧二维码扫描等功能都是这样的实现。这种固定特定部位,而不随滚动条滚动的做法,见下面代码:原创 2015-07-09 15:13:16 · 4867 阅读 · 0 评论 -
HTML5的data-*自定义属性
HTML5的data-*自定义属性HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。目前采取这样的做法的框架也有很多,最常见的当属jQueryMobile。具体使用方法例下:在传统的做法中我们可以配合jquery使原创 2015-06-29 09:55:43 · 4942 阅读 · 5 评论 -
Html5响应式设计实现九宫格
自从响应式设计的理念提出以来,越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如:小米商城,天猫等。 至于响应式设计的概念等大家可以去百度百度,我这里就不相信讲解了。直接为大家带来源码,用Html5实现响应式的九宫格。代码如下:<!DOCTYPE html><html><head><title>html5响应式九宫格</title><meta http-equiv="Co原创 2015-06-02 16:31:10 · 20514 阅读 · 0 评论 -
Html5 Web的5中离线存储方式之localStorage
Html5 Web的5中离线存储方式之localStorage在HTML5越来越流行的今天,如果你还不知道离线存储,那就说明你落后了很多。 HTML5的离线存储方式有多种:Web SQL Database、LocalStorage、Cookie、WebStorage、IndexedDB、FileSystem。 Web SQL Database目前虽然还有浏览器支持,是唯一的关系数据库结构的存储,原创 2015-05-05 11:11:11 · 4371 阅读 · 0 评论 -
HTML5 拖放(Drag和drop)
在工作当中,我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修,QQ空间装扮等,小到一些游戏等等随处可见拖放的使用场景。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。拖放是一种常见的特性,即抓取对象以后拖到另一个位置。目前浏览器支持情况:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Saf原创 2015-04-09 16:22:10 · 6406 阅读 · 2 评论 -
jQuery Mobile 自定义标签
很多朋友都反应jquery mobile自带的标签真的是少之又少,另外我也觉得标签不漂亮。jQuery Mobile API 针对移动网站定制提供了另一个级别的控制。从全局选项的自定义设置,到钩住交互事件和曝光的方法,一切都可以使用该 API 实现,并且在本文中进行介绍。在本文结束时,您就会知道如何精细地定义您想在移动网站中使用的自定义选项,以及如何编写与 jQuery Mobile 框架进行交互的自定义代码。本文介绍如何做一个简单的自定义标签。原创 2016-01-05 17:22:52 · 6283 阅读 · 4 评论 -
为什么我们需要HTML5 WebSocket
HTML5 WebSocket简介 HTML5作为下一代的 Web 标准,它拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket等等。这其中有“Web 的 TCP ”之称的WebSocket格外吸引开发人员的注意。WebSocket的出现使得浏览器提供对Socket的支持成为可能,从而在浏览器和服务器之间提供了一个基于TCP连接的双向通道。Web开发人员可原创 2016-03-16 16:09:23 · 6197 阅读 · 0 评论 -
HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册
HTML5视频教程,HTML5项目实战,HTML5中文指南,HTML5使用手册。超过2G 的 HTML5 视频教程免费分享,免费下载!尚硅谷前端HTML5视频_HTML & CSS 核心基础教程(103集实战教学,从入门到精通)本套视频适合零基础并且对前端知识感兴趣的同学。内容涵盖HTML基础、标签、CSS 选择器、盒子模型、浮动、定位、图片整合、PS 切图等页面相关常用技术。 视频最后包...原创 2018-06-24 17:59:41 · 8426 阅读 · 1 评论 -
Bulma 教程,Bulma 指南,Bulma 实战,Bulma 中文手册
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。下面是关于 Bulma 的教程,指南,实战,中文手册相关内容的链接:Bulma 简原创 2017-10-24 14:10:34 · 9892 阅读 · 0 评论 -
GitHub上最流行的Top 10 JavaScript项目
统计出Github中所有项目的数量,几乎是不可能的,而明确指出哪些是最优秀的项目就更不可能了。如果说到JavaScript,曾经极富创新的项目(很可能)在一两个月后就会变得过时、落后。以防被淹没在大量的项目中,去研究(哪个项目更好),我们可以来看看2016年Github上最热门的Javascript项目。Vue.JSVue.js是2016年的赢家,收获了25000多个star,甚至完胜React和原创 2017-08-03 15:59:10 · 4122 阅读 · 0 评论 -
Koa框架教程,Koa框架开发指南,Koa框架中文使用手册,Koa框架中文文档
Koa -- 基于 Node.js 平台的下一代 web 开发框架。简介koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用原创 2017-08-09 16:21:39 · 3404 阅读 · 0 评论 -
java HTML5 学习资料汇总
目前JAVA可以说是产业界和学术界最热门的语言,许多人都很急切想把JAVA学好。但学习是需要步骤的,除非像电影中演的那样,能够把需要的专业技巧下载到脑海:主角只花了几秒下载资料,就马上具备飞行员的技巧,或是武侠小说中的运功传送内力的方式,否则花上一段时间苦学是少不了的。花时间,不打紧,就怕方法错误,事倍功半。java 学习文章推荐。java学习线路。java 知识图谱。HTML5 微数据 RDFa原创 2017-03-24 19:56:29 · 2658 阅读 · 0 评论 -
人民币大写在线转换工具
一谈钱就伤感情,可是没钱根本就不行!程序员写代码写的久了,提笔忘字,最近遇到要我写大写人民币金额时,犯了难!于是我就想到了,写一款软件来解决所有程序员苦恼工具!人民币大写在线转换工具同事和朋友都觉得不错!我们看看运行效果:怎么样,虽然丑了点,不过正常使用时没什么问题的。工具地址:http://www.xttblog.com/tools/0.html如果想看更多优秀的文章,请访问业余草:www.xt原创 2016-06-22 20:51:01 · 10050 阅读 · 0 评论 -
二维码在线生成工具
二维码在生活中使用的场景越来越多!支付宝,微信扫描付等。今天为大家展示一款使用jQuery.qrcode插件制作二维码的方法和工具!二维码在原理上其实是一个二维数组,存储的信息比条形码多的多!在实际生活中也有很多例子。比如说我给我朋友推荐一个名片,生成一个二维码她扫描一下,就到自己的通讯录中,而且还比较安全!在线生成二维码的工具不多,我推荐一款:http://www.xttblog.com/too原创 2016-06-29 11:34:17 · 3455 阅读 · 0 评论 -
浅谈HTML5 WebSocket的机制
回顾上一章 在上一章《为什么我们需要HTML5 WebSocket》中,我简单的介绍了下WebSocket的前世今生。相信大家已对WebSocket有了初步的了解。那么今天我们继续深入学习WebSocket的机制。WebSocket 我们知道WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(不知道的可以看下全双工通信RS-422标准),能更好的节省服务器资源和原创 2016-03-22 15:05:06 · 5543 阅读 · 1 评论 -
HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码: HTML5调用百度地图API进行地理定位实例原创 2015-04-17 10:36:19 · 29933 阅读 · 2 评论 -
jQuery Mobile中$.mobile.buttonMarkup方法使用详解
最近在群里遇到多数网友提到$.mobile.buttonMarkup()方法的使用。我这里就列了一下api的使用说明,以后大家看博客就能解决问题。如有不正确的地方,请留言指出!jQuery Mobile暴露的方法都是使用$.mobile来引用。$.mobile.buttonMarkup( options, overwriteClasses ) 添加按钮的样式元素其中options为对象原创 2015-03-31 10:27:52 · 3104 阅读 · 0 评论 -
jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的。作为一个老手,有必要对jQuery mobile中实用方法做一些总结。系列文章请看jQuery Mobile专栏。jquery.mobile.changepage是过时的jQuery Mobile 1.4.0及将被删除在1.5.0。使用pagecontainer部件的change()法代替。注意该方法是在内部使用的页面加载和转原创 2015-04-02 13:14:10 · 13057 阅读 · 2 评论 -
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案。因此我就在这里做一个demo,供大家相互学习。html5开发越来越流行了,而对于视频这一块也是必不可少的一部分。如何让你的网站占据优势,就要看你的功能和用户体验了。html5对video还是做了很多优惠的东西,我们使用起来很得心应手。在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那原创 2014-06-21 20:24:31 · 110671 阅读 · 15 评论 -
jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题。这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下。现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助。好吧,我们先看看效果截图吧:还行吧,来看页面代码:伪专家jqm文件上传 伪专家jqm文件上传 如有疑问:请加qq群135430763,共同学习!!原创 2014-06-23 11:44:58 · 25079 阅读 · 9 评论 -
jQuery Mobile开发的新闻阅读器,适应iphone和android手机
程序员都很赖,你懂的!我们经常上新浪,原创 2014-06-03 09:07:13 · 4733 阅读 · 2 评论 -
jQuery Mobile的学习时间botton按钮的事件学习
程序员都很懒,你懂的!原创 2014-05-30 18:11:09 · 3872 阅读 · 0 评论 -
jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。今天,jQuery 驱动着 Internet 上的大量网站,在浏览器中提供动态用户体验,促使传统桌面应用程序越来越少。现在,主流移动平台上的浏览器功能都原创 2014-05-29 21:40:45 · 4256 阅读 · 0 评论 -
jQuery Mobile页面跳转切换的几种方式
jQuery Mobile在移动开发中越来越受到欢迎。而他的各个版本也在持续不断的更新中。同样的我也很喜欢它,它加快了我们开发HTML5的速度。同时又具备jQuery一样的操作方法。学起来也是相当的容易。所以这一片文章就是介绍jQuery Mobile的页面跳转的。少说废话,看源码:原创 2014-06-12 19:08:57 · 12904 阅读 · 3 评论 -
jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo
我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能。比如电话,短信,浏览器,音乐的标签菜单。好吧,直接上代码: jQuery Mobile模仿iphone菜单项 --> //home菜单的onclick事件的处理方法原创 2014-06-05 21:35:28 · 4214 阅读 · 0 评论 -
jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全
学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了。我根本就没有理由拒绝他的好。这里我有分享一下我对它的配置项的使用说明一下。看代码解释:$(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorM原创 2014-06-27 14:17:36 · 4816 阅读 · 2 评论 -
jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解
由于移动设备屏幕宽度较小,所以一般不建议使用多列布局。但有时你可能需要并排放置一些元素(如按钮之类的)。 jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局方法。共提供了五种布局方式,分别是:ui-gird-solo:单列布局,ui-gird-a:双列布局,ui-gird-b:三列布局,ui-gird-c:四列布局,ui-gird-d:五列布局。布局网格总宽原创 2014-06-25 10:49:05 · 4202 阅读 · 0 评论 -
移动新闻网站,掌上移动新闻,移动新闻客户端,jQuery Mobile移动新闻网站,移动新闻网站demo,新闻阅读器开发
我们坐在地铁上,常常拿出手机查看新浪移动新闻,腾讯新闻,或者刷微信看新闻等等功能。你们有没有想过他们是如何实现的。移动互联网,越来越热闹了。因为HTML5来了,jQuery Moblie来了。今天我就用jqm来给大家做一个简单的移动新闻网站。先看效果图:原创 2014-07-09 17:25:09 · 4898 阅读 · 3 评论 -
jQuery Mobile仿360首页,jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页
随着移动互联网的兴起,越来越多的人使用手机上网。打开uc浏览器,我们可以看到uc的主页。或者360的主页,或者百度的主页。这些页面都是html5做的。看起来很难,其实一点也不难。网上有很多介绍html5的文章,我这里就不解释了。对于程序员来说,看代码还是最实在的。代码支持电脑和手机,pad等终端设备。 jQuery Mobile页面跳转切换的几种方式原创 2014-07-03 10:17:34 · 8413 阅读 · 2 评论 -
html5调用摄像头实现拍照
技术时刻都在前进着。我们的需求也是时刻在改变着。最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能。还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录。这对一个网络来说难度是极大的。技术的进步使我们遇到了html5。下面这个简单粗暴的demo就是来完成这些功能的。直接看代码: html5调用摄像头实现拍照 拍照 var原创 2015-03-06 17:12:52 · 6157 阅读 · 0 评论 -
HTML5 Canvas API详解
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现,等等。本文主要关注图形方面的增强:canvas。新的 HTML原创 2015-02-10 13:06:26 · 4415 阅读 · 2 评论 -
jQuery Mobile修改button的内容
jQuery Mobile修改button的内容。使用jQuery Mobile也有一段时间了,最近同事提出,他需要更改button的内容,但是修改不了。我也试着修改了几次,button的内容其实是更改了,但是页面并未刷新。在调试中使用了console.log()方法打印各种日志,再结合api文档,发现button方法可以进行刷新。打印信息:更新内容:$('#btn').val("如有原创 2015-02-02 16:17:43 · 3066 阅读 · 0 评论 -
HTML5音频audio详解
直到现在,仍然不存在一项旨在网页上播放音频的标准。目前,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。当前,audio 元素支持三种音频格式: IE 9Firefox 3.5Opera原创 2014-11-27 10:57:47 · 12925 阅读 · 7 评论 -
HTML5视频video开发demo例子
HTML5的video可以使用DOM的方式进行控制。video元素同样拥有方法、属性和事件。比如它拥有的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,video元素开始播放、已暂停,已停止,等等。废话少说了,看下面的实例吧。为视频创建简单的播放/暂停以及调整尺寸控件: 欢迎大家关注我的博客!如有疑原创 2014-11-27 10:16:26 · 12186 阅读 · 0 评论 -
HTML5视频video
直到现在,仍然不存在一项旨在网页上显示视频的标准。目前,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。当前HTML5只支持三种格式的视频。格式IEFirefoxOperaChromeSafariOgg原创 2014-11-26 13:51:35 · 5381 阅读 · 1 评论