1.2 学习HTML5前的准备工作
在开始编写HTML5网页之前，首先要准备好编写HTML5的操作环境和浏览器环境。本节介绍常用浏览器和常见的HTML5开发软件，以及如何创建一个HTML5页面。
1.2.1 常用浏览器介绍
浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并可以让用户与HTML文件交互的一种软件。浏览器可以解析HTML文件，它不会显示HTML标签，而是使用标签来解释页面的内容。
1. 常用浏览器
1）Internet Explorer是微软公司推出的一款网页浏览器。全称Microsoft Internet Explorer（6版本以前）和Windows Internet Explorer（7、8、9、10、11版本），简称IE。在IE7以前，中文直译为“网络探路者”，但在IE7以后便直接称为“IE浏览器”。IE9和IE10支持部分HTML5技术。
2013年10月IE11（11.0.9600.16384）问世，由于HTML5标准规范于2014年10月公布，所以IE11不可能完全支持HTML5的所有技术。
2015年微软公司放弃IE浏览器，推出Microsoft Edge浏览器。Microsoft Edge浏览器在支持HTML5方面有了很大提高。
2）Google Chrome是由Google公司开发的一款网页浏览器。Google Chrome的特点是简洁、快速。由于Google Chrome拥有更强大的JavaScript V8引擎，使其拥有更快的解析和执行速度。2016年12月，Google Chrome把HTML5设为网页核心内容。
3）Mozilla Firefox中文俗称“火狐”（正式缩写为Fx或fx），是一个自由及开放源代码的网页浏览器，支持多种操作系统。它是在网页开发调试过程中常用的一款浏览器。
2. 浏览器内核介绍
浏览器内核主要分成两部分：渲染引擎和JavaScript引擎。
1）渲染引擎负责获取网页内容（HTML、XML、图像等）、整理信息（如加入CSS等）以及计算网页的显示方式，然后输出至显示器或打印机。所有网页浏览器、电子邮件客户端及其他需要编辑、显示网络内容的应用程序都需要内核。浏览器内核的不同对于网页的语法解释也会有不同，所以渲染的效果也不同。
2）JavaScript引擎负责解析和执行JavaScript来实现网页的动态效果。
开始，渲染引擎和JavaScript引擎并没有区分得很明确，后来，JavaScript引擎越来越独立，内核就倾向于指渲染引擎。
常见的浏览器内核见表1-1。
表1-1 常见的浏览器内核
1.2.2 常见的HTML5开发软件介绍
1. HBuilder
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发软件。HBuilder主体是由Java编写的。它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。
快是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JavaScript、CSS的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。
2. Dreamweaver
Adobe Dreamweaver简称“DW”，中文名称“梦想编织者”，是美国MACROMEDIA公司（该公司成立于1992年，2005年被Adobe公司收购）开发的集网页制作和网站管理功能于一身的所见即所得网页代码编辑器。
3. WebStorm
WebStorm是JetBrains公司旗下一款JavaScript开发工具。目前，WebStorm被广大中国JavaScript开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。
4. Notepad++
Notepad++是Windows操作系统下的一套文本编辑器，有完整的中文化接口并支持多国语言编写的功能（UTF8技术）。
本书选择HBuilder进行讲解和开发。
1.2.3 创建第一个HTML5页面
首先要安装HBuilder。下载地址为http://www.dcloud.io/，下载后的安装文件为一个压缩包，解压到想要存放的目录，打开使用即可。
1）打开HBuilder，单击“文件”→“新建”→“Web项目”，如图1-1所示。
图1-1 创建Web项目
2）在弹出的对话框中输入项目名称，如HelloWorld，再单击“浏览”按钮，选择项目存放位置，单击“完成”按钮，如图1-2所示。
图1-2 设置项目信息
3）创建完成后会在HBuilder窗口左侧显示出刚刚创建的项目，具体项目结构如图1-3所示。
图1-3 项目结构
项目结构包含的文件夹说明见表1-2。
表1-2 默认项目结构说明
这几个文件夹及文件是HBuilder默认创建的，后续可以根据项目实际情况进行增加或者删除相应文件及文件夹。
双击打开index.html，文件中有一段默认代码，此时就完成了一个基础的Web项目的创建。默认代码如下：
