html5网页前端设计课后习题答案.doc

.第一章习题答案1. 什么是Internet和万维网，它们的区别在哪里？答：Internet是由成千上万台计算机设备互相连接，基于TCP/IP协议进行通信从而形成的全球网络。万维网是Internet上最重要的服务之一，也常被简称为“W3”或“Web”。万维网主要使用HTTP协议将互联网上的资源结合在了一起，并在浏览器中以Web页面的方式呈现给用户。2. 请简单描述用户上网浏览网页的原理。答：用户打开Web浏览器并输入需要访问的URL地址，该地址将发送给对应的Web服务器。Web服务器然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。3. Web前端技术的三大核心基础是哪些内容？答：HTML、CSS和JavaScript。4. Web前端新技术HTML5与HTML有什么关系?答：HTML来源于Hypertext Markup Language（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网上应用最广泛的核心语言。HTML5是HTML的第五次修改版，也是目前HTML语言的最新版。第二章习题答案1. HTML5的文档注释是怎样的？答：HTML5使用标签为文档进行注释，注释标签以“”结束，中间的“.”替换为注释文字内容即可。标签支持单行和多行注释。2. HTML5中列表标签有哪些，它们之间有什么区别？答：包括有序列表标签、无序列表标签和定义列表标签三种。有序列表标签和用于定义带有编号的有序列表；无序列表标签和用于定义不带编号的无序列表；定义列表标签和是用于进行词条定义的特殊列表，每条表项需要结合词条标签和定义标签一起使用。3. HTML5中块级元素与内联元素的区别是什么？分别列举有哪些标签属于块级元素或内联元素。答：块级元素会默认在前后自动放置一个换行符；内联元素不会自动在前后自动放置换行符，默认在同一行显示。属于块级元素的有区域元素、段落标签、表格标签、标题标签-等；属于内联元素的有容器标签，超链接标签等。4. HTML5新增的文档结构标签有哪些？答： 、。5. HTML5新增的格式标签有哪些？答：记号标签、进度标签、度量标签等。6. HTML5有哪些新增的功能API，分别起什么作用？答：常用的HTML5功能性API列举如下：l 拖放：实现元素的拖放；l 画布：实现2D和3D绘图效果；l 音频和视频：实现自带控件播放音频和视频；l 表单：新增一系列输入类型，例如电话号码、数字范围、email地址等；l 地理定位：使用浏览器进行地理位置经纬度的定位；l Web存储：实现本地持久化存储大量数据；l Web Worker：实现线程效果第三章习题答案1. CSS样式表有哪几种类型？它们的层叠优先级关系是？答：外部样式表、内部样式表和内联样式表。优先级由低到高分别为：外部样式表-内部样式表-内联样式表。2. 常用的CSS选择器有哪些？答：元素选择器、id选择器、类选择器、属性选择器。3. CSS的注释语句写法是？答：CSS的注释以“/*”开头，以“*/”结尾，支持单行和多行注释。4. CSS颜色值有哪几种表达方式？答：常见有如下几种表达方式：l 使用RGB颜色的方式：例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等；l RGB的十六进制表示法：例如#000000表示黑色、#FFFFFF表示白色等；l 直接使用英文单词名称：例如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代码的正确做法是何种标签？答：外部脚本引用方法为：。在HTML页面中直接插入JavaScript代码的正确做法是标签。2. 以下哪个属于JavaScript注释的正确写法？ (1) (2) /被注释掉的内容(3) “被注释掉的内容”答：（2）为正确内容。3. 请分别说出下列内容中变量x运算结果。(1) var x = 9+9;(2) var x = 9+9;(3) var x = 9+9;答：（1）18，（2）99，（3）99。4. 在JavaScript中有哪些常用的循环语句？答：for循环和for-in循环、while循环和do-while循环。5. 如何使用警告对话框显示“Hello JavaScript”？答：alert(Hello JavaScript);6. 如何创建与调用自定义名称的JavaScript函数？答：使用关键词function来创建自定义函数，例如：function welcome() alert(Welcome to JavaScript World);函数可以通过使用函数名称的方法进行调用，例如welcome()。7. 如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值？答：使用Math.round()方法。8. 如何获取用户当前浏览器的名称和版本？答：navigator.appName以及navigator.appVersion。第五章习题答案1. 如何将元素设置为允许拖放的状态？答：设置元素的draggable属性值为true。2. 元素被拖拽直到放置在指定区域的完整过程中依次触发了哪些拖放事件？答：dragstart-drag-dragenter-dragover-dragleave-drop-dragend。3. 可在拖放过程中被传递的常见数据类型有哪些？答：可用于传递的常用数据类型如下：l 纯文本类型：text/plainl 超链接类型：text/uri-listl HTML代码类型：text/html4. 使用DataTransfer对象中的何种方法可以自定义拖放图标？答：setDragImage()方法。5. 如何将指定元素设置为允许放置元素的目标区域？答：作为可放置区域的元素必须带有ondragover事件。6. 在进行本地文件的拖放时，DataTransfer对象中的哪个属性可以用于获取文件列表？答：直接在放置文件时使用DataTransfer对象的files属性即可获取文件列表，里面包含了所有文件。第六章习题答案1. 标签的method属性可以取哪些属性值？分别表示什么含义？答：表单的method属性用于规定了发送表单数据的两种HTTP方法：GET和POST方法。其中表单标签默认的提交方式为GET方法。l GET方法：提交表单数据时，GET方法会将表单组件的数据名称和值转换为文本形式的参数并直接加原URL地址后面，点击提交按钮后可以直接从浏览器地址栏看到全部内容。这种方式适用于传递一些安全级别要求不高的数据，并且有传输大小限制，每次不能超过2KB。l POST方法：这种方法传递的表单数据会放在HTML的表头中，不会出现在浏览器地址栏里，用户无法直接看到参数内容，适用于安全级别相对较高的数据。并且对于客户端而言没有传递数据的容量限制，完全取决于服务器的限制要求，总体来说传输的数据量比GET方法大。2. HTML5中新增了哪些标签的常用类型？分别表示什么含义？答： HTML5中新增的常用类型如下表所示。类型名称解释tel电话号码email电子邮箱地址urlURL网址number数值range包含数值范围的滚动条datetimeUTC日期（包含年、月、日）和时间（包含时、分）datetime-local本地日期和时间time选择时间（包含时、分）date选择日期（包含年、月、日）week选择星期（包含年、第几周）month选择月份（包含年、月）search搜索栏目的文本输入域color颜色选择器3. 按钮标签有哪些类型？分别表示什么含义？答：有三种类型，分别是提交（submit）、重置（reset）或无动作按钮（button）类型。提交（submit）用于提交表单数据；重置（reset）用于重置表单填写的内容；无动作按钮（button）本身没有任何动作，需要配合JavaScript代码使用。4. HTML5表单新增multiple属性可以用于何种类型的标签？答：该属性只适用于2种类型的标签：email（电子邮箱）和file（上传文件控件）。5. HTML5表单新增width和height属性可以用于何种类型的标签？答：width和height属性只能用于类型为image的标签。6. 如何使用HTML5表单新增pattern属性限制用户只允许输入6位阿拉伯数字？答：关于正则表达式有多种用法，这里选择其中一种参考答案列举如下：第七章习题答案1. 创建画布使用的HTML5标签名称是？为何要给画布定义ID？答：在HTML5中创建画布需要使用元素。其中标签的id属性为必填内容，使用JavaScript进行绘图时可根据id找到需要绘图的画布。2. 试绘制HTML5画布坐标系，并标记其中的原点(0,0)位置。答：画布坐标系中原点的位置在画布矩形框的左上角，即(0,0)坐标的位置。图7-1 HTML5画布坐标系示意图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提供了一种使用标签来显示音频的标准方法。目前HTML5支持的常用音频格式有三种：MP3格式、Ogg格式、Wav格式。2. HTML5视频使用了何种标签作为统一标准？有哪些视频格式可以被支持？答：HTML5提供了一种使用标签来包含视频的标准方法。目前HTML5支持的常用视频格式有三种：MPEG4格式、Ogg格式、WebM格式。3. 有哪些方法可以检测浏览器是否支持和标签？答：可以使用和标签检测，或者使用JavaScript进行检测。4. 如何获取媒体文件播放的开始与结束时间？答：需要使用或标签的seekable属性。seekable属性的start(index)方法可以用于获取媒体播放的开始时间，end(index)方法用于获取媒体播放的结束时间，其中index表示媒体对象的来源序号，默认只有一个的情况填数字0。5. 如何跳转媒体文件的当前播放时间？答：可以通过设置或标签的currentTime属性值（单位：秒）来完成。例如：var mediaFile = document.getElementById(media);mediaFile.currentTime=200;6. 如何终止媒体文件的后台加载？答：可以先使用pause()方法暂停媒体文件的播放，然后将或标签的src属性去除或者设置为空。7. 如果浏览器不支持或标签，有什么备选方案可以让浏览器正常播放媒体文件？答：由于不支持或标签的浏览器会执行该标签首尾标记内部的内容，可以利用该原理为此类浏览器增加一个Flash播放器的备选项，以保证浏览器可以正常播放媒体文件。第九章习题答案1. 目前有哪些常见的定位技术，它们有哪些利弊？答：目前常用的定位技术包括IP地址定位、GPS定位、Wifi定位和AGPS定位等。l IP地址定位返回的位置信息不准确，只能精确到所在城市；l GPS可以在室外提供非常准确的定位信息，但是获取时间相对较长并且在室内无法准确定位，还需要额外的硬件设备。l Wifi定位即使在室内也非常准确，但是Wifi定位仅仅适用于无线网路基地台较多的城市，如果是无线网稀少的地方就起不到作用了。l APGS定位技术定位速度快、范围广、精确度也得到了提高。目前算是定位精度最高的定位技术之一。2. 如何使用HTML5地理定位API获取一次当前的定位信息？答：Geolocation接口中的getCurrentPosition()方法可用于获取用户当前的定位位置。3. 如何使用HTML5地理定位API实时更新定位信息？答：geolocation对象提供的watchPosition()方法可以实时更新用户当前的位置。4. 如何使用HTML5地理定位API停止已经启动的实时更新定位功能？答：如果不需要继续更新用户的定位信息可以使用clearWatch()方法来停止watchPosition()方法的实时监控功能。该方法需要获取watchPosition()的返回值watchID。5. 如何计算已知经纬度的两个坐标点在地平线上的距离？答：可以使用半正矢公式计算已知经纬度数据的两个坐标点之间的距离。半正矢公式也称为Haversine公式，最早是航海学中的重要公式，其原理就是将地球看作圆形，利用公式来计算圆形表面上任意两个点之间的弧线距离。第十章习题答案1. 什么是HTML5 Web存储，它与传统的cookie存储方式相比有哪些不同？答：HTML5 Web存储API和cookie存储方式类似，也是将数据以“键-值”对(key-value pairs)的形式持久存储在Web客户端。 相比HTTP cookie而言，HTML5的Web存储技术更适用于存储大量数据，其中IE每个域名下可以存放10M数据，而其他主流浏览器如Chrome、Firefox和Opera每个域名下也可以存放5M的数据量，并且发生请求时不会带上Web存储的内容。2. HTML5 Web存储API中有哪两种存储方式，它们有什么不同？答：HTML5提供了两种客户端存储数据的方法：本地存储（localStorage）与会话存储（sessionStorage）。localStorage方法存储的数据没有时间限制，永久保存，并且数据可以被不同的网页页面共享使用。sessionStorage主要是针对一个session会话的数据存储，只能在创建session的网页中使用，当用户关闭浏览器窗口时，该数据将被删除。3. HTML5 Web存储API使用何种格式进行数据的存储？答：数据是以“键-值”对的方式进行存储的，每个数据值对应一个指定的键名称进行索引。其中key换成需要存储的键名称（可自定义），value换成需要存储的数据值。这里的引号可以是单引号或双引号的任意一种。4. 如何使用HTML5 Web存储API读取指定键名称的存储数据？答：在Storage接口中提供的getItem()方法可以用于获取指定了键名称的数据值。例如localStorage.getItem(name)。5. 如何获取第n个存储数据的键名称或数据值？答：可以先使用Storage接口中的key(n)方法获取键名称，然后再使用getItem()方法获取数据值。6. 如何使用HTML5 Web存储API删除指定键名称的存储数据？答：在Storage接口中提供的removeItem()方法可以用于删除指定了键名称的数据。例如localStorage.removeItem(name)。7. 如何使用HTML5 Web存储API清空所有的存储数据？答：在Storage接口中提供的clear()方法可以用于清空所有Web存储数据。第十一章习题答案1. CSS3中哪个属性可以为元素设置圆