以图明志

PHP服务器脚本

[专题] PHP安全编程:跨站脚本攻击的防御

htmlentities()转换为HTML实体
跨站脚本攻击是众所周知的攻击方式之一。所有平台上的Web应用都深受其扰,PHP应用也不例外。所有有输入的应用都面临着风险。Webmail,论坛,留言本,甚至是Blog。事实上,大多数Web应用提供输入是出于更吸引人气的目的,但同时这也会把自己置于危险之中。如果输入没有正确地进行过滤和转义,跨站脚本漏洞就产生了。

Web设计理念

前端与页面开发的水有多深

Stay Hungry, Stay Foolish
但凡从事互联网的人基本都会写几行html,用过Word的人用Dreamweaver也能做出规整的页面,所以大部分人会很自然地认为“页面的开发没什么技术含量,很简单”。不仅有这种普遍的认知,对从业者来说也有很多疑惑:做页面前端实现,没问题;兼容性,小case;图片集成,一直都在用……还能有什么问题?瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。

HTML

用HTML5 Canvas做一个画图板

一个简单的Canvas应用
功能很简单,原理其实和拖放是类似的,主要是三个事件:在canvas 上绑定mousedown 事件以标志绘画的开始(调用moveTo 移动画笔) 在document 上绑定mousemove 事件来处理绘画时的行为(调用lineTo 以及stroke 进行绘画) 在document 上绑定mouseup 事件以标志绘画的结束(解绑document 上的两个事件)

HTML

用HTML5 canvas写一个时钟

图片指针用ctx的drawImage可以实现
HTML5足够强大实现很多功能,画一个时钟只是一个小玩意。图片指针用ctx的drawImage可以实现。至于兼容性问题,网上的解决方案已经很多了。这个东东是用来玩的,不是用来做应用的,学习下canvas API。

HTML

你知道HTML标签设计的本意吗?

把HTML标签用到该用的地方去
“DIV+CSS”这个词汇不知道害了多少人,也许其提出者本意并没有错,但是跟风者从表现曲解了其意思,认为整个页面就应当是DIV+CSS文件的组合。这样做,对于视觉上并没有什么影响,因为还原了之前设计的页面效果图,但如果这种HTML文档交给机器(例如蜘蛛)去分析,它可能根本找不到重点,你整个页面对它来说,就如同一个白蚁窝。

HTML

HTML标签的使用要注意语义化

用什么标签最能描述这块内容
语义化标签:你认为用什么标签最能描述这块内容,觉得这样表述更有意义,那么就可以使用这个标签。现在的浏览器对CSS支持都挺完善的(不包括CSS3),讲究的是结构与表现相分离,结构与行为相分离,一个WEB页面,结构是最主要的,结构相当于一栋房子的墙,标签是一块块砖,砖摆得有序,摆得整治齐,墙才牢固,所以说标签语义化很重要。

HTML

HTML5用canvas绘制五星红旗

学习canvas的一个小实例
作为HTML5标准的一部分,Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。

HTML

圣诞了,送大家一颗HTML5圣诞树

HTML5 Canvas圣诞树
又逢圣诞了,为了让小站NowaMagic有点节日气氛,这里也弄一棵圣诞树放放~大家可以先看下效果。由于用到canvas以及一些复杂的运算,建议使用Chrome浏览器观看,最为流畅,其次是Opera(已经开始有点卡了),Firefox差不多是逐帧播放了,Safari貌似有bug,除非用鼠标不断点击,不然几乎不会动了。用IE的话请自重。

HTML

HTML5 canvas流体力学效果

这个世界牛人实在太多了
某人用Java搞了一个流体力学的演示:http://grantkot.com/MPM/Liquid.html。 HTML 5版的流体力学演示(推荐使用Chrome浏览器浏览)不过,这仅仅是个开始。某同学将其发布上了reddit.com,于是,全世界的同学们开始给力了。

HTML

HTML5 canvas 创意:飞翔的凤凰

艺术!不是吗?
当我看到这件作品的时候,我表示非常喜欢。这个作品的产生不仅仅需要编程和算法,作者肯定是个充满了艺术细胞的人。倘若有什么canvas艺术作品比赛的话,我想它就是获奖的那个。先观赏下演示吧。注意,要看到效果,请确保你的浏览器支持 HTML 5。如果你还在使用旧版 IE,请更换新版浏览器。

Web设计理念

HTML表单、HTTP Get与Post杂谈

深入了解网站的传输原理
HTTP的GET/POST方式有何区别?这是一个老生常谈的问题,但老生常谈的问题往往有一些让人误解的结论。本文将带您浅尝HTTP协议,在了解HTTP协议的同时将会展示许多被人们忽视的内容。在掌握了HTTP协议的过程中我们将自然而然地了解到GET与POST的本质区别。

HTML

解析 HTML DocumentType 元素

不起眼的一个细节学问也很多
W3C规范的正确翻译应该为W3C推荐(W3C Recommendations)。很多设计师的眼里W3C就是标准。但是许多人都是一知半解。下面列于了目前W3C规范中的HTML规范和XHTML规范,稍后会讲解HTML和XHTML的关系。 XHTML可以看成是最新的HTML规范,是一项可从 HTML 4.01 平稳迁移的 XML 应用。

HTML

HTML5 语义标签介绍

语义标签是HTML5的一大改进
HTML5 规范包括一系列新的语义元素,用于提供 Web 页面的各个区域或部分的意义,例如页眉、页脚、导航等等。在以前版本的 HTML 中,通常使用 div 元素来创建这些部分,使用 ID 或 类属性来区分它们。这样做的问题是这没有任何语义意义,因为没有定义严格的规则来指定要使用的类名称或 ID,使软件极其难以确定特定区域的操作。

HTML

深入解析HTML的form标签

常用的form标签你真的了解吗?
在Javascript中,页面上的每一对form标记都解析为一个对象,即form对象。可以通过document.forms获取以源顺序排列的文档中所有form对象的集合。每一个表单元素的文字描述都应该使用label标记。该标记用于将文字绑定到对应的表单元素上,它的for属性指定它所要绑定的表单元素id值。

HTML

HTML图片的热区map area

在图片的特定区域添加热区与链接
area标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。shape和coords:是两个主要的参数,用于设定热点的形状和大小。coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。

HTML

防止浏览器假死的一个HTML5方案

HTML5 webWorker的使用
在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了。一个浏览器至少存在三个线程:js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。
1 / 2 首页 < Prev 1 2 Next > 尾页 页码: