了解了它们的基本概念，接下来，我们就要为具体的学习做准备工作了。对于 HTML CSS 来说，准备工作相当简单，核心只有两件事：浏览器、编辑器。

HTML 文档本身并没有什么特别的，只是一个 HTML 后缀的文本文件而已，需要用浏览器打开才能显示出具体内容。比如把标题文本渲染成 40px 大小、黑色、加粗的效果。

而这个渲染过程，更准确的讲是由浏览器的渲染引擎——也称内核——完成的，而市面上主要的浏览器内核只有下面这四种：

• Blink：Chrome、Chromium、Opera 浏览器使用的内核
• Webkit：Safari 使用的内核
• Gecko：Firefox 使用的内核
• Trident： 原是 IE 浏览器的内核，现多被 360、遨游等国内浏览器用作兼容模式

之所以提这个，原因是因为浏览器的内核拥有对前端代码的解释权，而不同的内核对相同的代码解释起来有差异。就像同一段英文，你用牛津英汉和朗文当代词库的翻译结果是不会完全一致的。而这就是前端工程师针对浏览器的适配工作之一，确保所有浏览器获得相同的使用体验。

作为设计师来说，我们不需要具体去研究它们差异的细节，意识到有这个问题即可。所以为了确保我们后续的演示和你们自己学习的顺畅，请使用 Chrome 浏览器进行学习。

接着就是代码编辑器了，它是一个专门用来写代码的工具，虽然我们可以用 Windows 自带的文本工具写 (MacOS 的文本编辑器比较特殊)，但那个写起来太不得劲了，没有对不同的代码元素进行区分，缺乏阅读感。

所以，根据我自己的使用经验，墙裂推荐一款非常适合设计师学习前端的软件 Brackets，它搭配 Chrome 浏览器可以实现代码所见即所得的功效。

http://brackets.io

声明一点，学习前端一定要记得拒绝使用 Dreamweaver (DW) 这个工具，因为它完全是个累赘，不仅软件体积大，使用起来卡顿，没用的功能还特别多，最终会演变成从学习代码变成在学习软件。和很多设计师学做原型结果变成在学 Axure 的大量鸡肋功能一样没有意义。

下载下方附件中的两个软件并进行安装，那么我们就完成了学习 HTML CSS 的准备工作了。