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

第1章HTML5概述

、选择题

1.A2 D3 .C4 .C

、填空题

1. HyperText Markup Lan

2. g<uaimgge>

3. HTML

4. UTF-8

5. <me nu>

6. con textme nu

7. async

& <detai ls>

9. Geolocatio n API

10.Web Workers

二、简答题

1•答vsection标签用于定义文档中的区段。

header标签用于定义文档的页眉介绍信息 。

footer标签用于定义区段section或文档的页脚。通常该元素包含作者的姓名、 文档的创作日期或者联系方式等信息。

nav标签用于定义导航链接。

article标签用于定义文章或网页中的主要内容。

aside标签用于定义主要内容之外的其他内容。

figure标签用于定义独立的流内容图像、 图表、照片、代码等等 。

2•答

mark标签用于定义带有记号的文本。

time标签用于定义公历的时间24小时制或日期时间和时区。

meter标签用于定义度量衡。

progress标签用于定义定义一个进度条。

3•答:

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

使用Canvas API动态地绘制各种效果精美的图形

绘制可伸缩矢量图形SVG 。

4•答:

HTML5新增的与数据存储和数据处理相关的新功能如下

(1) Web通信

在HTML4中 出于安全考虑一般不允许一个浏览器的不同框架、不同标签页、不同窗口之间的应用程序互相通信 以防止恶意攻击。如果要实现跨域通信只能通过 Web服务器作为中介。但在桌面应用中经常需要进行跨通信。 HTML5提供了这种跨域通信的消息机制。

(2) 本地存储

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

(3) 离线应用

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

四、练习题

略

第2章JavaScript编程

一、 选择题

1 . C2 .B3 .A4 .A

二、 填空题

1 . js

2===

3. conti nue

4. break

5. function

6. return

7. Object

8. Array

9. Eve nt

三、 简答题

1 .答

2•答:

3•答:fo r 表达式1;表达式2;表达式3 {

循环体

}

4•答:

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

第3章HTML5表单及文件处理

、选择题

1 . C2 .B3

二、 填空题

1 . <fo r m></fo r m>

2. type

3. <textarea>

4. "submit"; "reset"; "button"

5. checkVal idity  

6. Fi leList ;Fi le;Blob;Fi leReader

三、 简答题

1 .答

1  emai l类型emai l类型用于应该包含 e-mai l地址的输入域。在提交表单时会自动验证 emai l域的值。

2 url类型url类型用于应该包含URL地址的输入域。在提交表单时会自动验证 URL域的值。3 number类型number类型用于应该包含数值的输入域。可以通过表 3-9所示的属性对数值进行限定。4 date类型date类型用于应该包含日期值的输入域可以通过一个下拉日历来选择年 /月/日。5其他日期时间类型

HTML 5还新增了如下的用于输入日期时间的 in put类型month用于选取月和年week用于选取周和年time用于选取时间小时和分钟 datetime用于选取时间、 日、月、年 UTC时间 datetime-local 用于选取时间、 日、月、年本地时间 。

6 search类型search类型用于搜索域 比如站点搜索或Google搜索。 search域显示为常规的文本域。7 color类型

color类型用于选择颜色。

2.答

(1) datal ist元素datal ist元素用于定义输入域的选项列表。

(2) keygen元素keyge n元素用于提供一种验证用户的可靠方法。 它是一个密钥对生成器。当提交表单时会生成两个键一个是私钥(private key)一个公钥(publ ic key)。私钥存储于客户端公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

(3) outp ut元素outp ut元素用于用于不同类型的输出例如比如计算或脚本的结果输出。

3. 答

规定表单中的元素是否具有自动完成功能。 所谓自动完成功能就是表单会记忆用户在表单元素中输入数据的历史记录。下次输入时会根据用户输入的字头提示匹配的历史数据 帮助用户完成输入。 autocomplete="on"表示启用自动完成功能 autocomplete="off"表示停用自动完成功能。例如

<form action="demo_form.asp"method="get"autocomplete="on">

4. 答

规定在提交表单时不验证数据例如

<form action="demo_form.asp"method="get" novalidate>如果不使用noval idate则会验证数据。第4章最新版本的层叠样式表 CSS3

、选择题

1 . C2 .B3 .B4 .A5 .B

、填空题

1•层叠样式表 2. .css

3. text-decoration 4.轮廓outl ine

5. float 6. opacity;0~1

7. transition

三、 问答题

1 . 答selector选择器。有3种选择器第一种是HTML的标签 比如p、 body、 a等第二种是class;第三种是ID。 具体使用情况将在后面介绍。property就是那些将要被修改的属性 比如color。 value property的值 比如color的属性值可

以是red。

2. 答

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

参数说明如下

色调值用于定义色盘 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. Drop

3. Dragend

4. Eve nt

三、 简答题

1 . 答copy显示copy光标。 l ink显示l ink光标。 move,显示move光标。 none,默认值,即没有指定光标。

2.答

当开始拖拽时可以提供下面的息

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

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

(3)运行的拖拽效果。可以是以下3种拖拽效果 copy指被拖拽的数据将从当前位置复制到放开

的位置 move,指被拖拽的数据将从当前位置移动到放开的位置 l ink指在源位置和放开的位置

之间将建立某种关系或连接。

、选择题

1.B2 .A3 .A4 .B

第6章使用Canvas API画图

、填空题

1. l i neTo() 2. arc()4.strokeText();fi l lText()

3. rgba()

5. rotate()

二、简答题

1•答strokeRect()方法与rect()方法都用于绘制矩形 它们的参数相同。 strokeRect()方法与rect()方法的区别在于调用 strokeRect()方法时不需要使用 beginPath()和stroke()即可绘图。

2•答

可以通过下面2种方法创建CanvasGradient对象

(1) 以线性颜色渐变方式创建CanvasGradient对象。

使用CanvasRenderingContext2D对象createLinearGradient()方法可以线性颜色渐变方式创建CanvasGradient对象。线性颜色渐变方式创建|CanvasGradient对象。 createLinearGradient()方法的语法如下

参数xStart和yStart是渐变的起始点的坐标 参数xEnd和yEnd是渐变的结束点的坐标。

(2) 以放射颜色渐变方式创建 CanvasGradient对象。

使用CanvasRenderingContext2D对象createRadialGradient()方法可以放射颜色渐变方式创建CanvasGradient对象。线性颜色渐变方式创建 CanvasGradient对象。 createRadialGradient()方法的语法如下

参数xStart和yStart是开始圆的圆心的坐标 radiusStart是开始圆的半径 参数xEnd和yEnd是结束圆的圆心的坐标 radiusEnd是结束圆的半径。

3•答:

参数说明如下image,所要绘制的图像必须是表示 <img>标记或者屏幕外图像的 Image对象或者是Canvas元素sourceX和sourceY 图像将要被绘制的区域的左上角destX和destY所要绘制的图像区域的左上角的画布坐标

destWidth和destHeight 图像区域所要绘制的画布大小。 4•答:shadowBlur 阴影的像素模糊值。

s had owOffsetX 阴影在x轴上的偏移值。

shad owOffsetY 阴影在y轴上的偏移值。 shadowColor 阴影颜色值。

第7章绘制可伸缩矢量图形SVG

一、选择题

1.B2 •A3 •C4 •A5 •B

、填空题

1 .可伸缩矢量图形 2. <rect>

简答题

1•答

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

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

SVG图像更易于压缩、搜索适用于制作地图 、索引和脚本化。

缩放SVG图像时 图像不变形。 可以在任何分辨率下打印高质量的SVG图像。

2•答

SVG与Canvas相比的异同如下

SVG是在XML中描述二维图像的语言而Canvas则在JavaScript程序中绘制二维图像。

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

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

3•答:

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

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

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

'k'k'k

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

第8章播放多媒体

一、 选择题

1.D2 .A3 .A4 .A

二、 填空题

1.audio 2.Loop

3. 1 4.source

三、 简答题

1•答

播放背景音乐时通常不需要显示播放控件 因此在定义 audio标签时可以将controls属性设置为false 或不使用conttols属性 。播放背景音乐时需要自动、循环播放 因此在定义aud io标签时可以将autoplay属性和loop属性设置为true。

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

表8-7 video对象的常用方法

第9章Web通信

、选择题

-k'k'k