上QQ阅读APP看书，第一时间看更新

第1部分 HTML5及其应用

第1章 HTML5概述

学前提示

HTML是一种标记语言，一般用于Web页面的内容或结构描述。目前的大多数网页都是采用HTML或者将其他程序（脚本）语言嵌入在HTML中编写的。HTML5是HTML的新版本，但HTML5不再仅仅是一种标记语言，而被称为广泛应用于Web前端开发的下一代Web语言。HTML5为Web应用开发提供全新的框架和平台，既包括免插件的音频、视频支持，也包括由Canvas API提供的图形编程接口，还包括本地存储、离线应用和多线程等内容。本章介绍HTML5的基础知识、特点和开发环境。

知识要点

• HTML5简介

• HTML5与HTML4的区别

• HTML5的特性

• HTML5的开发环境

1.1 HTML5简介

我们首先来学习HTML和HTML5的基础知识。

1-1 HTML5简介

1.1.1 HTML

1. HTML的含义

HTML是英文HyperText Markup Language的缩写，即超文本标记语言，是用于描述网页文档的一种标记语言。

最初设计HTML的目的是把存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便地联系在一起，形成一个整体。HTML的另外一个目的是为了让所有的用户都能得到一致的信息，不会因为用户的硬件、软件、语言、地理位置等不同而有任何差别。所有的软件供应商都按照这一语言规范编写解释器，从而使数据呈现一致。

HTML最早由欧洲原子核研究委员会的Berners-Lee发明，后来作为图文浏览器Mosaic的网页解释语言，并随着Mosaic的流行而逐渐成了网页语言的事实标准。

HTML标准由W3C负责开发和制定，W3C是World Wide Web Consortium的简称，也就是“万维网联盟”或“万维网协会”。各种标准的推出一般先由W3C委员会根据各厂商的建议制定草案（Draft），然后将草案公开并进行讨论，最后形成推荐（Recommendation，REC）标准。

2. HTML的历史

HTML自1989年首次应用于网页编辑后，便迅速崛起成为网页编辑主流语言。几乎所有的网页都是由HTML或者以其他程序语言嵌套在HTML中编写的。目前已经发布的HTML版本如表1-1所示。

表1-1 HTML历史版本

HTML没有1.0版本，是因为当时有很多不同版本的HTML。当时W3C并未成立，HTML在1993年6月作为互联网工程工作小组（Internet Engineering Task Force，IETF）的一份草案发布，但并未被推荐为正式规范。

在IETF的支持下，根据过去的通用实践，于1995年整理和发布了HTML2。但是，HTML2是作为RFC1866（Request For Comments，请求注解）发布的，其后经过多次修改。后来的HTML+和HTML3也提出了很多好的建议，并添加了大量丰富的内容，但当时这些版本还未能上升到创建一个规范的程度。因此，有许多厂商实际上并未严格遵守这些版本的格式。

1996年，W3C的HTML工作组编撰和整理了通用的实践，并于第二年公布了HTML3.2规范。同期IETF宣布关闭HTML工作组，从此W3C开始开发和维护HTML规范。

HTML4于1997年12月被W3C推荐为正式规范，并于1999年12月推出修订版HTML4.01。这个版本被证明是非常合理的，它引入了样式表、脚本、框架、嵌入对象、双向文本显示、更具表现力的表格、增强的表单以及强大的可访问性。

之后，到2012年，HTML5定稿并逐渐被各种浏览器支持。

1.1.2 HTML5

在HTML4.01发布之后，HTML规范长时间处于停滞状态，W3C转向开发XHTML，直到发布XHTML1规范和XHTML2规范。XHTML2规范越来越复杂，并没有被浏览器厂商接受。

与此同时，Web超文本应用技术工作组（Web Hypertext Application Technology Working Group，WHATWG）则认为XHTML并非用户所需要，于是继续开发HTML的后续版本，并定名为HTML5。随着万维网的发展，WHATWG的工作获得了很多厂商的支持，并最终取得W3C认可，终止XHTML的开发。HTML工作组重新启动，在WHATWG工作的基础上开发HTML5，并最终发布HTML5规范。

HTML5用于取代1999年所制定的HTML4.01和XHTML1标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持HTML5技术。HTML5有两大特点，首先，强化了Web网页的表现性能；其次，追加了本地数据库等Web应用的功能。广义的HTML5实际指的是包括HTML、CSS和JavaScript在内的一套技术组合，能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA），如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。

2012年12月，W3C宣布凝结了大量网络工作者心血的HTML5规范正式定稿。W3C在发言稿中称：“HTML5是开放的Web网络平台的奠基石”。尽管W3C的正式标准尚未发布，但这份技术规范意味着HTML5的功能特性已经完成定义，对于企业和开发者而言有了一个可以参照实现和规划的目标。

支持HTML5的国外浏览器包括Firefox（火狐浏览器）、IE9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera等；国内浏览器包括遨游浏览器（Maxthon），以及基于IE或Chromium（称为Chrome的工程版或实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器等。

1.2 HTML5与HTML4的区别

HTML5的出现，对于Web前端开发有着非常重要的意义，其核心目的在于解决当前Web开发中存在的各种问题。第一个问题是解决Web浏览器之间的兼容性问题。在一个浏览器上正常显示的网页（或运行的Web应用程序），很可能在另一个浏览器上不能显示或显示效果不一致；第二个问题是文档结构描述的问题。HTML4之前的各版本中，HTML文档的结构一般用div元素描述，文档元素的结构含义不够清晰；第三个问题，使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比如本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验。HTML5试图解决以上提到的问题。

HTML5和以前的HTML版本比较，一些区别体现在语法的变化、增加和删除的元素、属性和全局属性等方面，而HTML5新增的各种特性将在1.2.1节和后续章节中陆续介绍。

1.2.1 HTML5文档结构的变化

1-2 HTML5与HTML4的区别

1. 内容类型（ContentType）

HTML5的文件扩展名和内容类型与之前的HTML版本相同。也就是说，HTML5文件的扩展名仍然是“.html”或“.htm”，内容类型（ContentType）仍然是“text/html”。

2. DOCTYPE声明

DOCTYPE声明是HTML文件中必不可少的一部分，它位于文件第一行。HTML4的DOCTYPE声明如下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/
TR/html4/loose.dtd">

上面声明对应的是HTML4过渡版，实际上，HTML4的版本声明还有严格版本和XHTML版本，不同的HMTL版本的声明内容略有区别。

在HTML5中，DOCTYPE声明做了简化，该声明适用于所有HTML。声明如下。

<!DOCTYPE html>

3. 指定的字符编码

在早期的HTML版本中，使用meta标记指定HTML文件的字符编码，如下所示。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

在HTML5中，直接指定meta标记的charset属性可以设置字符编码，如下所示。

<meta charset="utf-8">

从HTML5开始，对于HTML文件的字符编码推荐使用UTF-8。

1.2.2 HTML5语法的变化

HTML5的语法格式和之前的HTML版本没有太大的变化。但从规范的角度，HTML5为提高各浏览器之间的兼容性，重新定义了在原HTML的基础上修改而来的语法，现在的新版本浏览器几乎都封装了HTML5的语法分析器，这套语法规范也就得到了几乎所有新版本浏览器的支持。下面从省略标记的元素、具有boolean值属性的元素、可以省略引号的元素等几方面来介绍HTML5语法的变化。

1. 可以省略标记的元素

在HTML5中，部分元素的标记可以省略。实际上，在HTML4或之前的版本中，部分元素的标记也可以省略，但在HTML5中，标记省略成为一种规范，绝大多数浏览器予以支持。省略标记的元素可以分为“不允许写结束标记”“可以省略结束标记”和“开始标记和结束标记全部可以省略”3种情况。如表1-2所示。

表1-2 省略标记元素的3种情况

需要说明的是，“不允许写结束标记的元素”是指不允许用开始标记与结束标记将元素内容括起来的形式，只允许使用“<元素/>”的形式进行书写。例如“<img>...</img>”的书写方式是错误的，只允许“<img……/>”的书写形式。“可以省略全部标记的元素”是指该元素可以完全被省略。但即使元素的标记被省略了，元素还是以隐式的方式存在的。例如，省略不写body元素时，在文档结构中它还是存在的，可以使用document.body来访问body对象。

2. 具有boolean值属性的元素

一些元素，如果有boolean值的属性，如checked、autofocus与readonly等，当只写属性而不指定属性值时，表示属性值为true；如果想要将属性值设为false，则可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。属性值的设定方法可以参考下面的代码。

<!--只写属性名不写属性值代表属性为true-->
<input type="checkbox" checked />
<!--不写属性代表属性为false-->
<input type="checkbox" />
<!--属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked"/>
<!--属性值=空字符串，代表属性为true-->
<input type="checkbox" checked=""/>

3. 可以省略引号的元素

在不同版本的HTML中，在指定属性值的时候，属性值两边加引号时既可以用双引号，也可以用单引号。

HTML5在此基础上做了一些改进，当属性值不包括空字符串、“<”“>”“=”、单引号、双引号等字符时，属性值两边的引号可以省略，代码如下。

<!--请注意type的属性值两边的引号-->
<input type="text"/>
<input type='text' />
<input type=text />

1.2.3 HTML5增加和删除的元素

为了增强Web开发的功能，HTML5增加了一些元素和属性，也废除了很多不常用的元素，取消了一些属性。HTML5增加和废除的属性将在相关章节中介绍，本节主要介绍HTML5新增和删除的元素。

1. HTML5增加的元素

HTML5新增的元素可以分为文档结构元素（section、article、aside等）、多媒体元素（video、audio、embed等）和扩展HTML功能的元素（canvas）等，具体如表1-3所示。

表1-3 HTML5新增的主要元素

HTML5中新增了很多input元素的类型，例如，email、url、number、range、color等，具体内容将会在第4章中介绍。

2. HTML5废除的元素

HTML5废除的元素包括能用CSS代替的元素、frame框架、只有部分浏览器支持的元素等，具体如表1-4所示。

表1-4 HTML5废除的主要元素

1.2.4 HTML5的全局属性

在HTML5中，新增了一个“全局属性”的概念。所谓全局属性，是指可以对任何元素都使用的属性。

表1-5给出了HTML的全局属性，并标明了HTML5新增的全局属性。

表1-5 HTML元素的全局属性

1. contenteditable属性

该属性允许用户编辑元素中的内容，可以获得鼠标焦点，属性为布尔值，可被指定为true或false。另外，该属性还有个隐藏inherit状态，为true时允许编辑，为false时不允许编辑，未指定时，由inherit决定。

示例1-1设置了一个div元素的contenteditable属性，为了突出显示效果，为div元素设置了CSS样式，显示结果如图1-1所示。

图1-1 测试contenteditable属性

<!--demo0101.html-->
<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>contenteditable</title>
<style>
[contenteditable]:hover,[contenteditable]:focus {
     width:300px;
     height:150px;
     outline: 2px dotted red;
     background-color:#FCF;
}
</style>
</head>
<body>
     <div contenteditable>测试内容可修改</div>
</body>
</html>

2. designMode属性

该属性用来决定整个页面是否可编辑。属性取值为“on”或“off”。属性为“on”时可编辑，为“off”时不可编辑。当页面可编辑时，页面中任何支持contenteditable属性的元素都变成了可编辑状态。

3. hidden属性

所有元素都允许使用一个hidden属性，该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染该元素，使该元素处于不可见状态。该属性值为布尔值，为true时不可见，为false时可见。

4. spellcheck属性

该属性是HTML 5针对input元素（type=text）与textarea这两个文本输入框提供的一个新属性，主要对用户输入内容进行拼写与语法检查。属性值为布尔值，书写时必须明确声明属性值为true或false，书写方式如下。

<!--以下两种书写方法正确-->
<textarea spellcheck="true">
<input type=text spellcheck=false>
<!--以下两种书写方法为错误-->
<textarea spellcheck >

5. draggable和dropzone

这两个属性放在一起使用，因为它们是新的拖放API（Drag&Drop API）的一部分。draggable表示是否允许用户拖动元素；dropzone规定当被拖动的数据拖放到某个元素上时，是否被复制、移动或链接，但目前的主流浏览器还不支持dropzone属性。

draggable属性有3个值：true表示元素可拖动；false表示元素不可拖动；auto表示使用用户代理默认行为。

dropzone属性有3个值：copy表示创建被拖动元素的一个副本；move将元素移动到新位置；link创建被拖动的数据的链接。

1.3 HTML5的特性

HTML5在语法上与之前的HTML版本是兼容的，同时也增加了很多新的特性，这些特性标志着HTML5从标记语言的功能提升到下一代Web语言的开发框架。可以这样认为，HTML5集成了HTML+CSS3+JavaScript的Web应用框架。下面列出了部分典型的HTML5特性。

1. 良好的语义特性

HTML5支持微数据与微格式，增加的各种元素赋予网页更好的意义和结构，适于构建对程序、对用户都更有价值的数据驱动的Web应用。HTML5所做的一个比较重大的修改就是增加了很多新的结构元素，从而使文档结构更加清晰明确，新增的结构元素包括section元素、article元素、nav元素以及aside元素等。

2. 强大的绘图功能

HTML5之前的版本没有绘图功能，在网页中只能显示已有的图片；而HTML5则通过新增的元素集成了强大的绘图功能。在HTML5中既可以通过使用Canvas API动态地绘制各种效果精美的图形，也可以通过SVG绘制可伸缩矢量图形。

3. 增强的音视频播放和控制功能

HTML4在播放音频和视频时都需要借助Flash等第三方插件。而HTML5新增了audio和video元素，可以不依赖任何插件播放音频和视频。同时，HTML5的音视频API还有强大的播放控制功能，也可以通过audio和video的子元素为音频和视频增加字幕。

4. HTML5的数据存储和数据处理的功能

HTML5新增了一系列数据存储和数据处理的新功能，大大增强了客户端的处理能力，足以颠覆传统Web应用程序的设计和工作模式。使用HTML5桌面应用能很好地提升用户的体验和交互。HTML5与数据存储和数据处理相关的应用如下。

（1）离线应用

传统Web应用程序严重依赖Web服务器，如果没有Web服务器的支持，用户不能完成任何工作。用HTML5可以开发支持离线的Web应用程序，无法连接Web服务器时，可以切换到离线模式；当Web服务器连通后，可以进行数据同步，把离线模式下完成的工作提交到Web服务器。

（2）Web通信

出于安全考虑，HTML4一般不允许一个浏览器的不同框架、不同页面、不同窗口之间的应用程序互相通信，主要用于防止恶意攻击。如果要实现跨域通信只能通过Web服务器来实现。HTML5提供了跨域通信的消息机制。

（3）本地存储

HTML4只能使用Cookie存储很少量的数据，比如用户名和密码，存储能力很弱。HTML5增强了文件的本地存储能力，可以存储多达5MB数据。HTML5还支持WebSQL和IndexedDB等轻量级数据库，增强了数据存储和数据检索能力。

5. 获取地理位置信息

越来越多的Web应用需要获取地理位置信息，例如在显示地图时标注自己的当前位置。在HTML4中，获取用户的地理位置信息需要借助第三方地址数据库或专业的开发包。HTML5新增了Geolocation API规范，可以通过浏览器获取用户的地理位置信息，这无疑为有相关需求的用户提供了很大方便。Geolocation API也可以应用于移动设备中的地理定位。

6. 提高页面响应的多线程

虽然Visual C++、Visual C#和Java等高级语言都支持多线程，但传统的Web应用一直都是单线程的，只有一个任务完成后才能开始下一个任务，因此效率不高。HTML5新增了Web Workers来实现多线程功能。通过Web Workers，将耗时较长的处理交给后台线程，降低Web服务的响应时间，有利于增强用户体验。

7. 方便用户处理文件和访问文件系统的文件API

HTML5的文件API包括FileReader API和File SystemAPI。通过FileReader API，用户从Web页面上访问本地文件系统或服务器端的文件系统的相关处理将会变得十分简单。通过File SystemAPI，应用程序将得到一个受浏览器保护的文件系统，文件系统中的数据可以永久保存在客户端的计算机中。

除了上面介绍的HTML5的特性之外，HTML5还有管理浏览器历史记录的History API。HTML5可以通过脚本语言在浏览器历史记录中添加项目，以及在不刷新页面的前提下显式地改变浏览器地址栏中的URL地址；而HTML5的拖放功能可以使用mousedown、mousemove、mouseup等方法来实现拖放操作。

1.4 HTML5的开发环境

1.4.1 HTML5的开发工具简介

HTML文档编辑工具，如记事本、Nodepad++、EditPlus等文本编辑器，一般用于简单的网页或应用程序开发；Dreamweaver是可视化的网站开发工具，它面向专业和非专业的网页设计人员；集成开发环境WebStorm、IntelliJ IDEA、Eclipse等，提供了对HTML5、CSS3、JavaScript的支持，能显著提高开发效率。

1. HTML文档编辑工具Nodepad++

Nodepad++是一款绿色开源软件，作为文本编辑器，拥有撤销与重做、英文拼字检查、自动换行、列数标记、搜索替换、多文档编辑、全屏幕浏览功能。此外，它还支持大部分正则表达式、代码补齐、宏录制等功能。

Nodepad++支持语法颜色和HTML标记，同时支持C、C++、Java等语言。Nodepad++作为网页制作工具，可直接选择在不同的浏览器中打开查看，以方便网页调试。

2. 可视化网页开发软件Dreamweaver

Dreamweaver是集网页制作和网站管理于一身的专业的网页编辑与网站开发工具。Dreamweaver集成了网页布局工具、应用程序开发工具和代码编辑工具等，提供了简洁高效的设计视图、代码视图和拆分视图，不同层次的开发人员和设计人员能够快速创建标准的网页、网站和应用程序。

目前，Dreamweaver的常用版本是Adobe Dreamweaver CS6，集成了对CMS的支持功能、对CSS的校验以及对PHP的支持，内置了WebKit引擎，可以模仿Safari、Chrome浏览器预览网页效果，同时可以使用不同的浏览器检查网页布局效果。但Dreamweaver CS6对HTML5和CSS3新增元素的支持还有待提高。

3. 集成开发环境WebStorm和IntelliJ IDEA

WebStorm和IntelliJ IDEA都是jetbrains公司的产品，是目前应用广泛的HTML5编辑器，也是智能的JavaScript IDE，适用于Web前端开发。这两款软件整合了开发过程中众多的实用功能，在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、创新的GUI设计等代码编辑调试方面的功能都极其出色。

WebStorm在Web前端开发方面特色突出，典型的特点包括：智能的代码补全包含Jquery、Dojo、Prototype、Mootools and Bindows等所有流行的库；在html中书写JavaScript的代码提示功能；代码检查和快速修复功能，可以快速找到代码中的错误并给出修改建议；代码折叠及快速预览功能等。

1-3 HTML5开发前准备

1.4.2 WebStorm集成开发环境

WebStorm被称为“Web前端开发神器”“最强大的HTML5编辑器”，本书HTML5新增的API或者有大量JavaScript代码的章节多使用WebStorm开发环境。

1. 软件下载和安装

软件可以到jetbrains的官网上http://www.jetbrains.com/webstorm/download下载，根据操作系统平台选择Windows版本、Linux版本或OS X版本。下载的软件默认有30天的试用期，之后需要注册才能使用。

当前经常使用的软件版本是WebStorm11.0.3，安装文件名WebStorm-11.0.3.exe，下载后双击安装即可。

2. 建立项目和文件

使用WebStorm开发Web应用，第一步是创建项目，默认的项目类型是“空项目”，也可以根据需求选择创建的项目类型；第二步是创建文件，选择创建HTML文件、CSS文件或JavaScript文件等。图1-2是建立了项目和文件的编辑窗口。

图1-2 WebStorm工作窗口

1.4.3 使用XAMPP搭建服务器环境

在Webstorm环境中，默认情况下，用户建立的html文件（在项目中）可以直接在本地运行，Webstorm会开启64432端口来启动内置服务器，这样用户即使不配置复杂的服务器环境，也可以简单测试一些需要在服务器中运行的页面了。但使用Webstorm开发的Web应用，如果涉及使用AJAX技术、跨域访问或用PHP处理表单提交的数据，这样就需要搭建独立的服务器环境。

用户浏览网站上的网页实际上是从Web服务器读取一些内容，然后显示在本地计算机上。因此，要使网站能被访问就必须把网站的所有文件放到Web服务器上。除了Web服务器，在Web应用中，如果访问外部数据库中的数据，还需要数据库服务器；处理Web的请求，有时也需要脚本服务器。

所以，在基于HTML5的Web应用中，搭建服务器是运行Web应用的前提。搭建服务器有很多种方法，开源的网络服务器软件XAMPP，具有Linux和Windows版本，集成了Apache、MySQL、PHP、Perl等软件，适用于搭建多种服务器环境，本节介绍基于XAMPP的Apache服务器的搭建过程。

1. XAMPP下载和安装

XAMPP可以在中文官网http://www.xampp.cc下载。如果在Windows环境下安装XAMPP，下载XAMPP的win32版本即可。下面以1.8.3版本（xampp-win32-1.8.3-0-VC11installer.exe）为例，简要介绍主要的安装步骤。

双击安装软件包后，第一步选择安装的软件部件，如图1-3所示；第二步设置安装目录（默认为C:\xmapp），如图1-4所示；继续单击“Next”按钮，直至完成安装。

图1-3 选择安装软件部件

图1-4 设置安装目录

2. 启动XAMPP的Apache服务器

（1）安装好XAMPP以后，在“开始”菜单可以启动XAMPP控制面板。如果在开始菜单中找不到启动程序，通过到安装文件夹找到启动文件也可以启动XAMPP。

（2）在XAMPP控制面板中，单击软件模块后面对应的“Start”按钮，就可以启动相应的服务器程序，图1-5是启动了Apache服务的控制面板界面。

图1-5 启动Apache服务的控制面板

3. 测试是否成功开启XAMPP服务

如果XAMPP安装成功，并且开启了Apache服务，可以测试Apache服务器是否开始工作。打开网页浏览器，在地址栏中输入http://localhost。如果XAMPP安装成功的话，应该会有页面打开，如图1-6所示。

图1-6 Apache服务器启动界面

站点的默认文件夹是c:\xampp\htdocs文件夹，只要将用户的站点文件夹复制到该文件夹内即可通过Apache服务器来访问网站。如果将站点文件夹改到其他位置，例如d:\www文件夹，可以修改xampp\apache\conf\httpd.conf文件。该文件打开后，只要找到DocumentRoot的属性“c:/xampp/htdocs”，将DocumentRoot值修改为“d:\www”就可以了。

1.4.4 支持HTML5的浏览器和帮助文档

1. 支持HTML5的浏览器

绝大多数主流浏览器的新版本都支持HTML5，Chrome浏览器和Firefox浏览器对HTML5有更好的支持。一些网站，如http://html5test.com/、http://chrome.360.cn/test/html5/都对浏览器对HTML5的支持程度进行了测试。本书示例的测试环境是Chrome 62 on Windows 10，少数功能在Firefox或IE浏览器下测试。

2. 帮助文档

Web前端开发涉及HTML5、CSS3、JavaScript、jQuery等诸多内容，而且很多内容还在不断更新变化，学习过程中涉及的标记、属性、方法、事件需要通过查阅文档来学习。

图1-7是W3school的Canvas API在线手册界面，图1-8是Mozilla的SVG API在线学习界面。

图1-7 W3school的canvas在线手册

图1-8 Mozilla的SVG示例

作为Web前端开发，需要选择合适的开发工具和浏览器，配置好服务器，并能正确利用帮助文档，这样，学习和开发将达到事半功倍的效果。

思考与练习

1. 简答题

（1）在Web前端开发方面，HTML5与HTML4比较，主要解决哪几方面的问题？

（2）HTML5新增的全局属性有哪几个？描述其主要功能。

（3）HTML5是下一代Web语言的开发框架，典型特性有哪些？

（4）HTML5文档结构较HTML4之前的文档结构有哪些变化？

2. 操作题

（1）启动Dreamweaver CS5软件，建立一个文档类型为HTML5的网页，输入若干文字信息。

（2）从jetbrains的官网上下载WebStorm软件的Windows版本，安装后建立项目和一个HTML5文件，并在浏览器中显示该页面。

（3）下载并安装开源网络服务器软件XAMPP，启动其Apache服务器，并在其中运行一个Web页面。

（4）到网上查找并学习正则表达式有关内容，了解正则表达式的概念和应用。