HTML5与CSS3web前端开发技术复习题答案解析.pdf

.第一章第一章1 1简答题简答题1 在 Web 前端开发方面,HTML5 与 HTML4 比较,主要解决哪几方面的问题？HTML5 的核心在于解决当前 Web 开发中存在的各种问题。一是解决 Web 浏览器之间的兼容性问题。在一个浏览器上正常显示的网页或运行的 Web应用程序,很可能在另一个浏览器上不能显示或显示效果不一致；二是文档结构描述的问题。HTML4 之前的各版本中,HTML 文档的结构一般用 div 元素描述,文档元素的结构含义不够清晰；三是使用HTML+CSS+JavaScript开发Web应用程序时,开发功能受到很大的限制,比如本地数据存储功能、多线程访问、获取地理位置信息等,这些都影响了用户的体验。2HTML5 新增的全局属性有哪几个？描述其主要功能。HTML5 新增的全局属性,是指可以对任何元素都使用的属性。功能如下所示。属性accesskeyclasscontextmenudirdraggabledropzonehiddenidlangspellcheckstyletabindextitle描述规定访问元素的键盘快捷键规定元素的类名用于规定样式表中的类。规定元素的上下文菜单。规定元素中容的文本方向。规定是否允许用户拖动元素。规定当被拖动的项目/数据被拖放到元素中时会发生什么。规定该元素是无关的。被隐藏的元素不会显示。规定元素的唯一 ID。规定元素中容的语言代码。规定是否必须对元素进行拼写或语法检查。规定元素的行样式。规定元素的 tab 键控制次序。规定有关元素的额外信息。HTML5 新增是是是是是是contenteditable规定是否允许用户编辑容。3HTML5 是下一代 Web 语言的开发框架,典型特性有哪些？HTML5从 标 记 语 言 的 功 能 提 升 到 下 一 代Web语 言 的 开 发 框 架 , 他 集 成 了HTML+CSS3+JavaScript 的 Web 应用框架。 。良好的语义特性。HTML5 支持微数据与微格式,增加的各种元素赋予网页更好的意义和结构,适于构建对程序、 对用户都更有价值的数据驱动的 Web 应用。 HTML5 增加了 section 元素、 article元素、nav 元素以及 aside 元素等结构元素。强大的绘图功能。通过使用 Canvas API 动态地绘制各种效果精美的图形,也可以通过 SVG绘制可伸缩矢量图形。增强的音视频播放和控制功能。新增了 audio 和 video 元素,可以不依赖任何插件而播放音频和视频。HTML5 的数据存储和数据处理的功能。包括离线应用、 Web 通信、 本地存储 等功能,HTML5 还支持 WebSQL 和 IndexedDB 等轻量级数据库,增强了数据存储和数据检索能力。获取地理位置信息。HTML5 新增了 Geolocation API 规,应用于移动设备中的地理定位。提高页面响应的多线程。HTML5 新增了 Web Workers 来实现多线程功能。通过 Web Workers,1 / 40.将耗时较长的处理交给后台线程,降低 Web 服务的响应时间,有利于增强用户体验。方便用户处理文件和访问文件系统的文件文件 API 。 HTML5 的文件 API 包括 FileReader API和 File SystemAPI。除了上面介绍的 HTML5 的特性之外,HTML5 还有管理浏览器历史记录的 History API。HTML5可以通过脚本语言在浏览器历史记录中添加项目,以及在不刷新页面的前提下显示地改变浏览器地址栏中的 URL 地址；而 HTML5 的拖放功能可以使用 mousedown、mousemove、mouseup 等方法来实现拖放操作。4HTML5 文档结构的 HTML4 之前的文档结构有哪些变化？容类型 。 HTML5 的文件扩展名与容类型与之前的 HTML 版本相同。 但. DOCTYPE声明 做了简化,该声明适用所有 HTML。声明如下：在 HTML5 中,直接指定 meta 标记的 charset 属性可以设置字符编码 ,如下所示。 从 HTML5 开始,对于 HTML 文件的字符编码推荐使用 UTF-8。操作题略。第二章第二章1 1简答题简答题1 简述 HTML 文档的基本结构元素的功能。HTML 文档的基本结构元素包括、等。和标记表示该文档是 HTML 文档。有时标记可省略,因为.html 或.htm文件被 Web 浏览器默认为是 HTML 文档。 和标记表示的是文档头部信息 ,一般包括标题和主题信息 ,该部分信息不会显示在页面正文中。一些 CSS 样式定义、JavaScript 脚本也可以放到文档的头部。和标记是网页的主体信息,是显示在页面上的容,各种网页元素,包括文字、 表格和图片等信息都将放到这个标记。如果为 body 元素设置 CSS 样式,还可以实现背景、边距、字体等样式的变化。2HTML5 增加的 article、section、nav、aside 等结构元素功能。HTML 5 增加了 article、section、nav、aside、header、footer 等布局元素,以实现更好的语义解释。 但这些结构元素定义的是增强了语义的 div 块,是 HTML 页面按逻辑进行分割后的单位,并没有显示效果articlearticle 元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的容。 例如,一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。sectionsection 元素用于定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的容,会在文档流中开始一个新的节。navnav 元素是一个可以用作页面导航的组 ,其中的导航元素到其他页面或当前页面的其他部分。asideaside 标签用来承载非正文的容,被视为页面里面一个单独的部分。它包含的容与页面的主要容是分开的,可以被删除,而不会影响到网页的容、章节或是页面所要传达的信息。headerheader 元素是一种具有引导和导航作用的结构元素 ,通常用来放置整个页面或页面的一个容区域的标题,但也可以包括表格、logo 图片等容。footefooter 元素一般作为其上层容器元素的脚注3HTML 为什么要使用字符实体？列举出 5 个常用的字符实体名称。2 / 40.一些字符在 HTML 中拥有特殊的含义,比如小于号 用于定义 HTML 标记的开始。 如果用户希望浏览器正确地显示这些字符,需要在 HTML 源码中插入字符实体。常见的字符实体如下。显示结果&操作题略。描述空格小于号大于号和号引号撇号节注册商标乘号除号实体名称 <>&"' §©®×÷第三章第三章1 1简答题简答题1 定义列表的标记有哪几种？各种列表标记之间都可以嵌套使用吗？HTML 中的列表元素有 3 种形式有序列表、无序列表和自定义列表。有序列表由标记对实现,在标记之间使用成对的 标记添加列表项目。无序列表由成对的标记对实现,标记之间使用成对的 标记可添加列表项目。自定义列表以标记开始,自定义列表项目以开始,自定义列表的解释以开始。各种列表标记之间都可以嵌套使用,例如,自定义列表的一个嵌 套。自定义列表示例 用户名618 个字符,需以字母开头 first Namefdsdffddsfds last Namefdfdfdsdsssdf 密码616 个字符,区分大小写 2 在 HTML 文档中插入图像使用什么标记？该标记有哪些常用属性？分别实现什么功能？使用标记插入图像,语法格式如下。3 / 40.该标记含有多个属性,具体的属性及功能如表所示。其中,width 属性、height 属性、border属性、align 属性已经不建议使用,而是通过 CSS 来描述。属性名srctitlewidth/heightborderalign说明图像地址添加图像的替代文字设置图像宽度/高度设置图像边框设置图像对齐方式3 绝对路径、相对路径和根路径的区别是什么？绝对路径绝对路径指文件的完整路径,包括文件传输的协议、FTP 等,一般用于的外部,相对路径是相对路径是指相对于当前文件的路径,它包含了从当前文件指向目的文件的路径 ,适用于的部。根路径的设置以/开头,后面紧跟文件路径,例如：/download/index.html。根路径的设置也适用于部的建立,一般情况下不使用根路径。根路径必须在配置好的服务器环境中才能使用。4 如何为网页添加超？定义超时如何指定打开文件的目标窗口？有几种目标窗口形式？在 HTML 文件中,使用标记来定义超,具体对象通过标记中的 href 属性来设置。定义超的语法格式如下。标题target 属性指定用于打开的目标窗口,默认方式是原窗口,其属性值如表所示。属性值parentblankselftop在新窗口中打开在同一窗口中打开,和默认值一致在浏览器的整个窗口中打开,忽略任何框架说明当前窗口的上级窗口,一般在框架中使用2 2操作题操作题1 使用无序列表标记和有序列表标记定义如图 3-23 所示的嵌套列表,文件可自定义或输入#。嵌套列表示例学生选课信息必修课公共必修课计算机基础大学外语专业必修课选修课公共选修课专业选修课4 / 40.图 3-23嵌套列表效果2 在网页中插入图像,并对图像做如下设置。图像宽为浏览器窗口的一半,高为浏览器窗口的 1/4；图像边框宽5 像素；替代文字为图片欣赏；图像显示在文字左侧。3 使用表格及表格嵌套技术等,对网页做如图 2-43 所示的布局设计。 表格宽度为 600 像素； 可以先后插入 4 个 22 的表格,将每个表格第一行第一个单元格设置为跨 2 竖列,也可以根据图示,自定义表格结构； 标题单元格的背景颜色可自定义。图 3-24 表格示例第四章第四章1 1简答题简答题1 1 表单中文本框和密码框在定义方法和实现效果上有什么区别？表单中文本框和密码框在定义方法和实现效果上有什么区别？将标记中的 type 属性值设置为 text,就可以在表单中插入文本框。在此文本框中可以输入任何类型的数据,但输入的数据将以单行显示,不会换行。 例如,使用标记输入的代码如下。：其中,name 属性用于定义文本框的名称。 maxlength 和 size 属性用于指定文本框的宽度和允许用户输入最大的字符数,更多情况下,采用 CSS 设置。value 指定文本框的默认值。将标记中的 type 属性值设置为 password,就可以在表单中插入密码框,涉及到各属性的含义与文本框相同。在此密码框中可以输入任何类型的数据,这些数据都将以实心圆点的形式显示,以保护密码的安全,例如：密码：2 2 在表单中定义一组单选按钮和一组复选按钮在方法上有什么区别？在表单中定义一组单选按钮和一组复选按钮在方法上有什么区别？复选框允许在一组选项中选择任意多个选项。将标记中的 type 属性值设置为checkbox,就可以在表单中插入复选框。通过复选框,用户可以在网页中实现多项选择。例如,请选择：其中,value 属性指定的复选框被选中是该控件的值,checked 用来设置复选框默认被选中。单选按钮表示互相排斥的选项。在某单选按钮组 由两个或多个同名的按钮组成中选择一个按钮时,就会取消对该组中其他所有按钮的选择。将标记中的 type 属性值设置为 radio,就可以在表单中插入一个单选按钮。在选中状态时,按钮中心会有一个实心圆点。3 3 简述简述 HTML5HTML5 新增加的新增加的 formform 属性、属性、formmethodformmethod 属性、属性、placeholderplaceholder 属性、属性、autocompleteautocomplete属性的功能。属性的功能。在HTML5中,可以将表单元素写在页面上的任何位置,然后给该元素指定一个form属性,属性值为该表单的 idid 是表单的惟一属性标识,通过这种方式声明该元素属于哪个具体的表单。HTML5 中使用 formmethod 属性对每个表单元素分别指定不同的提交方法。placeholder 是指当文本框处于未输入状态时文本框中显示的输入提示。例如：autocomplete 属性是辅助输入的自动完成功能,其值为onoff与三类值。 不指定时,使用浏览器的默认值 取决于各浏览器的设定。该属性设置为 on 时,可以显式指定待输入的数据列5 / 40.表。 如果使用datalist元素与list属性提供待输入的数据列表,自动完成时,可以将该 datalist元素中的数据作为待输入的数据在文本框中自动显示。4HTML54HTML5 中中 inputinput 标记的标记的 typetype 属性增加的类型包括属性增加的类型包括 numbernumber、rangerange、datedate、timetime 等等, ,说明其说明其功能功能。将 input 标记中的 type 属性设置为 number,可以在表单中插入数值输入域,还可以限定输入数字的围。将 input 标记中的 type 属性设置为 range,可以在表单中插入表示数值围的滑动条,还可以限定可接受数值的围。只要将 input 标记中的 type 属性设置为 datedate、time,time,可以完成网页中日期选择器的定义。2 2操作题操作题制作如图 4-11 所示的表单。图 4-11表单示例2.操作题4-表单考试报名表 用户名： 文理选择： 文 科 理科综合 报考科目： 数学 语文 外语 物理 化学 生物 政治 历史 地理 报考级别： A6 / 40. B C 第五章第五章1 1简答题简答题1HTML51HTML5 中插入视频使用什么标记？描述其语法格式及含义、该标记的属性及功能。中插入视频使用什么标记？描述其语法格式及含义、该标记的属性及功能。HTML5 提供了视频容的标准接口,规定使用标记来描述和播放视频。标记语法格式如下：替代文字如果浏览器不支持 url 指定的 video 元素,将显示替代文字。 标记常用的属性及说明如表 5-1 所示。表 5-1属性srcautoplaycontrolswidthheightlooppreloadstartTimecurrentTimedurationvolumemuted值urlautoplaycontrols像素像素loopauto/none/metadata01true/false标记常用属性及说明说明要播放视频的 URL视频就绪后立刻播放添加播放、暂停和音量等控件设置视频播放器的宽度设置视频播放器的高度设置视频是否循环播放视频在页面加载时开始加载,并预备播放读取媒体的开始播放时间,通常为 0读取或修改媒体的当前播放位置读取媒体总的播放时间读取或修改媒体的播放音量读取或修改媒体的静音状态2 2 简述简述 videovideo 元素常用方法和事件各列出元素常用方法和事件各列出 3 3 种即可。种即可。video元素还有一系列重要的方法和事件。 调用这些方法和事件可以访问和控制 video对象。表 5-3 给出了部分 video 元素常用的方法和事件。表 5-3方法/事件playpauseloadplay 事件pause 事件error 事件标记常用方法和事件功能播放媒体,paused 属性的值自动修改为 false暂停播放,paused 属性的值自动修改为 true重新载入媒体进行播放执行 play方法时触发执行 pause方法时触发获取媒体数据错误时触发7 / 40.timeupdate 事件durationchange事件当前播放位置发生改变时触发播放时长被改变3 3 简述简述 tracktrack 元素的功能和常用的属性。元素的功能和常用的属性。track 元素可以为使用 video 元素播放的视频或使用 audio 元素播放的音频添加字幕、标题或章节等文字信息。 track 元素为视频添加字幕的过程和为音频添加字幕的过程是相同的。 track元素是video元素的子元素,标记必须被书写在 video元素的开始标记与结束标记之间。如果使用标记描述媒体文件,则标记必须被书写在标记之后。track 元素是一个空元素,其开始标记与结束标记之间不包含任何容。 表 5-6 给出了标记的常用属性及说明。表 5-6属性src 属性srclang 属性default 属性kind 属性说明src 属性用于指定字幕文件的存放路径,该属性是一个必须使用的属性。 src 属性的属性值可以是一个绝对 URL 路径,也可以是一个相对 URL 路径。srclang 属性用于指定字幕文件的语言。例如,srclang=en 和 srclang=zh-cn分别表示字幕文件为英语和汉语。default 属性用于通知浏览器在用户没有选择使用其他字幕文件的时候可以使用当前track 文件kind 属性用于指定字幕文件 的种类。可以对 kind 属性指定的属性值为 subtitles、captions、descriptions、chapters与 metadata标记的常用属性及说明2 2操作题操作题在网页中插入视频,并对视频做如下设置。 320 像素宽,240 像素高； 显示视频播放器控件； 循环播放； 首选播放 OGG 格式文件,其次分别为 MP4 格式和 WEBM 格式此处需准备 3 种不同格式的文件； 若不支持 video 元素,则显示提示文字请选用其他高版本浏览器尝试播放此视频。 请选用其他高版本浏览器尝试播放此视频2 使用 HTML5 视频字幕制作工具创建 WebVTT 文件,并通过 track 元素为一个视频文件添加字幕。创建的 WebVTT 文件文件如下：WEBVTT00:00.000 - 00:31.8448 / 40.茫茫的天涯茫茫的路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.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.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.7159 / 40.我和你飞翔在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草原在你我的心田引用的文件如下： 第六章第六章1 1简答题简答题1 1 使用使用 Canvas APICanvas API 绘图时绘图时, ,直线有几种线帽形态？直线有几种线帽形态？lineCaplineCap 属性有哪些取值？分别表示什属性有哪些取值？分别表示什么含义？么含义？lineCap 用于设置或返回线帽线条的结束端点样式,可以有以下三种取值。butt：默认属性值,不为直线添加端点round：为直线添加圆形端点square：为直线添加正方形端点2Canvas2Canvas 使用什么方法在网页中绘制圆形？其中需要几个参数？每个参数的含义是什么？使用什么方法在网页中绘制圆形？其中需要几个参数？每个参数的含义是什么？Canvas API 使用绘制图形路径来绘制圆形。绘制图形路径时,需要使用绘图上下文对象 ctx的 arc方法。该方法的定义如下。ctx.arc其中,x、y 分别为绘制圆形的圆心横坐标和纵坐标,radius 为圆形半径,startAngle 为开始角度,endAngle 为结束角度,anticlockwise 为是否按逆时针方向进行绘制。arc方法通过指定开始角度与结束角度 ,除了可以用来绘制圆形,还可以绘制圆弧,这两个角度就决定了绘制的弧度。anticlockwise 为布尔值参数,参数值为 true 时,按逆时针绘制；参数值为 false 时,则按顺时针绘制。3 3 路径创建完成后路径创建完成后, ,为什么要使用图形上下文对象的为什么要使用图形上下文对象的 closePathclosePath方法关闭路径？方法关闭路径？路径创建完成后,使用绘图上下文对象的 closePath方法关闭路径。如果绘制路径时未使用 closePath方法,则绘制出的是没有封闭的路径,除非使用 beginPathj开始新的路径绘制。4Canvas4Canvas 定义颜色值有哪几种方法？定义颜色值有哪几种方法？Canvas 绘图时,绘图上下文的 fillStyle 属性与 strokeStyle 属性用来指定填充的颜色或边框的颜色,颜色定义方法与 CSS 中颜色定义方法基本相同。下面是定义颜色的各种方法。10 / 40.颜色名：直接使用颜色的英文名称作为属性值,例如,blue 表示蓝色。#rrggbb：用一个 6 位的十六进制数表示颜色,例如,#0000FF 表示蓝色。#rgb：是#rrggbb 的一种简写方式,例如,#0000FF 可以表示为#00F,#00FFDD 表示为#0FD。rgb：使用十进制数表示颜色的红、绿、蓝分量,其中,rrr、ggg、bbb 都是0255 的十进制整数。例如,rgb代表黑色。rgb：使用百分比表示颜色的红、绿、蓝分量,例如,rgb表示 rgb。rgbarrr,ggg,bbb,alpha：使用十进制数表示颜色的红、绿、蓝分量,alpha 表示颜色的透明度,例如 rgba表示半透明的绿色。2 2操作题操作题1绘制如图 6-28 所示星空的效果,其中黑色矩形宽 800像素、 高 400像素,在矩形围绘制 200颗大小、位置、角度随机的黄色五角星。图 6-28星空的效果 5star function draw var canvas=document.getElementById; var context=canvas.getContext; context.fillStyle=black; context.fillRect; forvar i=0;i var r=Math.random*10+10; var x=Math.random*canvas.width; var y=Math.random*canvas.height; var a=Math.random*360; drawStar function drawStar cxt.beginPath; forvar i=0;icxt.lineToMath.cos/180*Math.PI*R+x,-Math.sin/180*Math.PI*R+y;cxt.lineToMath.cos/180*Math.PI*r+x,-Math.sin/180*Math.PI*r+y; cxt.fillStyle=yellow cxt.closePath; cxt.fill; body onload=draw;你的浏览器不支持Canvas11 / 40.2 在页面中绘制如图 6-29 所示的四种不同渐变色的矩形。图 6-29不同渐变色的四个矩形 Gradient: Linear function draw var ctx = document.getElementById.getContext; /创建渐变对象 var lingrad = ctx.createLinearGradient; lingrad.addColorStop; lingrad.addColorStop; lingrad.addColorStop; var lingrad1 = ctx.createLinearGradient; lingrad1.addColorStop; lingrad1.addColorStop; lingrad1.addColorStop; var lingrad2 = ctx.createLinearGradient; lingrad2.addColorStop; lingrad2.addColorStop; lingrad2.addColorStop; var lingrad3 = ctx.createLinearGradient; lingrad3.addColorStop; lingrad3.addColorStop; lingrad3.addColorStop; /把渐变对象赋值给填充和轮廓样式 /绘制形状 ctx.fillStyle = lingrad; ctx.fillRect; ctx.fillStyle = lingrad1; ctx.fillRect; ctx.fillStyle = lingrad2; ctx.fillRect; ctx.fillStyle = lingrad3; ctx.fillRect; body onload=draw;你的浏览器不支持Canvas3 使用 transform 和 arc 方法,绘制如图 6-30 所示的彩虹效果。图 6-30 彩虹效果 12 / 40. function draw var canvas = document.getElementById; if return false; var context = canvas.getContext; /* 定义颜色 */ var colors = #FF0000, YELLOW, #0D0, #00F, #C0C; /* 定义线宽 */ context.lineWidth = 10; context.transform; /* 循环绘制椭圆 */ for var i = 0; i /* 定义每次向下移动10个像素的变换矩阵 */ context.transform; /* 设定颜色*/ context.strokeStyle = colorsi; /* 绘制圆弧*/ context.beginPath; context.arc; context.stroke; body onload=draw;你的浏览器不支持Canvas第七章第七章1 1简答题简答题1 在网页中使用 SVG 与 Canvas 进行绘图,有哪些不同之处？附表列出了 canvas 绘图与 SVG 绘图的一些不同之处。canvascanvas 通过 JavaScript 来绘制 2D 图形canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成 ,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括已被图形覆盖的对象。依赖分辨率不支持事件处理弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏 ,其中的许多对象会被频繁重绘SVGSVG 是一种使用 XML 描述 2D 图形的语言在 SVG 中,每个被绘制的图形均被视为对象。如果SVG 对象的属性发生变化 ,那么浏览器能够自动重现图形。不依赖分辨率支持事件处理最适合带有大型渲染区域的应用程序比如谷歌地图复杂度高会减慢渲染速度 任何过度使用 DOM 的应用都不快不适合游戏应用2 列举出 3 种 path 元素用于绘制路径的命令有哪些？分别是什么功能？具体怎么定义？13 / 40.path 元素用来定义路径,使用这个元素可以实现任何其他的图形 ,不仅包括基本形状,也可以实现像贝塞尔曲线那样的复杂形状。例如： 具体命令及功能如下。命令含义MLHVAmovetolinetohorizontal linetovertical linetoelliptical Arc参数x,yx,yxy说明将画笔移动到点画笔从当前的点绘制线段到点画笔从当前的点绘制水平线段到点画笔从当前的点绘制竖直线段到点rx, ry x-axis-rotationlarge-arc-flag sweep-flag画笔从当前的点绘制一段圆弧到点x yx1, y1,x2 y2,x yx2 y2,x yx1 y1,x yx y无参数画笔从当前的点绘制一段三次贝塞尔曲线到点特殊版本的三次贝塞尔曲线 绘制二次贝塞尔曲线到点特殊版本的二次贝塞尔曲线绘制闭合图形,如果 d 属性不指定 Z 命令,则绘制线段,而不是封闭图形。CSQTZcurvetosmooth curvetoquadraticcurvesmoothBelzierclosepathBelzierquadratic3stroke-dasharray3stroke-dasharray 属性在绘制虚线时如何设置属性在绘制虚线时如何设置, ,参数与虚线效果有什么关系？参数与虚线效果有什么关系？stroke-dasharray属性用于绘制虚实线,其格式如下。stroke-dasharray=value,value,该属性由一系列数字组成,这些数字必须用逗号隔开。属性中如果包含空格,不作为分隔符。每个数字定义了实线段的长度,分别是按照绘制、不绘制这个顺序循环下去。4SVG4SVG使用使用linearGradientlinearGradient元素定义渐变色时元素定义渐变色时,和和元素的功能分别是什么？其中元素的功能分别是什么？其中的的 offsetoffset 属性和属性和 stop-colorstop-color 属性用于实现什么功能？属性用于实现什么功能？线性渐变就是一系列颜色沿着一条直线过渡,SVG也使用linearGradient 元素定义线性渐变,并可以定义水平、垂直或角形的渐变。渐变的颜色可以由两种或多种颜色组成,每种颜色通过一个标记来定义。使用 linearGradient 元素定义渐变的语法格式如下。linearGradient 元素的属性中,id 属性为渐变色指定唯一的名称,以便引用该渐变色。 渐变色的成员色使用 stop 元素定义,语法格式如下。stop 元素的 offset 属性用于定义该成员色的作用围,该属性取值从 0%到 100%；通常第一种颜色设置成 0%,最后一种设置成 100%。stop-color 属性：定义该成员色的颜色。stop-opacity 属性：定义成员色的透明度,取值围在 0 到 1 之间。stop 元素的属性也可以使用 CSS 定义,它支持 class、id 等标准 HTML 的属性。14 / 40.2 2操作题操作题1 使用 g、use、defs 等元素,以及 translate、scale 等方法完成如图 7-15 所示效果,其中三个房子图案分别填充不同的颜色,每种形状后两个图案的缩放比例分别为 0.8 和 0.6。图 7-15重用和缩放效果 a house and people / 定义组合图形房子 House with door / 定义组合图形男人 Male human / 定义组合图形女人 Female human use xlink:href=#house style=fill:#0f0; transform=translate scale/ use xlink:href=#house style=fill:#00f; transform=translate scale/ use xlink:href=#man transform=translate scale/ use xlink:href=#man transform=translate scale/ use xlink:href=#woman transform=translate/ use xlink:href=#woman transform=translate scale/ use xlink:href=#woman transform=translate scale/2 使用 linearGradient 元素定义黑、黄、红三色组成的线性渐变,并复用此渐变色修改渐变色的方向,绘制如图 7-16 所示的四个圆角矩形。图 7-16 投影效果 / 定义线性渐变Grad1,默认水平方向 15 / 40. / 复用线性渐变方案Grad1,定义垂直方向线性渐变 Grad2和角形渐变Grad3 /分别使用3 种渐变对象 ,填充3 个图形的部和边框 rect x=10 y=10 rx=15 ry=15 width=100 height=100 fill=url/ rect x=130 y=10 rx=15 ry=15 width=100 height=100fill=url/ rect x=10 y=120 rx=15 ry=15 width=100 height=100fill=url/ rect x=130 y=120 rx=15 ry=15 width=100 height=100fill=url/3 使用 feGaussianBlur 元素,并结合 translate、 skewX 等函数为图形定义经过高斯模糊的投影效果,如图 7-3 所示。图 7-17 投影效果 / 定义高斯模糊滤镜drop-shadow / 定义组合图形house /绘制两个图形 ,对第2 个图形应用高斯模糊并作平移 use xlink:href=#house1 filter=url transform=translate skewX/第八章第八章1 1简答题简答题1 1 计算机、平板电脑、手机等电子类设备设备可以通过哪些途径获取地理位置信息？计算机、平板电脑、手机等电子类设备设备可以通过哪些途径获取地理位置信息？IP 地址。通过 IP 地址获取位置信息通常对有固定 IP 地址的设备很有效,但有时不够准确。GPS。GPS 定位较准确,它利用设备上的 GPS 芯片进行定位,误差围可以缩小到几米之。移动基站或无线 Wi-Fi。根据用户与移动基站或无线 Wi-Fi 热点的距离,通过三角定位的方式来获取位置信息,优点是定位速度较快,而且不需要配备精密的 GPS 芯片,缺点则是定位较粗略,误差围可能是几米到几千米。用户输入。一些 Web 应用提供一个接口让用户输入地址、邮政编码或选择所在的区域,可以16 / 40.使用这些信息获得位置信息 ,这样就可以避免误差围太大或延迟时间太久 ,这也是一种实用的定位方法。2 2 简述简述 Geolocation APIGeolocation API 中描述地理位置信息的属性及其含义。中描述地理位置信息的属性及其含义。在 Geolocation API 的Position 对象