雨夜带刀's Blog

22个HTML5的初级技巧

Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

1. 新的Doctype声明

XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

<!DOCTYPE html>

HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式,你可能会奇怪IE6/7居然也可以支持HTML5 Doctype,事实上,IE是只要doctype符合 这种格式,都会进入标准模式。

使用lazy load延迟图片的加载

lazy load是一款用来延迟图片加载的jQuery插件,如果网页上的图片比较多,使用这个jQuery插件就可以在一定程度上降低服务器的负载,从而达到优化网页的效果。

细心的同志可能注意到了本博首页的文章缩略图的加载效果,当用户往下拖动滚动条的时候,图片才会加载出来。正常的加载方法是在页面载入时同时加载图片的,可以说是“多线程”的加载方式吧,而lazy load的加载方式就是按需加载,效果还是挺不错的。

lazy load的使用也很简单,既然是jQuery插件,那么第一步肯定是在<head>标签中导入jQuery的库文件,然后接着导入lazy load的代码:

压缩JS/CSS的利器–minify

minify是一款使用PHP5开发的一款用于压缩合并Javascript和CSS文件的应用程序,是前端开发人员优化页面加载速度的一款很好的工具。

本博就使用了minify对整个网站的Javascript和CSS文件进行了压缩,压缩率非常高,大大缩短了页面的加载时间。对于wordpress还有相应的插件,如果你也使用wordpress并且不喜欢自己动手修改文件,那你可以直接下载WP-Minify这款插件。如果不是wordpress,或者喜欢自动动手DIY的接着往下看…

Zen-coding–高效的XHTML/CSS代码扩展插件

只要你对CSS的选择器比较熟悉,就可以利用简短的类似于CSS选择器的代码高效的编写出XHTML代码。

象这样一句简短的代码:(div#hea>h1#title>a)就可以快速的扩展成下面这段XHTML代码:

超酷的Flash 3D图片幻灯片特效– cu3er

cu3er是一个基于Flash的3D图片幻灯片特效。它不同与其它的图片幻灯片就是在切换的时候很有立体感,超酷的3D效果!

先看看它的Demo:

不要不相信自己的眼睛,从看到这个效果的第一眼起,你肯定会喜欢上它。

3D图片幻灯片

cu3er的使用也很简单,我们来看看如何自己DIY…

头像

雨夜带刀

主要折腾前端
现居北京

第 17 页,共 18 页« 最新...10...1415161718