网页制作 第80页
桃源资源网 Design By www.nqtax.com
解析HTML5中的新功能本地存储localStorage
Html5的localstorage是通过浏览器在本地存储的数据。基本使用方法如下：JavaScriptCode复制内容到剪贴板localStorage.firstName="Tom";alert(loca
使用HTML5中的contentEditable来将多行文本自动增高
contentEditable是由微软开发、被其他浏览器反编译并投入应用的一个全局属性。该属性的主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的
HTML5+CSS3绘制锯齿状的矩形
最近通过敲Html5+Css3，分享一些自己认为值得学习的知识，分享给大家。如何绘制一个锯齿状的矩形：如图我们知道绘制图形可以用canvas，canvas是HTML5出现的新标签，用
逼真的HTML5树叶飘落动画
这款HTML5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。源码下载演示地址HTML代码XML/HTMLCode复制内容到剪贴板<!--Thec
谈一谈HTML5本地存储技术
本地缓存是HTML5出现的新技术，这个技术的出现使得移动web的开发成为了可能。我们都知道，要想打造一个高性能的移动应用，速度是关键。而在HTML5之前，只有cookie能够
多视角3D可旋转的HTML5 Logo动画
这是一款基于HTML5和CSS3的3D动画特效，与之前的3D特效不同的是，这款是完全用HTML5特性实现的，而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转
HTML5 Canvas实现烟花绽放特效
本文为大家带来了一款，免费而又安全环保的HTML5Canvas实现的放烟花特效。效果如下：代码如下：XML/HTMLCode复制内容到剪贴板Canvas实现放烟花特效<meta
HTML5的新特性(1)
HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术
html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的，看到效果非常棒并且很实用，就第一时间把它整理出来与大家分享了，主要用到了htm
HTML5实现多张图片上传功能
图片上传之前也有写过，不过是单张上传的，最近有个业务需求是需要多张上传的，于是乎从新改写了一下HTML结构：XML/HTMLCode复制内容到剪贴板请选择一个图像文件：<in
html5 canvas移动浏览器上实现图片压缩上传
最近在移动端设计头像上传功能时，原本是以直接通过formData上传，然而实际使用情况是：对于过大的图片（高像素手机所拍摄的照片等）上传时间过长会导致上传失败，而每
HTML5 canvas实现移动端上传头像拖拽裁剪效果
本示例使用HTML5canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪，虽然样式不好看，但是功能还算全：下图为裁剪后的效果：html部分：XML/HTMLCode复制内
通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中，CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法，请参考以下属性和方法介绍：JavaScriptCode复制内容到剪贴板arc(x,y,radius,start
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
键盘控制小球移动众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上
HTML5 3D衣服摇摆动画特效
这又是一款基于HTML5Canvas的3D动画杰作，它是一个可以随风飘动的3D衣服摇摆动画特效，非常逼真。当我们将鼠标滑过衣服时，衣服将会出现摇摆的动画，点击鼠标时，衣服
HTML5 Canvas入门学习教程
HTML5究竟什么是HTML5？在W3CHTML5的常见问题中，关于HTML5是这样说明的：HTML5是一个开放的平台下开发的免费许可条款。具体来说，对这句话有以下两种理解：“指
HTML5 Canvas基本线条绘制的实例教程
怎么画线条？和现实中画画差不多：1.移动画笔，使画笔移动至绘画的开始处2.确定第一笔的停止点3.规划好之后，选择画笔（包括画笔的粗细和颜色等）4.确定绘制因为Canvas
HTML5 Canvas的常用线条属性值总结
线条属性概述线条的属性共有以下四个：1、lineCap属性lineCap定义上下文中线的端点，可以有以下3个值。butt：默认值，端点是垂直于线段边缘的平直边缘。round：端点是
HTML5 画布canvas使用方法
canvas元素使用JavaScript在网页上绘制图像，本身是没有绘图能力。canvas是一个矩形区域，可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加
使用HTML5 Canvas为图片填充颜色和纹理的教程
填充颜色艺术离不开色彩，今天咱们来介绍一下填充颜色，体会一下色彩的魅力。填充颜色主要分为两种：1.基本颜色2.渐变颜色（又分为线性渐变与径向渐变）我们一个个来看
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？这里就要用到数学
HTML5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5触摸事件(Touch)和CSS3动画(Transform,Transition)来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。1、实现原理假
使用HTML5 Canvas API绘制弧线的教程
绘制标准圆弧在开始之前，我们优化一下我们的作图环境。灵感来自于上节课的纹理，如果不喜欢这个背景，我在images目录下还提供了其他的背景图，供大家选择。另外把所
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
平移变换translate()平移变换，故名思议，就是一般的图形位移。比如这里我想将位于（100，100）的矩形平移至（200，200）点。那么我只要在绘制矩形之前加上context.trans
实例讲解利用HTML5 Canvas API操作图形旋转的方法
作为web开发者，我一直在和HTML5canvas元素打交道。渲染图片是一个大的分支，十分重要而且很常用，所以,今天的教程是关于画布图像展示以及如何旋转图像，说不定是你现
详解如何用HTML5 Canvas API控制图片的缩放变换
缩放变换scale(sx,sy)传入两个参数，分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实，看上去简单，实际用起来还是有一
深入解析HTML5 Canvas控制图形矩阵变换的方法
在介绍矩阵变换transform()前，我们来说一说什么是变换矩阵。以上是Canvas中transform()方法所对应的变换矩阵。而此方法正是传入图中所示的六个参数，具体为contex
使用HTML5 Canvas API控制字体的显示与渲染的方法
API简介今天我们开始征战一个全新的内容——HTML5Canvas的文本API！要知道，艺术家通常同时也是一个书法家，所以我们要学习写字，而且是写出漂亮的字。是不
实例讲解使用HTML5 Canvas绘制阴影效果的方法
创建阴影效果需要操作以下4个属性：1.context.shadowColor：阴影颜色。2.context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。3.context.shadowOffsetY：阴影y轴
详解HTML5 Canvas绘制时指定颜色与透明度的方法
指定颜色黑色是Canvas绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。JavaScriptCode复制内容到剪贴板ctx.strokeStyle=color指定绘制线的颜色：Ja
HTML5触摸事件演化tap事件介绍
触摸事件是移动浏览器特有的HTML5事件，虽然click事件在pc和移动端更通用，但是在移动端会出现300ms延迟，较为影响用户体验，300ms延迟来自判断双击和长按，因为只有默
移动端HTML5实现文件上传功能【附代码】
PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，
实例讲解使用SVG制作loading加载动画的方法
今天和大家分享一个以SVG图像为主的loading加载动画，现在移动端网页使用比较多，若还用GIF做loading图片的话，可能会影响图像的质量，所以使用SVG是一个不错的方式。
整理HTML5移动端开发的常用触摸事件
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以
HTML5移动端开发中的Viewport标签及相关CSS用法解析
移动前端中常说的viewport（视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是dip（device-independentpixel设备逻辑像素）和CSS像素之间的关系。这里
如何利用input事件来监听移动端的输入
今天遇到一个新需求，经理要求评论功能需要限制字数，就像微博那样限制最多输入150字，这里就需要实时提醒用户还能输入多少字了。在最开始的时候，想到的是监听keyup
浅析border-radius如何兼容IE
目前而言firefox，opera,chrome等主流浏览器都已经支持border-radius属性，唯独IE8以及之前。解决办法就是在用的border-radius属性的后面加上:behavior:url(ie-css
基于html5绘制圆形多角图案
先看看最简单的效果图：代码如下：JavaScriptCode复制内容到剪贴板varcanvas=document.getElementById('my'),ctx=canvas.getContext('2d');setInterval(function()
HTML5本地数据库基础操作详解
下面分别介绍本地数据库的各个API及其使用方法。1、利用openDatabase创建数据库我们可以利用openDatabase方法创建数据库。openDatabase方法传递五个参数，分别是：
HTML 5.1来了 9月份正式发布 更新内容预览
HTML5.1来了。HTML5诞生多年以来，受到多数主流浏览器的支持。接下来，这门互联网编程语言也将走上更加规范化的道路。W3C组织最新宣布，正在编写HTML5.1的语言标准规
HTML5标签嵌套规则详解【必看】
目录分类子元素总结前面的话在html5中，元素的子元素可以是块级元素，这在以前是被认为不符合规则的。本文将详细介绍html5的标签嵌套规则分类html5出现之前，经常把
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
使用HTML5的canvas画的孙悟空，CSS3画的白云飘飘。效果图：代码如下：CSSCode复制内容到剪贴板<metahttp-equiv="X-UA-Compatibl
html5需遵循的6个设计原则
实际上，html5并不是由w3c直接制定的，w3c的方向是xhtml2，而不是html5。当xhtml2脱离现实，无法付诸实践时，w3c工作组才将研究方向转向html5。为什么xhtml2从未落到实
字中字效果的实现【html5实例】
用html5实现如图字中有字效果实现思路：用canvas输出文字，然后分析像素点，根据像素点输出文字。核心代码：JavaScriptCode复制内容到剪贴板varcanvas;varctx;vartex
HTML5 Canvas绘制五星红旗
Canvas绘图API都没有定义在元素本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。CanvasAPI也使用了路径的表示法。但是，路
深入剖析HTML5 内联框架iFrame
由于现在frame和frameset很少使用，已经过时了，已经被div+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iFrame所谓的iFrame内联框架，我的理解就是
详解HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,
HTML5事件方法全部汇总
下面的表格列出了可插入HTML5元素中以定义事件行为的标准事件属性。Window事件属性-WindowEventAttributes表单事件-FormEvents键盘事件-KeybordEvents鼠标事件-M
HTML5中的强制下载属性download使用实例解析
HTML5的Download属性用来强制浏览器下载对应文件，而不是打开。Chrome和Firefox等浏览器太过于强大，也许是为了增强用户体验，当用户点击的资源文件可以被它们识别的
HTML5实现页面切换激活的PageVisibility API使用初探
HTMl5推出了一个很“特别”的APIPageVisibility，之所以说它特别，是因为这个API关注的是一个很少人留意的功能——浏览器标签(tab)是否被激活
【HTML5】Canvas绘制简单图片教程
获取Image对象，new出来定义Image对象的src属性，参数：图片路径定义Image对象的onload方法，调用context对象的drawImage()方法，参数：Image对象，x坐标，y坐标重载方法
html5 实现客户端验证上传文件的大小(简单实例)
在HTML5中，现在可以在客户端进行文件上传时的校验了，比如用户选择文件后，可以马上校验文件的大小和属性等。本文章向码农介绍html5如何实现客户端验证上传文件的大
深入理解HTML的FormData对象
FormData是HTML5标准制定的一个新的封装对象，有了FormData对象，可以方便地通过javascript创建表单数据，直接以ajax发送到服务器中。目前浏览器的支持情况为：以上这
用HTML5的canvas实现一个炫酷时钟效果
对于H5来说，canvas可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的。canvas这个标签的用法，在网上也有
Html5实现用户注册自动校验功能实例代码
抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。以下是效果截图：1.页面代码：usersRegister.hbsXML/HTMLCode复
HTML5对比HTML4的主要改变和改进总结
这段时间一直在帮老师做项目比较忙，经常课都没去上，就泡在实验室里，也没什么时间看其他东西了。我在项目中分配到了前端页面设计这一块，有时候浏览网页看到移动端
HTML5拖拽的简单实例
拖拽相关属性draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以
关于老式浏览器兼容HTML5和CSS3的问题
1.让老式浏览器支持HTML5HTML5能为我们做的事儿很多，最为可口的就是语义化标签的应用，如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x，那这篇文章对你
HTML5中的进度条progress元素简介及兼容性处理
一、progress元素基本了解1.基本UIprogress元素属于HTML5家族，指进度条。IE10+以及其他靠谱浏览器都支持。如下简单code:XML/HTMLCode复制内容到剪贴板o(︶︿︶)o
12个不为大家熟知的HTML5设计小技巧
12个不为大家熟知的HTML5设计小技巧，内容如下1、交互上，慎用向右滑动的操作方式。如：刮刮乐涂抹效果，左右滑动翻页等。原因：苹果手机上，向右滑动容易触发返回&ldq
10个最常见的HTML5面试题 附答案
本文为大家分享了最常见的10个HTML5面试题，希望大家喜欢。问题1、新的HTML5文档类型和字符集是？答：HTML5文档类型很简单：HTML5使用UTF-8编码。问题2、HTML5中如何
HTML5通用接口详解
1.先说几个基本类型：DOMString，boolean，long，unsignedlong，double，NaN（Not-a-Number）。DOMString其实就是其它大家常用的语言中的string。在HTML5中，它用于表示ur
HTML最新标准HTML5总结(必看)
HTML5出来已经很久了，然而由于本人不是搞前端的，只知道有这个东西，具体概念有点模糊（其实就是一系列标准规范啦）；因此去年，专门对HTML5做了个简单的小结，今天正好
HTML5 新标签全部总汇(推荐)
标签定义外部的内容（外部内容如blog,news）。使用后感觉和P差不多，语义化的标签。标签定义article以外的内容（可用做文章的侧栏）.语义化的标签。标签定义音乐。支持
基于HTML5 的人脸识别活体认证的实现方法
近几年，人脸识别技术在身份认证领域的应用已经有了较多应用，例如：支付宝、招行的取款、养老金领取等方面，但在杜绝假冒、认证安全性等方面，目前还是一个比较需要进
HTML5中使用postMessage实现两个网页间传递数据
估计很少人知道HTML5APIS里有一个window.postMessageAPI。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJ
浅析HTML5中header标签的用法
标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。在新的标准中header标签定义如下："Agroupofintroductoryornavi
HTML5 canvas基本绘图之绘制五角星
是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚
HTML5 canvas基本绘图之绘制线条
是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚
HTML5 canvas基本绘图之填充样式实现
是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚
HTML5 canvas基本绘图之图形变换
是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚
HTML5 canvas基本绘图之绘制曲线
是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚
HTML5 canvas基本绘图之文字渲染
与文本渲染有关的主要有三个属性以及三个方法：上述的属性和方法的基本用法如下：JavaScriptCode复制内容到剪贴板varcanvas=document.getElementById("canvas");va
HTML5 canvas基本绘图之图形组合
只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在>元素上绘图主要有三步：1.获取元素对应的DOM对象，这是一个Canvas对象；2.调用Ca
使用HTML5里的classList操作CSS类
在JavaScript和JavaScript工具库里征战多年，我经常有这样的遐想：什么时候现代浏览器里能提供一些辅助方法和类库，替代那些JavaScript工具库，比如jQuery，让我们用浏
HTML5中原生的右键菜单创建方法
即使是JavaScript被禁止，这些右键菜单仍然能正常显示。所以，如果你想尊重用户的选择，最好的方法是用JavaScript来创建这些菜单元素，注入到DOM元素里，这样，当JavaS
HTML5本地存储之Web Storage详解
在HTML5出现之前，如果开发者需要在客户端存储少量的数据，只能通过cookie来实现，但是cookie存在几个不足点：•每个域名下cookie的大小限制在4KB。•cookie
用html5的canvas和JavaScript创建一个绘图程序的简单实例
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序。首先准备容器Canvas元素，接下来所有的事情都会在JavaScript里面。XML/HTMLCode复制内容到剪贴板<ca
HTML5之语义标签介绍
在HTML5标准中，新加了几个用于增添页面语义的标签，这些标签有：article、section、nav和aside等。与别的大多数标签不同，浏览器在解释渲染这些标签的时候仅仅把它作
HTML5学习心得总结(推荐)
Html学习总结1.什么是html:HyperTextMarketlanguage，超文本标记语言,是用来描述网页语言，html使用标记标签来描述网页，html不是编程语言，是一种标记语言。2.经历过
关于HTML5语义标签的实践(blog页面)
仿照着用HTML5+CSS3做了一个blog页面。整体效果布局如如：页面布局是基于html5元素的。所以在开始动手之前先熟悉一下HTML5元素，然后检查它的语义是否适合你的布局
CSS实现单行、多行文本溢出显示省略号的实现
实现checkbox&radio对齐的方法
前端性能优化补充篇
清除浮动的几种方法(推荐)
Html与css基础(必看篇)