html5网页前端设计课后习题答案Word格式.docx
《html5网页前端设计课后习题答案Word格式.docx》由会员分享，可在线阅读，更多相关《html5网页前端设计课后习题答案Word格式.docx（11页珍藏版）》请在冰点文库上搜索。
dt>
和定义标签<
dd>
一起使用。
3.HTML5中块级元素与内联元素的区别是什么？
分别列举有哪些标签属于块级元素或内联元素。
块级元素会默认在前后自动放置一个换行符；
内联元素不会自动在前后自动放置换行符，默认在同一行显示。
属于块级元素的有区域元素<
div>
、段落标签<
p>
、表格标签<
table>
、标题标签<
h1>
-<
h6>
等；
属于内联元素的有容器标签<
span>
，超链接标签<
a>
等。
4.HTML5新增的文档结构标签有哪些？
<
header>
、<
nav>
section>
article>
aside>
footer>
。
5.HTML5新增的格式标签有哪些？
记号标签<
mark>
、进度标签<
progress>
、度量标签<
meter>
6.HTML5有哪些新增的功能API，分别起什么作用？
常用的HTML5功能性API列举如下：
●拖放：
实现元素的拖放；
●画布：
实现2D和3D绘图效果；
●音频和视频：
实现自带控件播放音频和视频；
●表单：
新增一系列输入类型，例如电话号码、数字范围、email地址等；
●地理定位：
使用浏览器进行地理位置经纬度的定位；
●Web存储：
实现本地持久化存储大量数据；
●WebWorker：
实现线程效果
第三章习题答案
1.CSS样式表有哪几种类型？
它们的层叠优先级关系是？
外部样式表、内部样式表和内联样式表。
优先级由低到高分别为：
外部样式表-->
内部样式表-->
内联样式表。
2.常用的CSS选择器有哪些？
元素选择器、id选择器、类选择器、属性选择器。
3.CSS的注释语句写法是？
CSS的注释以“/*”开头，以“*/”结尾，支持单行和多行注释。
4.CSS颜色值有哪几种表达方式？
常见有如下几种表达方式：
●使用RGB颜色的方式：
例如rgb（0,0,0）表示黑色、rgb（255,255,255）表示白色等；
●RGB的十六进制表示法：
例如#000000表示黑色、#FFFFFF表示白色等；
●直接使用英文单词名称：
例如red表示红色、blue表示蓝色等。
5.CSS背景图像的平铺方式有哪几种？
repeat-x（水平方向平铺），repeat-y（垂直方向平铺），repeat（水平和垂直方向都平铺）以及no-repeat（不平铺，只显示原图）。
6.如何使用CSS为文本添加下划线？
text-decoration:
underline。
7.如何使用CSS为列表选项设置自定义标志图标？
1.答：
list-style-image:
url（图标文件的URL）。
8.如何使用CSS实现表格为单线条框样式？
border-collapse:
collapse。
9.如何使用CSS设置元素的层叠效果？
使用属性z-index可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。
10.元素可以向哪些方向进行浮动？
如何清除浮动效果？
在CSS中float属性可以用于令元素向左或向右浮动。
常用clear:
both来清除之前元素的浮动效果。
第四章习题答案
1.引用JavaScript外部脚本的正确写法是？
在HTML页面中直接插入JavaScript代码的正确做法是何种标签？
外部脚本引用方法为：
scriptsrc="
JavaScript文件URL"
>
/script>
在HTML页面中直接插入JavaScript代码的正确做法是<
script>
标签。
2.以下哪个属于JavaScript注释的正确写法？
（1）<
--被注释掉的内容-->
（2）//被注释掉的内容
（3）“被注释掉的内容”
（2）为正确内容。
3.请分别说出下列内容中变量x运算结果。
（1）varx=9+9;
（2）varx=9+"
9"
;
（3）varx="
+"
（1）18，
（2）99，（3）99。
4.在JavaScript中有哪些常用的循环语句？
for循环和for-in循环、while循环和do-while循环。
5.如何使用警告对话框显示“HelloJavaScript”？
alert（"
HelloJavaScript"
）;
6.如何创建与调用自定义名称的JavaScript函数？
使用关键词function来创建自定义函数，例如：
functionwelcome（）{
alert（"
WelcometoJavaScriptWorld"
}
函数可以通过使用函数名称的方法进行调用，例如welcome（）。
7.如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值？
使用Math.round（）方法。
8.如何获取用户当前浏览器的名称和版本？
navigator.appName以及navigator.appVersion。
第五章习题答案
1.如何将元素设置为允许拖放的状态？
设置元素的draggable属性值为true。
2.元素被拖拽直到放置在指定区域的完整过程中依次触发了哪些拖放事件？
dragstart->
drag->
dragenter->
dragover->
dragleave->
drop->
dragend。
3.可在拖放过程中被传递的常见数据类型有哪些？
可用于传递的常用数据类型如下：
●纯文本类型：
text/plain
●超链接类型：
text/uri-list
●HTML代码类型：
text/html
4.使用DataTransfer对象中的何种方法可以自定义拖放图标？
setDragImage（）方法。
5.如何将指定元素设置为允许放置元素的目标区域？
作为可放置区域的元素必须带有ondragover事件。
6.在进行本地文件的拖放时，DataTransfer对象中的哪个属性可以用于获取文件列表？
直接在放置文件时使用DataTransfer对象的files属性即可获取文件列表，里面包含了所有文件。
第六章习题答案
1.<
form>
标签的method属性可以取哪些属性值？
分别表示什么含义？
表单的method属性用于规定了发送表单数据的两种HTTP方法：
GET和POST方法。
其中表单标签默认的提交方式为GET方法。
●GET方法：
提交表单数据时，GET方法会将表单组件的数据名称和值转换为文本形式的参数并直接加原URL地址后面，点击提交按钮后可以直接从浏览器地址栏看到全部内容。
这种方式适用于传递一些安全级别要求不高的数据，并且有传输大小限制，每次不能超过2KB。
●POST方法：
这种方法传递的表单数据会放在HTML的表头中，不会出现在浏览器地址栏里，用户无法直接看到参数内容，适用于安全级别相对较高的数据。
并且对于客户端而言没有传递数据的容量限制，完全取决于服务器的限制要求，总体来说传输的数据量比GET方法大。
2.HTML5中新增了哪些<
input>
标签的常用类型？
HTML5中新增的常用类型如下表所示。
类型名称
解释
tel
电话号码
email
电子邮箱地址
url
URL网址
number
数值
range
包含数值范围的滚动条
datetime
UTC日期（包含年、月、日）和时间（包含时、分）
datetime-local
本地日期和时间
time
选择时间（包含时、分）
date
选择日期（包含年、月、日）
week
选择星期（包含年、第几周）
month
选择月份（包含年、月）
search
搜索栏目的文本输入域
color
颜色选择器
3.按钮标签<
button>
有哪些类型？
有三种类型，分别是提交（submit）、重置（reset）或无动作按钮（button）类型。
提交（submit）用于提交表单数据；
重置（reset）用于重置表单填写的内容；
无动作按钮（button）本身没有任何动作，需要配合JavaScript代码使用。
4.HTML5表单新增multiple属性可以用于何种类型的<
标签？
该属性只适用于2种类型的<
标签：
email（电子邮箱）和file（上传文件控件）。
5.HTML5表单新增width和height属性可以用于何种类型的<
width和height属性只能用于类型为image的<
6.如何使用HTML5表单新增pattern属性限制用户只允许输入6位阿拉伯数字？
关于正则表达式有多种用法，这里选择其中一种参考答案列举如下：
inputtype="
text"
name="
number"
pattern="
[0-9]{6}"
title="
请输入6位数字"
/>
第七章习题答案
1.创建画布使用的HTML5标签名称是？
为何要给画布定义ID？
在HTML5中创建画布需要使用<
canvas>
元素。
其中<
标签的id属性为必填内容，使用JavaScript进行绘图时可根据id找到需要绘图的画布。
2.试绘制HTML5画布坐标系，并标记其中的原点（0,0）位置。
画布坐标系中原点的位置在画布矩形框的左上角，即（0,0）坐标的位置。
图7-1HTML5画布坐标系示意图
3.在画布上绘制空心矩形与实心矩形分别使用的是哪种方法？
在HTML5中可以使用strokeRect（）方法绘制带边框的空心矩形；
在HTML5中使用fillRect（）方法绘制填充颜色的实心矩形。
4.文字的绘制有哪两种方法？
有什么区别？
HTML5画布API提供了两种绘制文本的方法，fillText（）方法用于绘制实心文本内容，strokeText（）方法用于为文本内容描边。
5.在画布中颜色渐变有哪两种模式？
在HTML5中，颜色渐变效果分为线性渐变与径向渐变两种。
6.在画布中设置颜色透明度有哪两种方法，它们有什么不同？
方法一：
ctx.globalAplpha=透明度值;
画布中所有的图形都被context对象中globalAlpha的属性值影响透明度。
方法二：
rgba（red,green,blue,透明度值）;
可以用该方法为图形单独设置透明度。
7.在HTML5画布API中save（）和restore（）方法的作用是什么？
在HTML5画布中，save（）和restore（）方法是绘制复杂图形的快捷方式，用于记录或恢复画布的绘画状态。
8.在HTML5画布中如何将形状的长和宽均缩放至原先的二分之一大小？
ctx.scale（0.5,0.5）;
第八章习题答案
1.HTML5音频使用了何种标签作为统一标准？
有哪些音频格式可以被支持？
HTML5提供了一种使用<
audio>
标签来显示音频的标准方法。
目前HTML5支持的常用音频格式有三种：
MP3格式、Ogg格式、Wav格式。
2.HTML5视频使用了何种标签作为统一标准？
有哪些视频格式可以被支持？
video>
标签来包含视频的标准方法。
目前HTML5支持的常用视频格式有三种：
MPEG4格式、Ogg格式、WebM格式。
3.有哪些方法可以检测浏览器是否支持<
可以使用<
标签检测，或者使用JavaScript进行检测。
4.如何获取媒体文件播放的开始与结束时间？
需要使用<
或<
标签的seekable属性。
seekable属性的start（index）方法可以用于获取媒体播放的开始时间，end（index）方法用于获取媒体播放的结束时间，其中index表示媒体对象的来源序号，默认只有一个的情况填数字0。
5.如何跳转媒体文件的当前播放时间？
可以通过设置<
标签的currentTime属性值（单位：
秒）来完成。
例如：
varmediaFile=document.getElementById（"
media"
mediaFile.currentTime=200;
6.如何终止媒体文件的后台加载？
可以先使用pause（）方法暂停媒体文件的播放，然后将<
标签的src属性去除或者设置为空。
7.如果浏览器不支持<
标签，有什么备选方案可以让浏览器正常播放媒体文件？
由于不支持<
标签的浏览器会执行该标签首尾标记内部的内容，可以利用该原理为此类浏览器增加一个Flash播放器的备选项，以保证浏览器可以正常播放媒体文件。
第九章习题答案
1.目前有哪些常见的定位技术，它们有哪些利弊？
目前常用的定位技术包括IP地址定位、GPS定位、Wifi定位和AGPS定位等。
●IP地址定位返回的位置信息不准确，只能精确到所在城市；
●GPS可以在室外提供非常准确的定位信息，但是获取时间相对较长并且在室内无法准确定位，还需要额外的硬件设备。
●Wifi定位即使在室内也非常准确，但是Wifi定位仅仅适用于无线网路基地台较多的城市，如果是无线网稀少的地方就起不到作用了。
●APGS定位技术定位速度快、范围广、精确度也得到了提高。
目前算是定位精度最高的定位技术之一。
2.如何使用HTML5地理定位API获取一次当前的定位信息？
Geolocation接口中的getCurrentPosition（）方法可用于获取用户当前的定位位置。
3.如何使用HTML5地理定位API实时更新定位信息？
geolocation对象提供的watchPosition（）方法可以实时更新用户当前的位置。
4.如何使用HTML5地理定位API停止已经启动的实时更新定位功能？
如果不需要继续更新用户的定位信息可以使用clearWatch（）方法来停止watchPosition（）方法的实时监控功能。
该方法需要获取watchPosition（）的返回值watchID。
5.如何计算已知经纬度的两个坐标点在地平线上的距离？
可以使用半正矢公式计算已知经纬度数据的两个坐标点之间的距离。
半正矢公式也称为Haversine公式，最早是航海学中的重要公式，其原理就是将地球看作圆形，利用公式来计算圆形表面上任意两个点之间的弧线距离。
第十章习题答案
1.什么是HTML5Web存储，它与传统的cookie存储方式相比有哪些不同？
HTML5Web存储API和cookie存储方式类似，也是将数据以“键-值”对（key-valuepairs）的形式持久存储在Web客户端。
相比HTTPcookie而言，HTML5的Web存储技术更适用于存储大量数据，其中IE每个域名下可以存放10M数据，而其他主流浏览器如Chrome、Firefox和Opera每个域名下也可以存放5M的数据量，并且发生请求时不会带上Web存储的内容。
2.HTML5Web存储API中有哪两种存储方式，它们有什么不同？
HTML5提供了两种客户端存储数据的方法：
本地存储（localStorage）与会话存储（sessionStorage）。
localStorage方法存储的数据没有时间限制，永久保存，并且数据可以被不同的网页页面共享使用。
sessionStorage主要是针对一个session会话的数据存储，只能在创建session的网页中使用，当用户关闭浏览器窗口时，该数据将被删除。
3.HTML5Web存储API使用何种格式进行数据的存储？
数据是以“键-值”对的方式进行存储的，每个数据值对应一个指定的键名称进行索引。
其中key换成需要存储的键名称（可自定义），value换成需要存储的数据值。
这里的引号可以是单引号或双引号的任意一种。
4.如何使用HTML5Web存储API读取指定键名称的存储数据？
在Storage接口中提供的getItem（）方法可以用于获取指定了键名称的数据值。
例如localStorage.getItem（'
name'
）。
5.如何获取第n个存储数据的键名称或数据值？
可以先使用Storage接口中的key（n）方法获取键名称，然后再使用getItem（）方法获取数据值。
6.如何使用HTML5Web存储API删除指定键名称的存储数据？
在Storage接口中提供的removeItem（）方法可以用于删除指定了键名称的数据。
例如localStorage.removeItem（'
7.如何使用HTML5Web存储API清空所有的存储数据？
在Storage接口中提供的clear（）方法可以用于清空所有Web存储数据。
第十一章习题答案
1.CSS3中哪个属性可以为元素设置圆角边框？
在CSS3中，border-radius属性可用于直接创建带有圆角的边框样式，该属性值表示圆角边框的圆角半径长度，数值越大则圆的弧度越明显。
2.CSS3中哪个属性可以自定义背景图片的尺寸？
在CSS3中，background-size属性可用于定义元素背景图片的尺寸大小。
3.CSS3中哪个属性可以使文本中的长单词强制换行显示？
CSS3使用word-wrap属性规定文本的换行规则，可以将长单词断开换到下一行继续显示。
4.CSS3中@font-face的作用是？
目前在CSS3中通过@font-face的规则，网页可以显示任何字体。
当有特殊字体时，可以将其放在服务器端，在浏览页面时会被自动下载到用户的设备终端。
5.CSS3的Transition动画中使用何种属性可以设置渐变的持续时间？
在CSS3中transition-duration属性用于指定渐变动画效果的持续时长，持续时间越长渐变效果越慢。
6.CSS3的Animation动画中@keyframes有什么作用？
在CSS3中使用@keyframes规则定义一套动画效果中若干个关键帧的样式效果。
7.CSS3的Animation动画中使用何种属性可以控制动画循环次数？
在CSS3中animation-iteration-count属性用于设置动画的循环播放次数。
8.CSS3的Animation动画中使用何种属性可以控制动画运动的方向？
在CSS3中animation-direction属性用于指定循环播放动画的运动方向。
9.CSS3的column-gap属性可以用于设置什么样式？
CSS3中column-gap属性用于设置列与列之间的宽度。
10.找任意一页多列排版效果的报纸，使用网页实现其中一个版块的模仿效果。
本题无标准答案，可参考例11-19的效果。
升级会员 