mac端推荐使用sublime+emmet.

环境搭建

sublime

官网下载sublime text 02或者03，03现在(2016.07)还是测试版，我使用的是text02.

emmet

sublime text需要一款强大的插件——emmet。
1 安装package control，使用control+`打开控制台，输入如下：
text02版本：
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
text03版本：
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

2 tools->command platte，输入:install package。再输入emmet安装重启即可。

emmet的使用

关于emmet的使用介绍，emmet使用类似于css的语法，快速生成html
http://www.iteye.com/news/27580

!+tab：生成html页面框架；

快速添加标签
标签名[.类名][#id名]+tab，快速生成

标签名[][]*n+tab，可以复制为n个单元

chrome开发者工具

mac
option+command—+j，打开开发者工具。
win F12

使用箭头选取html页面中对应元素，在elements窗口显示相应的html，在style窗口显示样式，并且能添加更改样式，实时查看不同样式的显示效果。