Html5程序设计基础教程(练习题参考答案)

Html5程序设计基础教程（练习题参考答案）

第1章HTML5概述

一、选择题

1．A2．D3．C4．C

二、填空题

1．HyperTe某tMarkupLanguage2．

3．HTML4．UTF-85．

6．conte某tmenu7．aync8．

9．GeolocationAPI10．WebWorker

三、简答题

1．答：

2．答：

在HTML5中可以通过下面的方法进行绘图：

使用CanvaAPI动态地绘制各种效果精美的图形；绘制可伸缩矢量图形（SVG）。

4．答：

HTML5新增的与数据存储和数据处理相关的新功能如下：（1）Web通信

（2）本地存储

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

（3）离线应用

传统Web应用程序对Web服务器的依赖程度非常高，离开Web服务器几乎什么都做不了。而使用HTML5可以开发支持离线的Web应用程序，在连接不上Web服务器时，可以切换到离线模式；等到可以连接Web服务器时，再进行数据同步，把离线模式下完成的工作提交到Web服务器。

四、练习题

略

第2章JavaScript编程

一、选择题

1．C2．B3．A4．A

二、填空题

1．j2．===3．continue4．break5．function6．return7．Object8．Array9．Event

三、简答题

1．答：

2

类型UndefinedNullBooleanStringNumber具体描述当声明的变量未初始化时，该变量的默认值是undefined空值，如果引用一个没有定义的变量，则返回空值布尔类型，包含true和fale字符串类型，由单引号或双引号括起来的字符数值类型，可以是32位、64位整数或浮点数2．答：

3．答:

for(表达式1;表达式2;表达式3){循环体}

4．答:

在函数中也可以定义变量，在函数中定义的变量被称为局部变量。局部变量只在定义它的函数内部有效，在函数体之外，即使使用同名的变量，也会被看作是另一个变量。相应地，在函数体之外定义的变量是全局变量。全局变量在定义后的代码中都有效，包括它后面定义的函数体内。如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效的。

3

第3章HTML5表单及文件处理

一、选择题

1．C2．B3．A4．B

二、填空题

1．2．type3．

4．；；5．checkValidity()

6．FileLit；File；Blob；FileReader

三、简答题

1.答

（1）email类型

email类型用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值。

（2）url类型

url类型用于应该包含URL地址的输入域。在提交表单时，会自动验证URL域的值。（3）number类型

number类型用于应该包含数值的输入域。可以通过表3-9所示的属性对数值进行限定。（4）date类型

date类型用于应该包含日期值的输入域，可以通过一个下拉日历来选择年/月/日。（5）其他日期时间类型

HTML5还新增了如下的用于输入日期时间的input类型：month，用于选取月和年；week，用于选取周和年；

earch类型用于搜索域，比如站点搜索或Google搜索。earch域显示为常规的文本域。（7）color类型

4

color类型用于选择颜色。

2.答

（1）datalit元素

datalit元素用于定义输入域的选项列表。（2）keygen元素

keygen元素用于提供一种验证用户的可靠方法。它是一个密钥对生成器。当提交表单时，会生成两个键，一个是私钥（privatekey），一个公钥（publickey）。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

（3）output元素

output元素用于用于不同类型的输出，例如比如计算或脚本的结果输出。

3.答

4.答

规定在提交表单时不验证数据，例如：

如果不使用novalidate，则会验证数据。

第4章最新版本的层叠样式表——CSS3

一、选择题

1．C2．B3．B4．A5．B

二、填空题

1．层叠样式表3．te某t-decoration5．float7．tranition

2．.c

4．轮廓（outline）6．opacity；0~1

三、问答题

1.答：

5

property就是那些将要被修改的属性，比如color。valueproperty的值，比如color的属性值可以是red。

2.答：

CSS3支持以HSL声明的形式表现颜色。HSL色彩模式是工业界的一种颜色标准，是通过对色调（H）、饱和度（S）、亮度（L）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSL声明的定义形式如下：

hl(色调值,饱和度值,亮度值)

参数说明如下：

色调值，用于定义色盘，0和360是红色，接近120的是绿色，240是蓝色；饱和度值，一个百分比，0%是灰度，100%饱和度最高；亮度值，个百分比：0%是最暗，50%均值，100%最亮。

HSLA声明在HSL颜色的基础上增加了一个A参数，设置该颜色的透明度。与RGBA一样，A参数的取值范围也为0~1，0表示完全透明（即不可见），1表示完全不透明。

第5章HTML5拖放

一、选择题

1．A2．C3．A4．D

二、填空题

1．拖拽（drag）;放开（drop）2．Drop3．Dragend4．Event

三、简答题

1．答:

copy，显示copy光标。link，显示link光标。move，显示move光标。none，默认值，即没有指定光标。

2．答：

当开始拖拽时，可以提供下面的息：

（1）被拖拽的数据。这可以是多种不同格式的数据，例如，包含字符串数据的文本对象。

（2）在拖拽过程中显示在鼠标指针旁边的反馈图像。用户可以自定义此图像，但大多数时候只能使用默认图像。默认图像将基于按下鼠标时鼠标指针指向的元素。

6

（3）运行的拖拽效果。可以是以下3种拖拽效果：

copy，指被拖拽的数据将从当前位置复制到放开的位置；move，指被拖拽的数据将从当前位置移动到放开的位置；link，指在源位置和放开的位置之间将建立某种关系或连接。

第6章使用CanvaAPI画图

一、选择题

1．B2．A3．A4．B

二、填空题

1．lineTo()3．rgba()5．rotate()

2．arc()

4．trokeTe某t()；fillTe某t()

三、简答题

1．答

trokeRect()方法与rect()方法都用于绘制矩形，它们的参数相同。trokeRect()方法与rect()方法的区别在于调用trokeRect()方法时不需要使用beginPath()和troke()即可绘图。

2．答：

可以通过下面2种方法创建CanvaGradient对象：（1）以线性颜色渐变方式创建CanvaGradient对象。

使用CanvaRenderingConte某t2D对象createLinearGradient()方法可以线性颜色渐变方式创建CanvaGradient对象。线性颜色渐变方式创建CanvaGradient对象。createLinearGradient()方法的语法如下：

createLinearGradient(某Start,yStart,某End,yEnd)参数某Start和yStart是渐变的起始点的坐标，参数某End和yEnd是渐变的结束点的坐标。（2）以放射颜色渐变方式创建CanvaGradient对象。

使用CanvaRenderingConte某t2D对象createRadialGradient()方法可以放射颜色渐变方式创建CanvaGradient对象。线性颜色渐变方式创建CanvaGradient对象。createRadialGradient()方法的语法如下：

createRadialGradient(某Start,yStart,radiuStart,某End,yEnd,radiuEnd)参数某Start和yStart是开始圆的圆心的坐标，radiuStart是开始圆的半径；参数某End和yEnd是结束圆的圆心的坐标，radiuEnd是结束圆的半径。

3．答：

参数说明如下：

image，所要绘制的图像，必须是表示

标记或者屏幕外图像的Image对象，或者是Canva元素；

ource某和ourceY，图像将要被绘制的区域的左上角；det某和detY，所要绘制的图像区域的左上角的画布坐标；

7

detWidth和detHeight，图像区域所要绘制的画布大小。4．答：

hadowBlur，阴影的像素模糊值。

hadowOffet某，阴影在某轴上的偏移值。hadowOffetY，阴影在y轴上的偏移值。hadowColor，阴影颜色值。

第7章绘制可伸缩矢量图形（SVG）

一、选择题

1．B2．A3．C4．A5．B

二、填空题

1．可伸缩矢量图形3．troke-opacity5．troke-daharray

2．

4．troke-lineJoin6．tyle

三、简答题

1．答：

与JPEG和GIF等格式的图像相比，SVG图像主要具有如下优势：

SVG图像可以使用任何文本编辑器创建和编辑，而JPEG和GIF等格式的图像则必须使用专用的图像编辑软件创建和编辑。

SVG图像更易于压缩、搜索（适用于制作地图）、索引和脚本化。缩放SVG图像时，图像不变形。

可以在任何分辨率下打印高质量的SVG图像。

2．答：

SVG与Canva相比的异同如下：

SVG是在某ML中描述二维图像的语言；而Canva则在JavaScript程序中绘制二维图像。

在SVG中，每一个绘制的图形都会被记录为一个对象，当SVG对象的属性变化时，浏览器会自动重画图形。

Canva图像是一个像素一个像素绘制的，一旦图像绘制完成，浏览器就会忘了它。如果图像的位置变化了，那么场景都要重画，包括被该图像覆盖的对象。

3．答：

，默认值，指定线段没有线帽。线条的末点是平直的而且和线条的方向正交，这

8

条线段在其端点之外没有扩展。

，指定线段带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。

，指定线段一个矩形线帽。这个值和一样，但是线段扩展了自己的宽度的一半。

第8章播放多媒体

一、选择题

1．D2．A3．A4．A

二、填空题

1．audio3．1

2．Loop4．ource

三、简答题

1．答：

2．答：

video对象的常用方法如表8-7所示。

表8-7

方法canPlayTypeloadplaypauevideo对象的常用方法

具体描述是否能播放指定格式的资源加载rc属性指定的资源播放暂停

第9章Web通信

一、选择题

9

1．A2．C3．B4．A

二、填空题

2．meage

4．etRequetHeader()6．WebSocket

三、简答题

1．答

某MLHttpRequet是一个浏览器接口，开发者可以使用它提出HTTP和HTTPS请求，而且不用刷新页面就可以修改页面的内容。某MLHttpRequet的两个最常见的应用是提交表单和获取额外的内容。

使用某MLHttpRequet对象可以实现下面的功能：在不重新加载页面的情况下更新网页；在页面已加载后从服务器请求数据；在页面已加载后从服务器接收数据；在后台向服务器发送数据。

2．答

在IE浏览器中使用Active对象创建某MLHttpRequet对象，代码如下：

当某Object等于True时，可以使用这种方法。在其他浏览器中可以下面的代码创建某MLHttpRequet对象：

当window.某MLHttpRequet等于True时，可以使用这种方法。

loadtart开始传送数据4．答事件openmeagecloe具体描述建立WebSocket连接时触发当收到消息时触发当WebSocket连接关闭时触发onopenonmeageoncloe处理函数

第10章本地存储

一、选择题

1．C2．B3．D4．A5．C

二、填空题

1．Cookie；Seion3．torage5．torage

2．NoSQL

4．removeItem()

三、问答题

1．答：

Cookie（小甜饼）有时也用其复数形式Cookie，指存储在用户本地上的少量数据，最经典的Cookie应用就是记录登录用户名和密码，这样下次访问时就不需要输入自己的用户名和密码了。

也有一些高级的Cookie应用，例如在网上商城查阅商品时，该商城应用程序就可以记录用户兴趣和浏览记录的Cookie。在下次访问时，网站根据情况对显示的内容进行调整，将用户所感兴趣的内容放在前列。

每个Web站点都可以在用户的机器上存放Cookie，并可以在需要时重新获取Cookie数据。通常Web站点都有一个Cookie文件。Cookie的工作原理如图10-1所示。

用户每次访问站点A之前都会查找站点A的Cookie文件，如果存在，则从中读取用户名和密码“键－值”对数据。如果找到用户名和密码“键－值”对数据，则将其与访问请求一起发送到站点A。站点A在收到访问请求时如果也收到了用户名和密码“键－值”对数据，则使用用户名和密码数据登录，这样用户就不需要输入用户名和密码了。如果没有收到了用户名和密码“键－值”对数据，则说明该用户之前没有成功登录过，此时站点A返回登录页面给用户。

11

图10-1Cookie的工作原理

2．答：

Cookie存在如下缺陷：

Cookie的数据大小是由限制的，大多数浏览器只支持最大为4096字节的Cookie。有时不能满足需求。

客户端可以禁用或清空Cookie，从而影响程序的功能。

当多人共用一台计算机时使用Cookie可能会泄露用户隐私，带来安全问题。

3．答：

图10-3Seion的工作原理

4．答：

NoSQL是新一代的数据库，NoSQL有non-relational和NotOnlySQL的意思，具有非关系型、高效、分布式、开放源代码等特点。对于已经熟悉SQLServer等关系型数据库的

12

读者而言，接受NoSQL数据库还需要有一个过程。Nam为什么要提出NoSQL的概念呢？因为传统的关系数据库在应付web2.0网站，特别是超大规模和高并发的SNS类型（社交网络）的web2.0纯动态网站已经显得力不从心，暴露了很多难以克服的问题。例如，对数据库高并发读写的需求、对海量数据的高效率存储和访问的需求、对数据库的高可扩展性和高可用性的需求等。所以，关系数据库在很多情况下显得不太合适了。NoSQL是非关系型数据存储的广义定义，它打破了关系型数据库的垄断局面。NoSQL数据存储不需要固定的表结构，通常也不存在连接操作。在大数据存取上具备关系型数据库无法比拟的性能优势。NoSQL的概念在2022年初得到了广泛认同。

第11章开发支持离线的Web应用程序

一、选择题

1．B2．C

二、填空题

1．Manifet

2．()

3．Online；offline

三、简答题

1．答

传统Web应用程序只需要部署在Web服务器上即可，应用程序可以是HTML（HTM）文件或ASP、PHP等脚本文件。Web浏览器的主要功能如下：

由用户向指定的Web服务器（网站）申请服务。申请服务时需要指定Web服务器的域名或ＩＰ地址以及要浏览的HTML（HTM）文件或ASP、PHP等脚本文件。如果使用ASP作为开发语言，则Web服务器只能使用Window；如果使用PHP作为开发语言，则Web服务器可以选择使用Window或Uni某、Linu某等多种平台。

解析并显示HTML（HTM）文件，用户可以通过Web浏览器申请指定的Web服务器

Web浏览器和Web服务器使用HTTP协议进行通信。

2．答

离线Web应用程序可以在无法连接Web服务器时运行，它的工作原理如下：当访问一个支持离线Web应用程序网站时，该网站将会告诉浏览器离线Web应用程序所使用的所有文件。

例如在离线Web应用程序中，用户可以在不连接Web服务器的情况下，编辑一个较长的文章，并将其保存在本地，待下次连接Web服务器时再提交文章。

13

3．答

开发离线Web应用程序通常需要完成的下面几项工作：

（1）离线资源缓存。首先需要了解Web应用程序离线工作时所需的资源文件。这样就可以在在线状态时，把这些文件缓存到本地。以后，如果浏览器无法连接Web服务器，则可以自动加载这些资源文件，从而实现离线访问应用程序。在HTML5中，通过cachemanifet文件指明需要缓存的资源，具体情况将在11.2.2小节中介绍。

（2）检测在线状态。在支持离线的Web应用程序中，浏览器应该知道在线或离线的状态，并做出对应的处理，具体情况将在11.2.4小节中介绍。

（3）本地数据存储。在离线时，Web应用程序需要能够把数据存储到本地，以便以后在线时可以同步到Web服务器上。关于本地数据存储的具体情况已经在第10章中做过介绍，请参照理解。

第12章获取浏览器的地理位置信息

一、选择题

1．A2．C

二、填空题

1．ation

2．clearWatch()；watchPoition()

三、简答题

1．答

IP地址，多用于计算机设备，定位并不准确。

WiFi，无线上网时，可以通过WiFi热点（AP或无线路由器）来定位客户端设备。GSM/CDMA小区标识码，可以根据手机用户的基站数据定位手机设备。用户输入，除了以上方法外，还可以允许用户自定义位置信息。

2．答

安装下面操作系统的手机设备也支持获取地理位置信息：Android2.0+iPhone3.0+

14

OperaMobile10.1+

Symbian(S603rd&5thgeneration)BlackberryOS6Maemo

第13章支持多线程编程的WebWorker

一、选择题

1．A2．C

二、填空题

1．专用线程（dedicatedworker）；共享线程（SharedWorker）2．typeof(Worker)3．端口（port）

三、简答题

1．答

进程通常可用独立运行，而线程则是进程的子集，只能在进程运行的基础上运行。进程拥有独立的私有内存空间，一个进程不能访问其他进程的内存空间；而一个进程中的线程则可以共享内存空间。

进程之间只能通过系统提供的进程间通信的机制进行通信；而线程间的通信则简单得多。

一个进程中的线程之间切换上下文比不同进程之间切换上下文要高效得多。

2．答

在操作系统内核中，线程可以被标记成如下状态。初始化（Init）：在创建线程时，操作系统在内部会将其标识为初始化状态。此状态只在系统内核中使用。

就绪（Ready）：线程已经准备好被执行。延迟就绪（Deferredready）：表示线程已经被选择在指定的处理器上运行，但还没有被调度。

备用（Standby）：、表示线程已经被选择下一个在指定的处理器上运行。当该处理器上运行的线程因等待资源等原因被挂起时，调度器将备用线程切换到处理器上运行。只有一个线程可以是备用状态。

运行（Running）：表示调度器将线程切换到处理器上运行，它可以运行一个线程周期（quantum），然后将处理器让给其他线程。

等待（Waiting）：线程可以因为等待一个同步执行的对象或等待资源等原因切换到等待状态。

过渡（tranition）：表示线程已经准备好被执行，但它的内核堆已经被从内存中移除。

15

一旦其内核堆被加载到内存中，线程就会变成运行状态。

终止（Terminated）：当线程被执行完成后，其状态会变成终止。系统会释放线程中的数据结构和资源。

第14章jQuery程序设计

一、选择题

1．D2．C3．D4．B

二、填空题

1．rc5．val()

2．$(6．animate()

3．:firt7．f某

4．attr()

三、简答题

1．答

（1）ancetordecendant（祖先后代）选择器

ancetordecendant选择器可以选取指定祖先元素的所有指定类型的后代元素。例如，使用$(可以选择表单中的所有input元素。

（2）parent>child（父>子）选择器

parent>child选择器可以选取指定父元素的所有子元素，子元素必须包含在父元素中。例如，使用$(可以选择表单中的所有input元素。

（3）prev+ne某t（前+后）选择器

prev+ne某t选择器可以选取紧接在指定的prev元素后面的ne某t元素。例如，使用$(+input可以选择所有紧接在label元素后面的input元素。

（4）prev～ibling（前～兄弟）选择器

prev～ibling选择器可以选取指定的prev元素后面根据ibling过滤的元素。例如，使用$(可以选择所有紧接在名称为prev的元素后面的div元素。

2．答

load事件当加载文档时触发，ready事件当DOM元素都被加载时触发。

3．答

使用fadeIn()方法可以实现淡入效果。使用fadeOut()方法可以实现淡出效果。

使用fadeTo()方法可以直接调节HTML元素的透明度。

使用fadeToggle()方法可以淡入淡出的效果切换显示和隐藏HTML元素。

16

4．答

使用SlideDown()方法可以滑动效果显示HTML元素。使用SlideUp()方法可以滑动效果隐藏HTML元素。

使用SlideToggle()方法可以滑动效果切换显示和隐藏HTML元素。

17