HTML5的功能强大不容置疑，与之相关的JavaScript和CSS技术能够能够让开发者在任何设备上都开发出丰富的网络页面应用。现在，已经有越来越多的公司加入到HTML5的平台上来了。而且，随着计算机硬件的不断完善和移动应用快速发展，HTML5的发展趋势也会越来越迅猛。
如何从标准的PSD设计图来制作匹配的HTML5网页是普通的网页应用中常见的问题，如何实现PSD向HTML5网页的转换也是目前很热门的网页制作技术之一。在PSD/HTML5转换过程中我们经常会面临以下的这些问题：如何快速开发出针对PSD源图的HTML5网页？PSD文件如何切图如何优化？怎样完美还原设计图中的效果？如何兼容各种类型各种版本的浏览器？如何精简前端HTML标签代码？如何在由PSD文件制作HTML5页面时兼顾到网页的SEO效果？
解决好了这些问题，要实现PSD转换成HTML5的工作也就不难实现了。
有的设计人员直接使用Photoshop或是Fireworks集成的插件功能来转换HTML，其实这是效果最差的，切图没有任何优化，导致最后的网页文件超大，性能低下不说，编码也是无数个table加img组成而没有任何优化。
所以最好不要使用插件来转换，要想得到精练的优化的HTML5编码和切图还必须得由手工，毕竟这些工作现在软件还替代不了。
进行PSD切图和转换工作的基本原则是代码与图片设计的分离。也就是说，在拿到PSD设计图稿之后，根据设计图只需要确定一个基本的结构框架，而页面代码基本上是通用的，但是需要根据设计添加适当的元素标签，这些元素与具体的设计形式没有关系。一个典型的HTML5页面头部代码如下：
<!DOCTYPE html> <html> <head> <title>My HTML5 Website</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head>
HTML5的便捷之处体现在它提供了更直观更丰富的页面标签，比如Header、footer标签。它的强大之处则体现在对多媒体的处理和呈现，比如画图、视频播放等。
对于常规的页面而言，Body标签的内部就不用再是反反复复的DIV的嵌套了，也无需为DIV的ID或样式设置而头疼了。一个简洁的HTML5页面内部的标签示例如下：
<body> <header><a href="index.html" id="logo"></a><img src="images/banner.png" id="banner" /></header> <ul id="nav"> <li><a href="index.html">home</a></li> <li><a href="#">about us</a></li> </ul> <div id="left"></div> <div id="right"></div> <footer></footer> </body> </html>
基本上绝大多数页面都可以采用以上架构来进行编码，所不同的是内容的添加和样式的设置。而切图工作的重点则在于先编码，后切图，通过编码决定切图的方式而不是直接简单的把图片切成很多小片。并且很多时候，有些可以采用背景色来代替的情况就根本没必要使用图片了，这样可以大大减小最终文件的大小。对于PSD文件的处理，需要精确到像素级别（之所以大多数时候我们做HTML5编码转换工作时要求使用PSD的源文件，原因就在于可以在像素级别进行精准操作，但这并不是说其它格式的文件不能进行转换，通常来看，常用的JPG，PNG，BMP等图片也可以转换为HTML5，前提是图片本身的分辨率要足够。），有些可以重复的背景就不用切大块的图片了。这样在PSD转换为HTML5的过程中可以兼顾到大小、执行效率，也便于做SEO的相关设置。