1.3 Web前端开发工具

HTML5是一种标签语言，标签语言代码是以文本形式存在的，因此，所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm，将HTML源代码输入到记事本中，将编写好的文件另存为.html或.htm文件，就可以在浏览器中预览效果了。

1.3.1 NotePad

Notepad，指代码编辑器或Windows中的“记事本”程序。在Windows下主要用于文本编辑。一款开源、小巧、免费的纯文本编辑器。建议初学者使用NotePad进行编写，这样可以增加代码编写体验，增强对代码的理解和记忆。如图1-2所示。

图1-2 记事本编辑器

1.3.2 TextPad

TextPad是一个强大的替代Windows记事本Notepad的文本编辑器，编辑文件的大小只受虚拟内存大小的限制，支持拖放式编辑，可以把它作为一个简单的网页编辑器使用。普通用户也可不安装模板而只使用单独的主程序，支持Unicode编码。可以编译、运行简单的Java程序。其主界面如图1-3所示。

下载地址：http：//www.textpad.com/download/。

图1-3 TextPad编辑器

1.3.3 WebStorm

WebStorm中文译名“网络风暴”，是Jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。官方下载地址：http：//www.jetbrains.com/webstorm/。WebStorm较前两款工具功能要强大，当然用法也会更复杂些，具体使用方法在此不再展开介绍，大家可以参阅其他教程。

WebStorm为非开源软件，可以试用30天，如果继续使用需要支付费用。其主界面如图1-4所示。

图1-4 WebStorm主界面

1.3.4 Dreamweaver

虽然前面已经介绍了三款非常简单的文本编辑器来编写网页，但是编写效率相对较低，对于语法错误及格式都没有提示，因此，可以使用专门编写HTML网页的工具来弥补这种缺陷。Adobe Dreamweaver，简称“DW”，中文名称“梦想编织者”，是美国Adobe公司开发的集网页制作和管理网站于一身的、所见即所得网页编辑器，DW是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Dreamweaver的网站地图功能可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，可以自动更新所有链接。它还是视觉化编辑与原始码编辑同步的一款设计工具。如果大家学完本书的基础内容之后，在Web开发的过程中就可以借助Dreamweaver这个平台更快速高效地进行Web前端开发了。其使用方法在此也不再展开介绍，大家可以借助其他教程进行学习。其主界面如图1-5所示。

图1-5 Dreamweaver主界面