1.7 如何创建一个HTML 5网页_HTML5+ CSS3+JavaScript 网页设计实战（视频教学版）-QQ阅读男生都市网

书名：HTML5+ CSS3+JavaScript 网页设计实战（视频教学版）
作者名：常新峰
本章字数：3095字
更新时间：2021-03-24 12:49:13

1.7　如何创建一个HTML 5网页

本节开始一个实际案例，编写一个简单的HTML 5移动页面，让读者对移动网页技术有一个初步的了解。同时，通过这个案例让读者了解几款比较流行的HTML网页开发工具使用方法，以及调试方法。

1.7.1　HTML 5代码的编写

下面编写一个简单的HTML 5代码，让读者直观地体会HTML 5移动应用的魅力（详见源代码ch01/ch01-html-5.html文件）。

【代码1-4】

【代码解析】

第01～18行代码使用<html>标签定义了一个HTML 5页面文档。

第02行代码定义了一个HTML 5的<canvas>标签，即一个矢量画布标签，可以支持设计人员的自定义图形。

第03～17行为脚本代码，通过JavaScript脚本语言实现在<canvas>标签上的图形操作，具体方法的含义读者可以参考后面关于HTML 5的内容，本章中就不做深入介绍了。

同时，第04、06和08行代码分别使用console.log()方法在控制台输出调试信息。

1.7.2　使用文本编辑器开发

在编辑器的选择上，Web前端开发自由度是非常高的，即使是文本文档编辑器也可以作为Web开发的工具。使用文本编辑器进行开发听起来有些夸张，但是确实是可行的。下面介绍开发过程。

（1）打开文本编辑器，输入【代码1-4】，如图1.6所示。

（2）将源代码进行保存，如图1.7所示。

图1.6　使用文本编辑器输入源代码

图1.7　使用文本编辑器保存源代码

提示

使用文本编辑器保存的文件默认为（.txt）文本格式，而不是HTML网页格式。不过没关系，可以手动更改为.html格式，如图1.8所示。

图1.8　修改文件格式后缀

（3）调试HTML 5网页

文本编辑器是没有任何调试功能的，不过没关系，可以将刚刚保存好、并修改过文件后缀的ch01-html-5.html文件在浏览器中运行调试。这里选择运行网页的浏览器也是有一定技巧的，读者尽量选择具有HTML、CSS和JavaScript语言调试功能的浏览器。如今大部分主流浏览器都具有该功能。

下面先选用著名的FireFox浏览器运行ch01-html-5.html文件，如图1.9所示。FireFox浏览器的强大之处在于其内置的Web调试器，在页面中单击右键，在弹出的菜单中选择“查看元素”项，调试页面如图1.10所示。在调试窗口中可以看到网页源代码，还可以看到样式、布局、DOM和事件等窗口，这就是FireFox浏览器强大的调试界面。

图1.9　使用FireFox浏览器调试HTML 5网页（一）

图1.10　使用FireFox浏览器调试HTML网页（二）

1.7.3　使用EditPlus编辑器开发

诚然，文本编辑器的功能还是很低级的，一般不推荐设计人员使用。下面介绍一款比较高级，且非常流行的EditPlus编辑器工具来进行开发。

1．下载并安装EditPlus工具

首先，需要下载并安装EditPlus编辑器工具（当前最新版为4.2版本），下载地址：http://www.editplus.com，如图1.11所示。

图1.11　下载EditPlus工具

2．用EditPlus工具编辑代码

打开EditPlus编辑器，新建一个HTML网页文档，命名为ch01-html-5.html，并输入【代码1-4】，如图1.12所示。EditPlus编辑器的界面就显得漂亮多了，而且对于源代码有颜色区分与高亮显示，是一款专业的代码编辑器。

3．调试HTML 5网页

EditPlus编辑器有内置的浏览器，可以在EditPlus的工具条上直接选择打开浏览器按钮来运行网页，如图1.13和1.14所示。

图1.12　使用EditPlus编辑器输入源代码

图1.13　使用EditPlus编辑器运行HTML 5网页（一）

当然，EditPlus内置的浏览器是基于IE的，调试功能不强。不过，EditPlus工具的强大之处在于，其可以通过设定来调用外部浏览器。可以在主菜单中选择“Tools”|“Preferences”菜单项，如图1.15所示。在弹出的对话框中设定调用的外部浏览器，如图1.16所示。

图1.14　使用EditPlus编辑器运行HTML 5网页（二）

图1.15　调用EditPlus工具外部浏览器（一）

经过以上两步的设定，如果再次在EditPlus工具条中单击浏览器按钮，就会调用刚刚设定好的外部浏览器来运行HTML 5网页了，具体如图1.17所示。

图1.16　调用EditPlus工具外部浏览器（二）

图1.17　调用EditPlus工具外部浏览器（三）

1.7.4　使用Sublime编辑器开发

在编辑器的选择上，Web前端开发自由度是非常高的，下面推荐一款近年来席卷前端设计界的编辑工具—— Sublime Text，一款独具个性的高级编辑器，如图1.18是使用Sublime Text编辑器编写【代码1-4】的截图。

图1.18　使用Sublime Text编辑器

Sublime Text支持目前主流的操作系统，如Windows、Mac、Linux，同时还支持32和64位，支持各种流行编程语言的语法高亮、代码补全等。该款编辑器插件相当丰富，同时版本更新勤快。非常酷的一点是编辑器右边没有滚动条，取而代之的是代码缩略图。Sublime Text还有更多意想不到的强大功能，读者可以自行下载体验，编辑器下载地址：http://www.sublimetext.com/3。

提示

Sublime Text是款收费软件，不过目前为止可以无限期地使用。

1.7.5　使用WebStorm平台开发

下面介绍一款重量级的开发平台—— WebStorm，该开发平台是由jetBrains公司推出的、倍受广大设计人员所推崇的、集各种开发功能之大成的工具，当然也是收费软件，不过可以试用30天。

WebStorm既然是平台工具，就不仅仅具有代码编辑器的功能，自然还具有源代码管理、调试和运行等强大功能，这也是平台工具所必有的特性。WebStorm还具有很多先进的功能，读者可以下载安装，并根据软件手册测试体验，在此就不深入介绍了。

下面具体介绍使用WebStorm平台工具的开发过程。

1．下载并安装WebStorm软件

首先，需要下载WebStorm软件并安装，下载地址：http://www.jetbrains.com/webstorm/，如图1.19所示。

图1.19　下载WebStorm软件

2．使用WebStorm软件创建网页并编辑代码

打开WebStorm软件，新建一个源代码目录，并在该目录下新建一个HTML网页文档，命名为ch01-html-5.html，并输入【代码1-4】，如图1.20和1.21所示。

图1.20　使用WebStorm创建HTML 5网页（一）

图1.21　使用WebStorm创建HTML 5网页（二）

3．调试HTML 5网页

WebStorm软件可以在代码编辑页面中直接调用外部浏览器，当鼠标移动到页面右上角并停留，就会显示外部浏览器工具条，如图1.22所示。设计人员可以任选一款浏览器进行运行调试，这里笔者选择另一款调试功能也十分强大的Opera浏览器运行ch01-html-5.html网页，具体如图1.23所示。

图1.22　运行调试HTML 5网页（一）

图1.23　运行调试HTML 5网页（二）

Opera浏览器的强大之处在于其内置的Web调试器，下面在页面中单击右键，在弹出的菜单中选择“查看元素”项，调试页面如图1.24所示。在调试窗口中可以选择网页控制台（Console）窗口，看到控制台输出的信息正是【代码1-4】中第04、06和08行代码定义的输出信息。

图1.24　运行调试HTML 5网页（三）

1.7.6　使用Dreamweaver平台开发

下面再介绍一款深受前端开发人员喜爱的开发平台——Adobe Dreamweaver。目前，该开发平台是由著名的Adobe公司进行管理、维护与发布的。说起Adobe公司读者可能很熟悉，由该公司推出的Adobe Reader和Adobe Photoshop等软件是非常有名的。其实，Dreamweaver一开始并不是Adobe公司的产品，资深一点的读者可能都知道，Dreamweaver最初是由著名的Macromedia公司推出的、倍受广大设计人员所喜爱的前端开发平台。直到2005年Adobe公司收购了Macromedia公司，Macromedia Dreamweaver才变更为Adobe Dreamweaver。不过对于广大的设计人员来说，无论是Macromedia Dreamweaver也好，还是Adobe Dreamweaver也罢，随着Dreamweaver的不断改进与完善，其一直以来都是深受设计人员所信任和喜爱的前端开发平台。

Adobe Dreamweaver作为平台级别的开发工具，几乎涵盖了全部前端设计语言的开发功能，这一点与前一小节介绍的WebStorm平台工具略有不同，WebStorm还是更专注于HTML和JavaScript语言功能的开发。Adobe Dreamweaver自然也包括对源代码管理、调试和运行等功能，这是平台工具所必有的特性。Adobe Dreamweaver还有很多强大的功能，读者可以下载安装，并根据软件手册测试体验，在此就不深入介绍了。