1.3 编辑HTML文件

1.3.1 常用HTML编辑软件

网站制作及前端开发软件是指用于制作HTML网页的工具软件。

1．Dreamweaver

Dreamweaver是美国Adobe公司推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于Dreamweaver支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，无须编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作，新版本使用了自适应网格版面创建页面，在发布前使用多屏幕预览审阅设计，可大大提高工作效率。所以，Dreamweaver是一款比较好的HTML代码编辑器。

2．Visual Studio Code

Visual Studio Code（简称VS Code）是Microsoft公司开发的运行于Windows、Mac OS X和Linux系统之上的，开源、免费、跨平台、高性能、轻量级的代码编辑器。它在性能、语言支持、开源社区方面都做得很不错。该编辑器支持多种语言和文件格式的编写，也集成了所有现代编辑器所应该具备的特性，包括语法高亮、可定制的热键绑定、括号匹配以及代码片段收集。

3．Hbuilder X

HBuilder X（简称HX）编辑器是DCloud（数字天堂）推出的一款支持HTML5的Web开发软件。该软件体积小，启动快。通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JS、CSS的开发效率。Hbuilder X在使用上比较符合中国人的开发习惯，用HBuilder X编写HTML代码还是很方便的。

4．Sublime Text3汉化版

Sublime Text是一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件，它不仅具有华丽的界面，还支持插件扩展，而且很容易上手。

5．Notepad++

Notepad++旨在替代Windows默认的notepad，它比notepad的功能更为强大。Notepad++支持插件，可通过添加不同的插件支持不同的功能。Notepad++属于轻量级的文本编辑类软件，比其他一些专业的文本编辑类工具启动更快，占用资源更少，其功能不亚于专业工具。

6．记事本

任意文本编辑器都可以用于编写网页源代码，最常见的文本编辑器就是Windows自带的记事本。

1.3.2 网页文件的创建

本书前几章的网页源代码采用在记事本中手工输入，有助于初学者对网页结构和样式更深入地了解。后几章在HBuilderX中编辑，以提高编辑效率。

一个网页可以简单得只有几个文字，也可以复杂得像一张或几张海报。下面创建一个只有文本组成的简单页面，来学习网页的编辑和保存过程。下面用最简单的“记事本”来编辑网页文件。

1）打开记事本。单击Windows的“开始”按钮，在“Windows附件”中单击“记事本”。

2）在记事本窗口中输入HTML代码，如图1-6所示。

3）在记事本的“文件”菜单中，选择“保存”选项。显示“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径，在“文件名”文本框输入以.html为后缀的文件名，如index.html，在“保存类型”下拉列表框中选择“文本文档（*.txt）”选项，在“编码”下拉列表框中选择“UTF-8”或“Unicode”选项，如图1-7所示。最后单击“保存”按钮，将记事本中的内容保存在磁盘中。

4）在如图1-8所示的文件资源管理器中，双击index.html文件启动浏览器，即可看到网页的显示结果，如图1-9所示。如果保存时选择的编码是“ANSI”，中文将显示为乱码。

本书所有的应用实例均是在Windows 10操作系统下的Google Chrome浏览器中运行。 VCkJ3GH8NDVO+Z9B5i/x7FL1jCuqLExZMmpcySTAhCT63b1InLKT3wFsKEKNf+4x