我本人并不是做前端开发的程序员，做的工作跟编程几乎没有任何联系 .就是看到很多网站做得那么漂亮，出于好奇边想了解一下网站是怎么做出来的，于是便开始了解网站设计的前端知识。我目前依旧是一边自己了解前端知识一边分享一下我学习中的心得与问题。
工具——软件（HTML 语言编辑器）
为了练习 HTML 我下载了很多个软件试用，也就是网上说的各类编辑软件——IDE（集成开发环境，Integrated Development Environment ）。我用过 Notepad++、Sublime 3、Webstorm、记事本、Dreamweaver 等，目前我电脑里除了自带的记事本外一直保留 Notepad++ 和 Webstorm，Notepad++ 喜欢它的鼠标右键进行文件编辑但我不怎么用这个软件；主要用的就是 Webstorm 来对 HTML 进行编辑；sublime 3 其实也不错，看个人喜好了。
用 Webstorm 主要看中的是它属于 JetBrains 旗下的产品，JetBrains 的软件就好比 Adobe 出品的一样——都是精品，你在某宝上花点钱就能买到一年期的密匙，我不建议网上找破解版，都不太靠谱。另外，我觉得 Webstorm 有个地方不错，那就是当你编写完后会在右边自动出现几个浏览器，你选择你安装好的浏览器（我的是 chrome）它就直接呈现你编辑的效果了。
此外，Webstorm 还有 HTML 的速写插件——Emmet。Emmet 的前身是大名鼎鼎的 Zen coding，如果你从事 Web 前端开发的话，对该插件一定不会陌生。它使用仿 CSS 选择器的语法来生成代码，大大提高了 HTML/CSS 代码编写的速度，而且作为一款插件能够大部分的代码编辑器，文章后面列出了支持的代码编辑器类型。
我举一个简单的例子，正常情况下当你用 Webstorm 开始编写 HTML 的时候你得一个个的敲字母和符号，emmet 则通过敲击一个或几个字母按下 Tab 键后直接出现你需要的大量的代码，例如：我们写 HTML 开头部分会是这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML练习</title>
</head>
<body>
</html>
你得一个个的敲击字母和符号，而利用 emmet 则快速生成，请看下图,我直接在编辑器上打了一个符号“!”后按一下 Tab 键就自动生成了 HTML 的头部语言了，或者键入“html:5”按 Tab 也可以实现：
了解更多的 emmet 快捷键的使用可以网上搜，一大堆。不过前期初学者，就像我似的，不建议使用它，多打打代码记得牢固些，万一有一天遇到某个 IDE 不带 emmet 插件你还可以自己来完成！
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于