Html5程序设计基础教程练习题参考答案.docx
- 文档编号:29224574
- 上传时间:2023-07-21
- 格式:DOCX
- 页数:23
- 大小:145.05KB
Html5程序设计基础教程练习题参考答案.docx
《Html5程序设计基础教程练习题参考答案.docx》由会员分享,可在线阅读,更多相关《Html5程序设计基础教程练习题参考答案.docx(23页珍藏版)》请在冰豆网上搜索。
Html5程序设计基础教程练习题参考答案
第1章HTML5概述
一、选择题
1.A2.D3.C4.C
二、填空题
1.HyperTextMarkupLanguage
2.
3.HTML
4.UTF-8
5.
2.type
3.
4."submit";"reset";"button"
5.checkValidity()
6.FileList;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,用于选取周和年;
time,用于选取时间(小时和分钟);
datetime,用于选取时间、日、月、年(UTC时间);
datetime-local,用于选取时间、日、月、年(本地时间)。
(6)search类型
search类型用于搜索域,比如站点搜索或Google搜索。
search域显示为常规的文本域。
(7)color类型
color类型用于选择颜色。
2.答
(1)datalist元素
datalist元素用于定义输入域的选项列表。
(2)keygen元素
keygen元素用于提供一种验证用户的可靠方法。
它是一个密钥对生成器。
当提交表单时,会生成两个键,一个是私钥(privatekey),一个公钥(publickey)。
私钥存储于客户端,公钥则被发送到服务器。
公钥可用于之后验证用户的客户端证书。
(3)output元素
output元素用于用于不同类型的输出,例如比如计算或脚本的结果输出。
3.答
规定表单中的元素是否具有自动完成功能。
所谓自动完成功能就是表单会记忆用户在表单元素中输入数据的历史记录。
下次输入时会根据用户输入的字头提示匹配的历史数据,帮助用户完成输入。
autocomplete="on"表示启用自动完成功能;autocomplete="off"表示停用自动完成功能。
例如:
4.答
规定在提交表单时不验证数据,例如:
如果不使用novalidate,则会验证数据。
第4章最新版本的层叠样式表——CSS3
一、选择题
1.C2.B3.B4.A5.B
二、填空题
1.层叠样式表2..css
3.text-decoration4.轮廓(outline)
5.float6.opacity;0~1
7.transition
三、问答题
1.答:
selector选择器。
有3种选择器,第一种是HTML的标签,比如p、body、a等;第二种是class;第三种是ID。
,具体使用情况将在后面介绍。
property就是那些将要被修改的属性,比如color。
valueproperty的值,比如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.Event
三、简答题
1.答:
copy,显示copy光标。
link,显示link光标。
move,显示move光标。
none,默认值,即没有指定光标。
2.答:
当开始拖拽时,可以提供下面的息:
(1)被拖拽的数据。
这可以是多种不同格式的数据,例如,包含字符串数据的文本对象。
(2)在拖拽过程中显示在鼠标指针旁边的反馈图像。
用户可以自定义此图像,但大多数时候只能使用默认图像。
默认图像将基于按下鼠标时鼠标指针指向的元素。
(3)运行的拖拽效果。
可以是以下3种拖拽效果:
copy,指被拖拽的数据将从当前位置复制到放开的位置;
move,指被拖拽的数据将从当前位置移动到放开的位置;
link,指在源位置和放开的位置之间将建立某种关系或连接。
第6章使用CanvasAPI画图
一、选择题
1.B2.A3.A4.B
二、填空题
1.lineTo()2.arc()
3.rgba()4.strokeText();fillText()
5.rotate()
三、简答题
1.答
strokeRect()方法与rect()方法都用于绘制矩形,它们的参数相同。
strokeRect()方法与rect()方法的区别在于调用strokeRect()方法时不需要使用beginPath()和stroke()即可绘图。
2.答:
可以通过下面2种方法创建CanvasGradient对象:
(1)以线性颜色渐变方式创建CanvasGradient对象。
使用CanvasRenderingContext2D对象createLinearGradient()方法可以线性颜色渐变方式创建CanvasGradient对象。
线性颜色渐变方式创建CanvasGradient对象。
createLinearGradient()方法的语法如下:
createLinearGradient(xStart,yStart,xEnd,yEnd)
参数xStart和yStart是渐变的起始点的坐标,参数xEnd和yEnd是渐变的结束点的坐标。
(2)以放射颜色渐变方式创建CanvasGradient对象。
使用CanvasRenderingContext2D对象createRadialGradient()方法可以放射颜色渐变方式创建CanvasGradient对象。
线性颜色渐变方式创建CanvasGradient对象。
createRadialGradient()方法的语法如下:
createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
参数xStart和yStart是开始圆的圆心的坐标,radiusStart是开始圆的半径;参数xEnd和yEnd是结束圆的圆心的坐标,radiusEnd是结束圆的半径。
3.答:
参数说明如下:
image,所要绘制的图像,必须是表示标记或者屏幕外图像的Image对象,或者是Canvas元素;
sourceX和sourceY,图像将要被绘制的区域的左上角;
destX和destY,所要绘制的图像区域的左上角的画布坐标;
destWidth和destHeight,图像区域所要绘制的画布大小。
4.答:
shadowBlur,阴影的像素模糊值。
shadowOffsetX,阴影在x轴上的偏移值。
shadowOffsetY,阴影在y轴上的偏移值。
shadowColor,阴影颜色值。
第7章绘制可伸缩矢量图形(SVG)
一、选择题
1.B2.A3.C4.A5.B
二、填空题
1.可伸缩矢量图形2.
3.stroke-opacity4.stroke-lineJoin
5.stroke-dasharray6.style
三、简答题
1.答:
与JPEG和GIF等格式的图像相比,SVG图像主要具有如下优势:
SVG图像可以使用任何文本编辑器创建和编辑,而JPEG和GIF等格式的图像则必须使用专用的图像编辑软件创建和编辑。
SVG图像更易于压缩、搜索(适用于制作地图)、索引和脚本化。
缩放SVG图像时,图像不变形。
可以在任何分辨率下打印高质量的SVG图像。
2.答:
SVG与Canvas相比的异同如下:
SVG是在XML中描述二维图像的语言;而Canvas则在JavaScript程序中绘制二维图像。
在SVG中,每一个绘制的图形都会被记录为一个对象,当SVG对象的属性变化时,浏览器会自动重画图形。
Canvas图像是一个像素一个像素绘制的,一旦图像绘制完成,浏览器就会忘了它。
如果图像的位置变化了,那么场景都要重画,包括被该图像覆盖的对象。
3.答:
"butt",默认值,指定线段没有线帽。
线条的末点是平直的而且和线条的方向正交,这条线段在其端点之外没有扩展。
"round",指定线段带有一个半圆形的线帽,半圆的直径等于线段的宽度,并且线段在端点之外扩展了线段宽度的一半。
"square",指定线段一个矩形线帽。
这个值和"butt"一样,但是线段扩展了自己的宽度的一半。
第8章播放多媒体
一、选择题
1.D2.A3.A4.A
二、填空题
1.audio2.Loop
3.14.source
三、简答题
1.答:
播放背景音乐时通常不需要显示播放控件,因此在定义audio标签时可以将controls属性设置为false(或不使用conttols属性)。
播放背景音乐时需要自动、循环播放,因此在定义audio标签时可以将autoplay属性和loop属性设置为true。
2.答:
video对象的常用方法如表8-7所示。
表8-7video对象的常用方法
方法
具体描述
canPlayType
是否能播放指定格式的资源
load
加载src属性指定的资源
play
播放
pause
暂停
第9章Web通信
一、选择题
1.A2.C3.B4.A
二、填空题
1.window.postMessage2.message
3.ReadyState4.setRequestHeader()
5.timeout6.WebSocket
三、简答题
1.答
XMLHttpRequest是一个浏览器接口,开发者可以使用它提出HTTP和HTTPS请求,而且不用刷新页面就可以修改页面的内容。
XMLHttpRequest的两个最常见的应用是提交表单和获取额外的内容。
使用XMLHttpRequest对象可以实现下面的功能:
在不重新加载页面的情况下更新网页;
在页面已加载后从服务器请求数据;
在页面已加载后从服务器接收数据;
在后台向服务器发送数据。
2.答
在IE浏览器中使用Active对象创建XMLHttpRequest对象,代码如下:
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
当window.ActiveXObject等于True时,可以使用这种方法。
在其他浏览器中可以下面的代码创建XMLHttpRequest对象:
xxmlhttp=newXMLHttpRequest();
当window.XMLHttpRequest等于True时,可以使用这种方法。
3.答
事件
具体说明
progress
在传送数据的过程中会定期触发,用于返回传送数据的进度信息。
在progress事件的处理函数中可以使用该事件的属性计算并显示传送数据的百分比。
progress事件的属性如下:
lengthComputable,布尔值,表明是否可以计算传送数据的长度。
如果lengthComputable等于True,则可以计算传送数据的百分比;否则,就不用计算了
loaded,已经传送的数据量
total,需要传送的总数据量
load
传送数据成功完成
abort
传送数据被中断
error
传送过程中出现错误
loadstart
开始传送数据
4.答
事件
具体描述
处理函数
open
建立WebSocket连接时触发
onopen
message
当收到消息时触发
onmessage
close
当WebSocket连接关闭时触发
onclose
第10章本地存储
一、选择题
1.C2.B3.D4.A5.C
二、填空题
1.Cookie;Session2.NoSQL
3.window.localStorage4.removeItem()
5.storage
三、问答题
1.答:
Cookie(小甜饼)有时也用其复数形式Cookies,指存储在用户本地上的少量数据,最经典的Cookie应用就是记录登录用户名和密码,这样下次访问时就不需要输入自己的用户名和密码了。
也有一些高级的Cookie应用,例如在网上商城查阅商品时,该商城应用程序就可以记录用户兴趣和浏览记录的Cookies。
在下次访问时,网站根据情况对显示的内容进行调整,将用户所感兴趣的内容放在前列。
每个Web站点都可以在用户的机器上存放Cookie,并可以在需要时重新获取Cookie数据。
通常Web站点都有一个Cookie文件。
Cookie的工作原理如图10-1所示。
用户每次访问站点A之前都会查找站点A的Cookie文件,如果存在,则从中读取用户名和密码“键-值”对数据。
如果找到用户名和密码“键-值”对数据,则将其与访问请求一起发送到站点A。
站点A在收到访问请求时如果也收到了用户名和密码“键-值”对数据,则使用用户名和密码数据登录,这样用户就不需要输入用户名和密码了。
如果没有收到了用户名和密码“键-值”对数据,则说明该用户之前没有成功登录过,此时站点A返回登录页面给用户。
图10-1Cookie的工作原理
2.答:
Cookie存在如下缺陷:
Cookie的数据大小是由限制的,大多数浏览器只支持最大为4096字节的Cookie。
有时不能满足需求。
客户端可以禁用或清空Cookie,从而影响程序的功能。
当多人共用一台计算机时使用Cookie可能会泄露用户隐私,带来安全问题。
3.答:
Session可以保持网站服务器和网站访问者的交流,访问者可以将数据保存在网站服务器中。
为了区分不同的访问者,网站服务器为每个网站访问者都分配一个会话编号SID,一个访问者在Session中保存的所有数据都与他的SID相关联。
在访问者打开的所有页面中,都可以通过SID设置和获取Session数据,因此通过Session可以实现个页面间的数据共享。
例如,用户在任意一个页面登录后,都可以将登录标记和登录用户名保存在Session变量中。
这样在其他页面中就可以获知用户已经登录了,从而避免重复登录。
Session的工作原理如图10-2所示。
图10-3Session的工作原理
4.答:
NoSQL是新一代的数据库,NoSQL有non-relational和NotOnlySQL的意思,具有非关系型、高效、分布式、开放源代码等特点。
对于已经熟悉SQLServer等关系型数据库的读者而言,接受NoSQL数据库还需要有一个过程。
Nam为什么要提出NoSQL的概念呢?
因为传统的关系数据库在应付web2.0网站,特别是超大规模和高并发的SNS类型(社交网络)的web2.0纯动态网站已经显得力不从心,暴露了很多难以克服的问题。
例如,对数据库高并发读写的需求、对海量数据的高效率存储和访问的需求、对数据库的高可扩展性和高可用性的需求等。
所以,关系数据库在很多情况下显得不太合适了。
NoSQL是非关系型数据存储的广义定义,它打破了关系型数据库的垄断局面。
NoSQL数据存储不需要固定的表结构,通常也不存在连接操作。
在大数据存取上具备关系型数据库无法比拟的性能优势。
NoSQL的概念在2009年初得到了广泛认同。
第11章开发支持离线的Web应用程序
一、选择题
1.B2.C
二、填空题
1.Manifest2.window.applicationCache.update()3.Online;offline
三、简答题
1.答
传统Web应用程序只需要部署在Web服务器上即可,应用程序可以是HTML(HTM)文件或ASP、PHP等脚本文件。
Web浏览器的主要功能如下:
由用户向指定的Web服务器(网站)申请服务。
申请服务时需要指定Web服务器的域名或IP地址以及要浏览的HTML(HTM)文件或ASP、PHP等脚本文件。
如果使用ASP作为开发语言,则Web服务器只能使用Windows;如果使用PHP作为开发语言,则Web服务器可以选择使用Windows或Unix、Linux等多种平台。
从Web服务器下载申请的HTML(HTM)文件。
解析并显示HTML(HTM)文件,用户可以通过Web浏览器申请指定的Web服务器
Web浏览器和Web服务器使用HTTP协议进行通信。
2.答
离线Web应用程序可以在无法连接Web服务器时运行,它的工作原理如下:
当访问一个支持离线Web应用程序网站时,该网站将会告诉浏览器离线Web应用程序所使用的所有文件。
浏览器将Web应用程序所使用的所有文件下载到本地。
当支持离线Web应用程序的网站不在线时,浏览器就会访问下载到本地文件,从而运行离线Web应用程序。
例如在离线Web应用程序中,用户可以在不连接Web服务器的情况下,编辑一个较长的文章,并将其保存在本地,待下次连接Web服务器时再提交文章。
3.答
开发离线Web应用程序通常需要完成的下面几项工作:
(1)离线资源缓存。
首先需要了解Web应用程序离线工作时所需的资源文件。
这样就可以在在线状态时,把这些文件缓存到本地。
以后,如果浏览器无法连接Web服务器,则可以自动加载这些资源文件,从而实现离线访问应用程序。
在HTML5中,通过cachemanifest文件指明需要缓存的资源,具体情况将在11.2.2小节中介绍。
(2)检测在线状态。
在支持离线的Web应用程序中,浏览器应该知道在线或离线的状态,并做出对应的处理,具体情况将在11.2.4小节中介绍。
(3)本地数据存储。
在离线时,Web应用程序需要能够把数据存储到本地,以便以后在线时可以同步到Web服务器上。
关于本地数据存储的具体情况已经在第10章中做过介绍,请参照理解。
第12章获取浏览器的地理位置信息
一、选择题
1.A2.C
二、填空题
1.navigator.geolocation2.clearWatch();watchPosition()
三、简答题
1.答
位置信息的通常来源包括:
GPS(全球定位系统),这种方式可以提供很精确的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Html5 程序设计 基础教程 练习题 参考答案