【HTML5移动端-viewport的详解】教程文章相关的互联网学习教程文章

详解HTML5中表单验证的8种方法介绍

在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义。就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误。换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。但是真正的表单验证是什么?是一种优化。之所以说表单验证是一种优化,是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面,设计表单验证是为了让Web应 用更快地...

详解HTML5中的拖放事件(Drag和drop)【图】

浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释:在 Safari 5.1.2 中不支持拖放。HTML5 拖放实例<!DOCTYPE html> <html> <head> <style type="text/css"> #p1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("T...

html5div布局与table布局详解【图】

本文实例为大家解析了html5 p布局与table布局,供大家参考,具体内容如下p布局:html+css实现简单布局。#container中height不能写成百分数,必须为具体高度。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>p布局</title> <style type="text/css"> body{ margin:0; padding:0; } #container{ width:100%; height:650px; background-color: aqua; } #heading{ width:100%; height:10%;...

HTML5之Video标签详解【图】

在前面的小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器中制作了一个非常好用的播放器,有的朋友对其中的原理还不是很了解,这一篇文章将在前一篇的基础上深入剖析<video>标签的使用。一、使用技巧在HTML5中可以使用<audio>或者<video>标签播放Html5媒体,使用方式如下:<video src="move.mp4"></video>video标签中有很多属性,例如controls属性可以控制是否有控制台。<video src="move.mp4" controls="controls"> 浏...

HTML5canvas9绘制图片实例详解【图】

绘制图片Var image=new Image();image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg”;image.onload=function(){}Context.drawImage(image,x,y);Context.drawImage(image,x,y,w,h);Context.drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh);图片平铺Var pat= context.createPattern(image,”repeat”);Context.fillStyle=pat;Context.fillRect(0,0,400,300);图片裁剪先绘制好路径 Cont...

html5的sessionStorage和localStorage详解与使用

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。web storage和cookie的区别Web Storage的概念和cookie相似,区...

HTML5本地数据库基础操作详解_html5教程技巧【图】

下面分别介绍本地数据库的各个API及其使用方法。 1、利用openDatabase创建数据库 我们可以利用openDatabase方法创建数据库。openDatabase方法传递五个参数,分别是:数据库名、数据库版本号(可省略)、对数据库的描述、设置分配的数据库的大小、回调函数。 如果我们要创建一个本地数据库,可以执行如下代码: var myWebDatabase = openDatabase(“user”, ”1.0”, “user info”, 1024*1024, function(){}); 这样就创建了一个用...

详解HTML5中rel属性的prefetch预加载功能使用_html5教程技巧

在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了. 举个例子说明:比如要预先加载某个页面,可以这样: XML/HTML Code复制内容到剪贴板link rel="prefetch" href="http://www.example.com/"> 但如果是google的话,要用另外的一个名称,即: XML/HTML Code复制内容到剪贴板link rel="pre...

HTML5标签嵌套规则详解【必看】_html5教程技巧【图】

HTML5标签嵌套规则详解【必看】_html5教程技巧前面的话  在html5中,元素的子元素可以是块级元素,这在以前是被认为不符合规则的。本文将详细介绍html5的标签嵌套规则 分类  html5出现之前,经常把元素按照block、inline、inline-block来区分。在html5中,元素不再按照display属性来区分,而是按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow conte...

详解HTML5Canvas绘制不规则图形时的非零环绕原则_html5教程技巧【图】

路径方向与非零环绕原则平时我们画的图形都是规规矩矩的,那么如果我们用线条画了个抽象派作品,就像下面这图一样,童鞋们知道怎么用fill()染色呢? 这里就要用到数学上的一个方法——非零环绕原则,来判断哪块区域是里面,哪块区域是外面。接下来,我们具体来看下什么是非零环绕原则。 首先,我们得给图形确定一条路径,只要“一笔画”并且“不走重复路线”就可以了。如图,标出的是其中的一种路径方向。我们先假定路径的正方向为...

详解如何用HTML5CanvasAPI控制图片的缩放变换_html5教程技巧【图】

缩放变换scale(sx,sy)传入两个参数,分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实,看上去简单,实际用起来还是有一些问题的。我们来看一段代码:JavaScript Code复制内容到剪贴板"zh"> "UTF-8"> 缩放变换 body { background: url("./images/bg3.jpg") repeat; } #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px aut...

HTML5Canvas绘图使用详解

<canvas>标签是html5中新添加的元素,用于页面中绘图功能,借助于js<canvas>可以绘制出各种您需要的图形,本文就来了解一下<canvas>绘图标签的详细使用教程。<canvas>html标签:<canvas id="demo-canvas" width="800" height="800"> 您的浏览器不支持<canvas>,建议升级。 </canvas>我们可能通过js的document.getElementById获取<canvas><script type="text/javascript"> var canvas = document.getElementById("demo-canvas"); <sc...

基于Tomcat运行HTML5WebSocketecho实例详解【图】

一、概述   作为HTML5新特性之一的WebSocket组件,在实时性有一定要求的WEB应用开发中还是有一定用武之地,高版本的IE、Chrome、FF浏览器都支持Websocket,标准的Websocket通信是基于RFC6455实现服务器端与客户端握手与消息接发的。如果对Websocket通信不是太理解,可以查看RFC文档即可,简单说就是通过发送HTTP请求,实现双方握手,将无状态的HTTP通信协议进一步升级成有状态的通信协议,同时Websocket还支持子协议选项与安全传...

详解HTML5中的&lt;template&gt;标签_html5教程技巧【图】

一、HTML5 template元素初面 元素,基本上可以确定是2013年才出现的。干嘛用的呢,顾名思意,就是用来声明是“模板元素”。 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法:XML/HTML Code复制内容到剪贴板script type="text/template"> // ... script> 实际上,并不存在type="text/template"这样的标准写法,元素的出现旨在让HTML模板HTML变得更加标准与规范。 以前,我们可能还使用过或者(废止但依然可用)嵌套非转义...

基于第一个PhoneGap(cordova)的应用详解_html5教程技巧【图】

PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台。官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表。但是有一条跨平台,却是很明显的优势。因为它采用HTML5+JavaScript的模式来开发应用。PhoneGap用JavaScript统一封装了几大平台的本地api(Andriod,IOS,WP8/7,WINRT)等等。。这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去,打包一下...