IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。
虽然并不是Adobe的Photoshop发明了混合模式，但它的实现效果是最真实的。但现在，你不需要使用Photoshop来运用混合模式美化你的图片，因为CSS3里提供里动态的实现这种效果的方法。
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果，它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。
最新HTML5.1规范元素表。这是一份仍未最终完成的规范：最后更新日期是2014年7月7日。本页内容是HTML和XHTML元素的过去和现状。
学会开发浏览器插件是一种很强大的技能，因为现在越来越多的东西都开始往网上转移，人们对浏览器的倚重越来越大，插件也就有了越来越多的用场，所以，学习一些浏览器插件技术会有好处的。
个人认为，对于Web前端程序员和跟HTML和CSS打交道的人来说，jQuery是有史以来最伟大的发明。jQuery的出现使Web程序员的开发效率突飞猛进，不亚于工业革命给人类生产力带来的提升。
CSS3给Web程序员提供了无限发挥的创造空间，以前只有视频、Flash、JavaScript才能实现的动画效果，如今只需要纯CSS+HTML就能做到。你能相信吗？这里呈现的所有动画，都是由一个DIV元素实现，纯CSS3技术。
GIF动图统治网上娱乐世界已经很长一段时间了，而Twitter却最近才宣布支持GIF格式，晚随晚，但毕竟是一件让人高兴的事情，可是，事实的真相远非你所想象的，上传到Twitter上的GIF动图在显示的时候却变成了MP4视频。
我之前说了很多如何将canvas图像保存成图片并下载的方法，但这些方法都是将图片保存到客户端，而我们的签名需求是需要将canvas的内容保存到服务器端，如何实现？
最近我在研究开发一个火狐插件，具体的功能是将网页内容截屏并分享到微博上。目前基本功能已经实现，大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果。
之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式，方法十分简单。但后来我发现只将canvas内容转变成图片输出还不够，如何能将转变后的图片保存到本地呢？
HTML5和CSS3的诞生和普及必将对传统行业带来巨大的冲击，像微软PPT这样的软件必将慢慢转移的在线的HTML5+CSS3上，因为用HTML5+CSS3实现幻灯片不仅更简单、容易，而且功能更强调，特效更绚丽。impress.js就是这样一款可以让你轻松利用CSS3动画实现具有神奇特效的幻灯片工具。
因为困惑于那种浏览器最流行，在我的苹果电脑上，我经常在谷歌浏览器和火狐浏览器之间来回切换。这两种浏览器长的如此之像，以至于我只能通过看任务栏上它们的程序名称来分辨。今天，我看到了一张Opera浏览器的截图，让我相信它们三个如出一辙。
这里提供了各种各样的超链接特性，有些是借助伪元素，有些是借助svg，有些是借助HTML5动画。用你的鼠标悬停在这些链接上，给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器，比如谷歌浏览器或火狐浏览器。
最近在使用Wordpress时，页面加载异常缓慢，一个简单的页面需要等待很久，使用firebug查看发现，是浏览器一直在等待页面中嵌入的谷歌网络字体(google fonts)链接fonts.googleapis.com，直到超时。这说明fonts.googleapis.com这个网站也被封锁了。
在HTML5之前，对于这样的页面需求，最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”，会发现有无数的可选择的JavaScript组件。大部分这些日期选择组件都提供将日期填充到指定的输入框里的功能。
DataList的作用是在你往input输入框里输入信息时，根据你敲进去的字母，自动显示一个提示下列列表，很像百度或谷歌的搜索框的自动提示，在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。
Range就是范围：年龄范围，工资范围，人数范围。当页面上需要用户输入一个在一定范围内的数字时，使用一个类似滑块控件是十分方便的。一个典型的滑块控件使用场景就是颜色选择器中用左右拖拽箭头来调节RGB颜色值。
之前在介绍HTML5的placeholder属性时，曾实现了一些页面例子让大家参考，但这些例子里的背景文字都是灰色的，样式很单一，其实它们可以做的更好看，CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。
滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果，经常使用PhotoShop的人应该非常清楚，每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜，不需要你使用任何做图软件，用纯CSS就会生成多种的滤镜效果，比如模糊效果，透明效果，色彩反差调整，色彩反相等等
你可能已经听说过，HTML5里引入了几种新的input类型。在HTML5之前，大家熟知的input类型包括：text(输入框)，hidden(隐藏域)，submit(提交按钮)等。而HTML5到来之后，新增的input类型包括：number(数字)，date(日期)，color(颜色)，range(范围)等等。
在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。 当开发完成后，我发现了这个很酷的jQuery plugin(由@jackrugile开发)。 于是我就开始思考，我应该做出这个小的CSS project。
YouTube上的字幕和视频是独立的，没有合成到一起，所以，下载下来的视频是不含字幕的。这当然不行的，英语无字幕的视频估计没有几个人会喜欢。那么，如何能把字幕也下载下来呢？
input输入框背景文字提示效果在网上非常的普遍流行，但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式，不需要任何的JavaScript，只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。
对于第二种方法，也就是所谓的Web font网络字体。我需要先说一下它的基本原理。CSS有一种标记叫做@font-face，在@font-face声明里，你可以声明一种字体，指定这种字体字体库文件从网络中的某个地方下载。具体的写法如下：
这款简单而有趣的游戏是使用HTML5+js开发完成的，需要提醒大家注意的是，你需要使用支持HTML5的浏览器才能玩这个游戏，也就是说，你需要使用火狐浏览器或谷歌浏览器。游戏中，如果自定义参数设置的过于夸张，很可能会导致你的浏览器崩溃。回合时间是指鸭子飞走前的飞行时间。难度值可以是1-10，是来控制鸭子的飞行速度的。高于8的难度都属于有些夸张。鸭子数和子弹数都有个上限——你可以输入任何值，如果数目设的太大，程序是不会显示的。
在@font-face网络字体技术之前，浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体是因人而异的。@font-face的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。
自适应网页设计,也叫做响应式网页设计（英语：Responsive web design）是一种网页设计的技術做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其它便携设备）上阅读和导航，根据设备尺寸的不同，自动的调整页面上的元素布局和数量。
Web程序员最头疼的一个事情就是要记住很多不好记的东西。在CSS里，有很多属性都有组合写法和简写，比如Margin这个属性的组合写法是将margin-top,margin-left,margin-right,margin-bottom是个属性组合使用。而简写是将四种属性合并到一起，变成 margin：1px 2px 3px 4px。虽然很简练，但你需要记住这四个值分别是什么意思。
当使用Opera浏览器测试手头上正在开发的一个网站时，我发现在激活浏览器中的标签页(tab)时遇到了很大的麻烦。我说的“激活”是指用鼠标点击浏览器的标签页标签(tab)时，标签页没反应，没有切换成当前激活页。我需要点击几次才能让我想要的该死的标签页切换出来。
PHP里面有一个非常强大的函数库，它们的目的就是让你安全的从远程网站上取回内容。这些函数被称作CURL。现在，你不要被CURL官方页面上大量的东西吓阻，它实际上非常的简单。
下面这个人脑袋的五官的摆放就是采用了“自适应网页设计”，调整你的浏览器窗口的大小，或分别使用桌面电脑、平板和手机访问这个页面，看看这脑袋上的五官布局是如何适应屏幕的变化的。自适应网页设计,也叫做响应式网页设计（英语：Responsive web design）是一种网页设计的技術做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其它便携设备）上阅读和导航，根据设备尺寸的不同，自动的调整页面上的元素布局和数量。
如果你使用谷歌浏览器或火狐浏览器，你会发现页面上的textarea元素的右下角有个小三角，用鼠标箭头拖拽它，你的textarea就能随着放大或缩小。这是现代浏览器为方便用户而添加的一个辅助功能(很遗憾，不包括IE，如果你使用IE，是看不到的。)。Web程序员在设计网页时，一般给了textarea一个固定的长宽，通常是配合布局而设定。但挑剔的用户往往会认为太小或太大。有了这个可以调整大小的工具后，用户就可以自己选择合适的大小了。
谷歌，我们每天的生活都离不了的搜索巨人，在这周，对它的官方logo进行了一次修改。这次的改动非常小，小到你几乎无法察觉到。“Google”中“g”和“l”被轻轻的移动了一点位置——为了让logo更好看。
::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，基本的效果是这样的:
