《HTML5 CSS3Web前端开发技术（人邮第2版）》思考与练习题参考答案.docx

《《HTML5 CSS3Web前端开发技术（人邮第2版）》思考与练习题参考答案.docx》由会员分享，可在线阅读，更多相关《《HTML5 CSS3Web前端开发技术（人邮第2版）》思考与练习题参考答案.docx（64页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、思考与练习题参考答案第一章.简答题(1 )在Web前端开发方面，HTML5与HTML4比拟，主要解决哪几方面的问题？HTML5的核心在于解决当前Web开发中存在的各种问题。一是解决Web浏览器之间的兼容性问题。在一个浏览器上正常显示的网页(或运行的Web 应用程序)，很可能在另一个浏览器上不能显示或显示效果不一致；二是文档结构描述的问题。HTML4之前的各版本中，HTML文档的结构一般用div元素描 述，文档元素的结构含义不够清晰；三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比方本 地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户

2、的体验。(2 ) HTML5新增的全局属性有哪几个？描述其主要功能。HTML5新增的全局属性，是指可以对任何元素都使用的属性。功能如下所示。属性描述HTML5新增accesskey规定访问元素的键盘快捷键class规定元素的类名(用于规定样式表中的类)。contenteditable规定是否允许用户编辑内容。是contextmenu规定元素的上下文菜单。是dir规定元素中内容的文本方向。draggable规定是否允许用户拖动元素。是dropzone规定当被拖动的工程/数据被拖放到元素中时会发生什么。是hidden规定该元素是无关的。被隐藏的元素不会显示。是id规定元素的唯一IDolang规定元

3、素中内容的语言代码。spellcheck规定是否必须对元素进行拼写或语法检查。是style规定兀素的行内样式。明其功能。将hiput标记中的type属性设置为number ,可以在表单中插入数值输入域，还可以限定输 入数字的范围。将input标记中的type属性设置为range ,可以在表单中插入表示数值范围的滑动条，还可 以限定可接受数值的范围。只要将input标记中的type属性设置为date, time ,可以完成网页中日期选择器的定义。1 .操作题制作如图4-11所示的表单。图4-11表单例如2.操作题（4） 表单考试报名表用户名：文理选择：文科（input type=radio na

4、me=rad value=rad23 科（input type=radio name=rad value=“rad3”综合报考科目：数学语文外语 物理化学生物政治历史地理报考级别：ABCinput name=reset type=reset value=“重置“input name=“sub” type=button” value=“确定”第五章1.简答题(1 ) HTML5中插入视频使用什么标记？描述其语法格式及含义、该标记的属性及功能。HTML5提供了视频内容的标准接口 ,规定使用video标记来描述和播放视频。video标记语法格式如下：video src=url controls=co

5、ntrols”替代文字/video如果浏览器不支持url指定的video元素，将显示替代文字。vidco标记常用的属性及说明如表5-1所示。表5-1vvideo标记常用属性及说明属性值说明srcurl要播放视频的URLautoplayautoplay视频就绪后立刻播放controlscontrols添加播放、暂停和音量等控件width像素设置视频播放器的宽度height像素设置视频播放器的高度looploop设置视频是否循环播放preloadauto/none/metadata视频在页面加载时开始加载，并预备播放startTime读取媒体的开始播放时间，通常为0currentTime读取或修改

6、媒体的当前播放位置duration读取媒体总的播放时间volume()1读取或修改媒体的播放音量mutedtrue/false读取或修改媒体的静音状态(2 )简述video元素常用方法和事件(各列出3种即可,video元素还有一系列重要的方法和事件。调用这些方法和事件可以访问和控制video对象。表5-3给出了局部video元素常用的方法和事件。表5-3vvideo标记常用方法和事件方法/事件功能playO播放媒体，paused属性的值自动修改为falsepause()暂停播放，paused属性的值自动修改为trueload()重新载入媒体进行播放play事件执行play()方法时触发paus

7、e事件执行pause。方法时触发error事件获取媒体数据错误时触发timeupdate 事件当前播放位置发生改变时触发durationchange 事件播放时长被改变(3 )简述track元素的功能和常用的属性。track元素可以为使用video元素播放的视频或使用audio元素播放的音频添加字幕、标题或 章节等文字信息。track元素为视频添加字幕的过程和为音频添加字幕的过程是相同的。track元 素是video元素的子元素，vtrack标记必须被书写在video元素的开始标记与结束标记之间。如 果使用source标记描述媒体文件，那么track标记必须被书写在source标记之后。tra

8、ck元素是 一个空元素，其开始标记与结束标记之间不包含任何内容。表5-6给出了track标记的常用属性及说明。表5-6vtrack,标记的常用属性及说明属性说明src属性src属性用于指定字幕文件的存放路径，该属性是一个必须使用的属性。src属性的属性值 可以是一个绝对URL路径，也可以是一个相对URL路径。srclang 属性srclang属性用于指定字幕文件的语言。例如，srclang=en”和srclang=zh-cn”分别表示字 幕文件为英语和汉语。default 属性default属性用于通知浏览器在用户没有选择使用其他字幕文件的时候可以使用当前track 文件kind属性kind属

9、性用于指定字幕文件（即用于存放字幕、章节标题、说明文字或元数据的文件）的种 类。可以对 kind 属性指定的属性值为 subtitles、captions、descriptions% chapters metadata2.操作题在网页中插入视频，并对视频做如下设置。320像素宽，240像素高；显示视频播放器控件；循环播放； 首选播放OGG格式文件，其次分别为MP4格式和WEBM格式（此处需准备3种不同格式的文件）； 假设不支持video元素，那么显示提示文字“请选用其他高版本浏览器尝试播放此视频”。请选用其他高版本浏览器尝试播放此视频（2 ）使用HTML5视频字幕制作工具创立WebVTT文件，

10、并通过track元素为一个视频文件添加字幕o创立的WebVTT文件文件如下：WEBVTT00:00,000 - 00:31.844茫茫的天涯茫茫的路00:31.844 - 00:36.047茫茫的草原碧蓝的天00:36.047 - 00:39.807草原上有你我的爱恋00:39.807 - 00:42.664爱你的心永在心田00:42.664 - 00:46.449草原的姑娘洁白雪莲00:46.449 - 00:50.462奔驰的骏马越过山涧00:50.462 - 00:54.019清澈的河水映着你的脸00:54.019 - 00:58.152就像晚霞惹人留恋00:58.152 -01:01.

11、700你带我奔驰在草原01:01.700 -01:05.581我和你飞翔在蓝天01:05.581-01:09.297你送我美丽的格桑花01:09.297 -01:12.896我送你幸福和祝愿01:12.896 -01:16.797你带我奔驰在草原01:16.797 -01:20,558我和你飞翔在蓝天01:20.558 -01:24.204你我的爱情在草原01:24.204 -01:27,965草原在你我的心田01:27.965 -01:47.375草原的姑娘洁白雪莲01:47.375 -01:50.627奔驰的骏马越过山涧01:50.627-01:54.109清澈的河水映着你的脸01:54.

12、109 -01:58.011就像晚霞惹人留恋01:58.011- 02:01.818你带我奔驰在草原02:01.818 - 02:05.580我和你飞翔在蓝天02:05.580 - 02:09.340你送我美丽的格桑花02:09.340 - 02:13.080我送你幸福和祝愿02:13,080 - 02:16.818你带我奔驰在草原02:16,818 - 02:20.440我和你飞翔在蓝天02:20,440 - 02:24.364你我的爱情在草原02:24.364 - 02:28,010草原在你我的心田02:28.010 - 02:31.793你带我奔驰在草原02:31.793 - 02:37

13、.715我和你飞翔在蓝天02:37.715 - 02:41,198你送我美丽的格桑花02:41.198 - 02:44,936我送你幸福和祝愿02:44.936- 02:48.791你带我奔驰在草原02:48.791- 02:52.459我和你飞翔在蓝天02:52.459 - 02:56.221你我的爱情在草原02:56.221- 02:59.982草原在你我的心田引用的文件如下：track src=geci.vtt srclang=”zh kind二subtitles” label=“中文default第六章1.简答题(1)使用Canvas API绘图时，直线有几种线帽形态？ lineCap

14、属性有哪些取值？分别表示 什么含义？lineC叩用于设置或返回线帽(线条的结束端点)样式，可以有以下三种取值。butt：默认属性值，不为直线添加端点round ：为直线添加圆形端点square :为直线添加正方形端点(2 ) Canvas 使用什么方法在网页中绘制圆形？其中需要几个参数？每个参数的含义是什 么？Canvas API使用绘制图形路径来绘制圆形。绘制图形路径时，需要使用绘图上下文对象ctx 的arc()方法。该方法的定义如下。ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)其中，x、y分别为绘制圆形的圆心横坐标和纵坐标，ra

15、dius为圆形半径,startAngle为开始 角度，endAngle为结束角度，anticlockwise为是否按逆时针方向进行绘制。arc。方法通过指定开始角度与结束角度，除了可以用来绘制圆形，还可以绘制圆弧，这两个角度就决定了绘制的弧度。anticlockwise为布尔值参数，参数值为true时，按逆时针绘制；参数 值为false时，那么按顺时针绘制。(3 )路径创立完成后，为什么要使用图形上下文对象的ck)sePath()方法关闭路径？路径创立完成后，使用绘图上下文对象的closePath。方法关闭路径。如果绘制路径时未使用 closePath()方法，那么绘制出的是没有封闭的路径，除

16、非使用beginPathj()开始新的路径绘制。(4 ) Canvas定义颜色值有哪几种方法？Canvas绘图时，绘图上下文的fillStyle属性与strokeStyle属性用来指定填充的颜色或边框的 颜色，颜色定义方法与CSS中颜色定义方法基本相同。下面是定义颜色的各种方法。 颜色名：直接使用颜色的英文名称作为属性值，例如，blue表示蓝色。 #rrggbb :用一个6位的十六进制数表示颜色，例如，#0000FF表示蓝色。 #rgb是#rrggbb的一种简写方式 例如,#0000FF可以表示为#00F ,#00FFDD表示为#0FD。 rgb(nr,ggg,bbb)：使用十进制数表示颜色的

17、红、绿、蓝分量，其中,rrrx ggg、bbb都是。 255的十进制整数。例如，rgb(OQO)代表黑色。 rgb(nr%,ggg%,bbb%)：使用百分比表示颜色的红、绿、蓝分量，例如,rgb(50%,50%,50%) 表示 rgb(128,128,128)。 rgba(rrr,ggg,bbb,alpha )：使用十进制数表示颜色的红、绿、蓝分量，alpha表示颜色的透 明度，例如rgba(0128,0,0.5)表示半透明的绿色。2.操作题(1 )绘制如图6-28所示星空的效果，其中黑色矩形宽800像素、高400像素，在矩形范围 内绘制200颗大小、位置、角度随机的黄色五角星。图6-28星空

18、的效果5star function draw() var canvas=document. getElementByld (canvas*1);var context=canvas.getContext(2d);context . fillStyle=HblackH;context.fillRect(0z 0,canvas.width,canvas.height); for(var i=0;i200;i+) var r=Math.random()*10+10;var x=Math.random()*canvas.width;var y=Math.random()*canvas.height;v

19、ar a=Math.random()*360;drawStar(context,x,y,r,r/2.3,a) ) )function drawStar(ext,x,y,r,R,rot) ext.beginPath();for(var i=0;i5;i+)ext.lineTo(Math.cos(18+i*72-rot)/180*Math.PI)*R+xz-Math.sin(18+i*72-rot)/180*Math.P I)*R+y);ext.lineTo(Math.cos(54+i*72-rot)/180*Math.PI)*r+xA-Math.sin(54+i*72-rot)/180*Math

20、.P D*r+y);ext fillStyle=nyellowHext , closePath();ext.fill();)canvas id=Hcanvas width=H800n height=H400H你的浏览器不支持 Canvas(2 )在页面中绘制如图6-29所示的四种不同渐变色的矩形。；Gradient: Linear xC D file:/D:/HTML5/new( =图6-29不同渐变色的四个矩形Gradient: Linear function draw() var ctx = document.getElementByld(canvas1).getContext(2d,);

21、 /创立渐变对象var lingrad = ctx.createLinearGradient(0z0z150z150);lingrad.addColorStop(0, * #00ABEB1;lingrad.addColorStop(0.5, , #fOf *);lingrad.addColorStop(1, 1#ff0);var lingradl = ctx.createLinearGradient(310,0,160,150);lingradl.addColorStop(0, * #00ABEB *);lingradl.addColorStop(0.5, T #fOf *);lingradl

22、.addColorStop(1, * #ff0 ,);var lingrad2 = ctx.createLinearGradient(0,310,160,160);lingrad2.addColorStop(0, 1#00ABEB);lingrad2.addColorStop(0.5, T #fOf 1);lingrad2.addColorStop(1, * #ff0 ,);var lingrad3 = ctx.createLinearGradient(310,310,160,160);lingrad3.addColorStop(0, 1#00ABEB1);lingrad3.addColorS

23、top(0.5, 1#fOf 1;lingrad3.addColorStop(1, * #ff0 ,);/把渐变对象赋值给填充和轮廓样式/绘制形状ctx.fillstyle = lingrad;ctx.fillRect(0z0f150,150);ctx.fillstyle = lingradl;ctx.fillRect(160,0,150,150);ctx.fillstyle = lingrad2;ctx.fillRect(0z160z150r150);ctx.fillStyle = lingrad3;ctx.fillRect(160,160,150,150); )你的浏览器不支持Canvas

24、tabindex规定元素的tab键控制次序。title规定有关元素的额外信息。(3 ) HTML5是下一代Web语言的开发框架，典型特性有哪些？HTML5从标记语言的功能提升到下一代 Web语言的开发框架，他集成了 HTML+CSS3+JavaScript 的 Web 应用框架。良好的语义特性。HTML5支持微数据与微格式，增加的各种元素赋予网页更好的意义和结 构，适于构建对程序、对用户都更有价值的数据驱动的Web应用。HTML5增加了 section元素、 article元素、nav元素以及aside元素等结构元素。强大的绘图功能。通过使用Canvas API动态地绘制各种效果精美的图形，也

25、可以通过SVG 绘制可伸缩矢量图形。增强的音视频播放和控制功能。新增了 audio和video元素，可以不依赖任何插件而播放音 频和视频。HTML5的数据存储和数据处理的功能。包括离线应用、Web通信、本地存储 等功能，HTML5还支持WebSQL和IndexedDB等轻 量级数据库，增强了数据存储和数据检索能力。获取地理位置信息。HTML5新增了 Geolocation API规范，应用于移动设备中的地理定位。提高页面响应的多线程HTML5新增了 Web Workers来实现多线程功能。通过Web Workers , 将耗时较长的处理交给后台线程，降低Web服务的响应时间，有利于增强用户体验

26、。方便用户处理文件和访问文件系统的文件文件API HTML5的文件API包括FileReader API 和 File Sy stem API o除了上面介绍的HTML5的特性之外，HTML5还有管理浏览器历史记录的History APIOHTML5可以通过脚本语言在浏览器历史记录中添加工程，以及在不刷新页面的前提下显示地改(3 )使用transform和arc方法，绘制如图6-30所示的彩虹效果。图6-30彩虹效果 function draw(id) var canvas = document.getElementByld(1 canvas *); if (canvas = null)ret

27、urn false;var context = canvas.getContext(12d1);/*定义颜色*/n#C0Cn；var colors = n#FF0000nz “YELLOW“， “#0D0“， “#00F”, /*定义线宽*/context.linewidth = 10;context.transform(1z 0z 0, 1, 100, 0);/*循环绘制椭圆*/for (var i = 0; i colors.length; i+) /文定义每次向下移动10个像素的变换矩阵*/context.transform(1, 0, 0, 1, 0, 10);/*设定颜色/conte

28、xt.strokestyle = colorsi;/绘制圆弧*/context.beginPath();context.arc(30z 110, 100, 0, Math.PI, true); context.stroke();)canvas id=,canvasu width=260H height=n180你的浏览器不支持Canvas第七章1.简答题(1 )在网页中使用SVG与Canvas进行绘图，有哪些不同之处？附表列出了 canvas绘图与SVG绘图的一些不同之处。canvasSVGcanvas通过JavaScript来绘制2D图形SVG是一种使用XML描述2D图形的语言canvas是

29、逐像素进行渲染的。在canvas中，一 旦图形被绘制完成，它就不会继续得到浏览器 的关注。如果其位置发生变化，那么整个场景 也需要重新绘制，包括已被图形覆盖的对象。在SVG中，每个被绘制的图形均被视为对象。如果 SVG对象的属性发生变化，那么浏览器能够自动重 现图形。依赖分辨率不依赖分辨率不支持事件处理支持事件处理弱的文本渲染能力最适合带有大型渲染区域的应用程序(比方谷歌地 图)能够以.png或.jpg格式保存结果图像复杂度高会减慢渲染速度(任何过度使用DOM的 应用都不快)最适合图像密集型的游戏，其中的许多对象会 被频繁重绘不适合游戏应用(2 )列举出3种path元素用于绘制路径的命令有哪些

30、？分别是什么功能？具体怎么定义？path元素用来定义路径，使用这个元素可以实现任何其他的图形，不仅包括基本形状，也可以实现像贝塞尔曲线那样的复杂形状。例如：具体命令及功能如下。命令含义参数说明Mmovetox,y将画笔移动到点(x,y)Llinetox,y画笔从当前的点绘制线段到点(x,y)Hhorizontal linetoX画笔从当前的点绘制水平线段到点(x,yO)Vvertical linetoy画笔从当前的点绘制竖直线段到点(xO,y)Aelliptical Arcrx, ry x-axis-rotation large-arc-flag sweep-flag x y画笔从当前的点绘制

31、一段圆弧到点(x,y)Ccurvetoxl, yl,x2 y2,x y画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)Ssmooth curvetox2 y2,x y特殊版本的三次贝塞尔曲线(省略第一个 控制点)Qquadratic Belzier curvexl yl,x y绘制二次贝塞尔曲线到点(x,y)Tsmooth quadratic Belzierxy特殊版本的二次贝塞尔曲线(省略控制点)Zclosepath无参数绘制闭合图形，如果d属性不指定Z命令， 那么绘制线段，而不是封闭图形。(3 ) strokedashairay属性在绘制虚线时如何设,参数与虚线效果有什么关系？strok

32、e-dasharray 属性用于绘制虚实线，其格式如下。stroke-dasharray=value,value,”该属性由一系列数字组成 这些数字必须用逗号隔开。属性中如果包含空格，不作为分隔符。 每个数字定义了实线段的长度，分别是按照绘制、不绘制这个顺序循环下去。(4 ) SVG使用linearGradient元素定义渐变色时,vid和vstop元素的功能分别是什么？ 其中的offset属性和stop-cok)i属性用于实现什么功能？线性渐变就是一系列颜色沿着一条直线过渡SVG也使用linearGradient元素定义线性渐变, 并可以定义水平、垂直或角形的渐变。渐变的颜色可以由两种或多种

33、颜色组成，每种颜色通过一 个vstop标记来定义。使用linearGradient元素定义渐变的语法格式如下。linearGradient元素的属性中，id属性为 渐变色指定唯一的名称，以便引用该渐变色。!-用stop元素添加颜色信息渐变色的成员色使用stop元素定义，语法格式如下。stop元素的offset属性用于定义该成员色的作用范围，该属性取值从0%至! 100%(或者是0 到1)；通常第一种颜色设置成0% ,最后一种设置成100%。stop-color属性：定义该成员色的颜色。stop-opacity属性：定义成员色的透明度，取值范围在。到1之间。stop元素的属性也可以使用CSS定义

34、，它支持class, id等标准HTML的属性。2.操作题(1 )使用gx use、defs等元素，以及translate% scale等方法完成如图7-15所示效果，其中三个房子图案分别填充不同的颜色，每种形状后两个图案的缩放比例分别为0.8和0.6oC D file:/D:/HTML5/new%2 =图7-15重用和缩放效果a house and people/定义组合图形房子 House with door/定义组合图形男人 Male human/定义组合图形女人g id=woman” style=nfill:none;stroke:black;stroke-width:2H Female humanuse xlink:href=n#woman transform=Htranslate(308,0) scale(0.6)n/(2 )使用linearGradient元素定义黑、黄、红三色组成的线性渐变，并复用此渐变色修改渐变色的方向，绘制如图7-16所示的四个圆角矩形。C D file:/D:/Hl =图7-16投影