admin 管理员组文章数量: 887032
2023年12月18日发(作者：bmob是干嘛的)
WORD格式可编辑
第一章
1．简答题
（1）在Web前端开发方面，HTML5与HTML4比较，主要解决哪几方面的问题？
HTML5的核心在于解决当前Web开发中存在的各种问题。
一是解决Web浏览器之间的兼容性问题。在一个浏览器上正常显示的网页（或运行的Web应用程序），很可能在另一个浏览器上不能显示或显示效果不一致；
二是文档结构描述的问题。HTML4之前的各版本中，HTML文档的结构一般用div元素描述，文档元素的结构含义不够清晰；
三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比如本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验。
（2）HTML5新增的全局属性有哪几个？描述其主要功能。
HTML5新增的全局属性，是指可以对任何元素都使用的属性。功能如下所示。
属性
accesskey
class
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
描述
规定访问元素的键盘快捷键
规定元素的类名（用于规定样式表中的类）。
规定元素的上下文菜单。
规定元素中内容的文本方向。
规定是否允许用户拖动元素。
规定当被拖动的项目/数据被拖放到元素中时会发生什么。
规定该元素是无关的。被隐藏的元素不会显示。
规定元素的唯一 ID。
规定元素中内容的语言代码。
规定是否必须对元素进行拼写或语法检查。
规定元素的行内样式。
规定元素的 tab 键控制次序。
规定有关元素的额外信息。
HTML5新增
是
是
是
是
是
是
contenteditable 规定是否允许用户编辑内容。
（3）HTML5是下一代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规范，应用于移动设备中的地理定位。
专业知识整理分享
WORD格式可编辑
提高页面响应的多线程。HTML5新增了Web Workers来实现多线程功能。通过Web Workers，将耗时较长的处理交给后台线程，降低Web服务的响应时间，有利于增强用户体验。
方便用户处理文件和访问文件系统的文件文件API 。HTML5的文件API包括FileReader API和File SystemAPI。
除了上面介绍的HTML5的特性之外，HTML5还有管理浏览器历史记录的History API。HTML5可以通过脚本语言在浏览器历史记录中添加项目，以及在不刷新页面的前提下显示地改变浏览器地址栏中的URL地址；而HTML5的拖放功能可以使用mousedown、mousemove、mouseup等方法来实现拖放操作。
（4）HTML5文档结构的HTML4之前的文档结构有哪些变化？
内容类型(ContentType) 。HTML5的文件扩展名与内容类型与之前的HTML版本相同。但.
DOCTYPE声明 做了简化，该声明适用所有HTML。声明如下：
在HTML5中，直接指定meta标记的charset属性可以设置字符编码，如下所示。
charset="utf-8">
从HTML5开始，对于HTML文件的字符编码推荐使用UTF-8。
操作题略。
第二章
1．简答题
（1）简述HTML文档的基本结构元素的功能。
HTML文档的基本结构元素包括、
、等。和标记表示该文档是HTML文档。有时标记可省略，因为.html或.htm文件被Web浏览器默认为是HTML文档。
和标记表示的是文档头部信息，一般包括标题和主题信息，该部分信息不会显示在页面正文中。一些CSS样式定义、JavaScript脚本也可以放到文档的头部。 和标记是网页的主体信息，是显示在页面上的内容，各种网页元素，包括文字、表格和图片等信息都将放到这个标记内。如果为body元素设置CSS样式，还可以实现背景、边距、字体等样式的变化。（2）HTML5增加的article、section、nav、aside等结构元素功能。
HTML 5增加了article、section、nav、aside、header、footer等布局元素，以实现更好的语义解释。但这些结构元素定义的是增强了语义的div块，是HTML页面按逻辑进行分割后的单位，并没有显示效果
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
例如，一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。
section元素用于定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。
nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。
aside标签用来承载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区域的标题，但也可以包括表格、logo图片等内容。
专业知识整理分享
WORD格式可编辑
footer元素一般作为其上层容器元素的脚注
（3）HTML为什么要使用字符实体？列举出5个常用的字符实体名称。
一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标记的开始。如果用户希望浏览器正确地显示这些字符，需要在 HTML 源码中插入字符实体。常见的字符实体如下。
显示结果
<
>
&
"
'
§
©
®
×
÷
操作题略。
描述
空格
小于号
大于号
和号
引号
撇号
节
版权
注册商标
乘号
除号
实体名称
<
>
&
"
' (IE不支持)
§
©
®
×
÷
第三章
1．简答题
（1）定义列表的标记有哪几种？各种列表标记之间都可以嵌套使用吗？
HTML中的列表元素有3种形式——有序列表、无序列表和自定义列表。
有序列表由
无序列表由成对的
自定义列表以
- 标记开始，自定义列表项目以
- 开始，自定义列表的解释以
- 开始。
各种列表标记之间都可以嵌套使用，例如，自定义列表的一个嵌 套。
自定义列表示例 - 用户名
- 6~18个字符，需以字母开头
- first Name
- fdsdffddsfds
- last Name
- fdfdfdsdsssdf
- 密码
- 6~16个字符，区分大小写
专业知识整理分享
WORD格式可编辑
（2）在HTML文档中插入图像使用什么标记？该标记有哪些常用属性？分别实现什么功能？
使用
标记插入图像，语法格式如下。
该标记含有多个属性，具体的属性及功能如表所示。其中，width属性、height属性、border属性、align属性已经不建议使用，而是通过CSS来描述。
属性名
src
title
width/height
border
align
说明
图像地址
添加图像的替代文字
设置图像宽度/高度
设置图像边框
设置图像对齐方式
（3）绝对路径、相对路径和根路径的区别是什么？
绝对路径指文件的完整路径，包括文件传输的协议HTTP、FTP等，一般用于网站的外部链接，
相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，适用于网站的内部链接。
根路径的设置以“/”开头，后面紧跟文件路径，例如：/download/。根路径的设置也适用于内部链接的建立，一般情况下不使用根路径。根路径必须在配置好的服务器环境中才能使用。
（4）如何为网页添加超链接？定义超链接时如何指定打开链接文件的目标窗口？有几种目标窗口形式？
在HTML文件中，使用标记来定义超链接，具体链接对象通过标记中的href属性来设置。定义超链接的语法格式如下。链接标题
target属性指定用于打开链接的目标窗口，默认方式是原窗口，其属性值如表所示。
属性值
parent
blank
self
top
在新窗口中打开
在同一窗口中打开，和默认值一致
在浏览器的整个窗口中打开，忽略任何框架
说明
当前窗口的上级窗口，一般在框架中使用
2．操作题
（1）使用无序列表标记
- 和有序列表标记
- 定义如图3-23所示的嵌套列表，链接文件可自定义或输入“#”。
嵌套列表示例 学生选课信息
图3-23 嵌套列表效果
（2）在网页中插入图像，并对图像做如下设置。
图像宽为浏览器窗口的一半，高为浏览器窗口的1/4；图像边框宽5像素；替代文字为“图片欣赏”；图像显示在文字左侧。
（3）使用表格及表格嵌套技术等，对网页做如图2-43所示的布局设计。
① 表格宽度为600像素；
② 可以先后插入4个2×2的表格，将每个表格第一行第一个单元格设置为跨2竖列，也可以根据图示，自定义表格结构；
③ 标题单元格的背景颜色可自定义。
图3-24 表格示例
专业知识整理分享
WORD格式可编辑
第四章
1．简答题
（1）表单中文本框和密码框在定义方法和实现效果上有什么区别？
将标记中的type属性值设置为text，就可以在表单中插入文本框。在此文本框中可以输入任何类型的数据，但输入的数据将以单行显示，不会换行。例如，使用标记输入姓名的代码如下。
姓名：
其中，name属性用于定义文本框的名称。maxlength和size属性用于指定文本框的宽度和允许用户输入最大的字符数，更多情况下，采用CSS设置。value指定文本框的默认值。
将标记中的type属性值设置为password，就可以在表单中插入密码框，涉及到各属性的含义与文本框相同。在此密码框中可以输入任何类型的数据，这些数据都将以实心圆点的形式显示，以保护密码的安全，例如：
密码：
（2）在表单中定义一组单选按钮和一组复选按钮在方法上有什么区别？
复选框允许在一组选项中选择任意多个选项。将标记中的type属性值设置为checkbox，就可以在表单中插入复选框。通过复选框，用户可以在网页中实现多项选择。例如，
请选择：
其中，value属性指定的复选框被选中是该控件的值，checked用来设置复选框默认被选中。
单选按钮表示互相排斥的选项。在某单选按钮组（由两个或多个同名的按钮组成）中选择一个按钮时，就会取消对该组中其他所有按钮的选择。将标记中的type属性值设置为radio，就可以在表单中插入一个单选按钮。在选中状态时，按钮中心会有一个实心圆点。
（3）简述HTML5新增加的form属性、formmethod属性、placeholder属性、autocomplete属性的功能。
在HTML5中，可以将表单元素写在页面上的任何位置，然后给该元素指定一个form属性，属性值为该表单的id（id是表单的惟一属性标识），通过这种方式声明该元素属于哪个具体的表单。
HTML5中使用formmethod属性对每个表单元素分别指定不同的提交方法。
placeholder是指当文本框处于未输入状态时文本框中显示的输入提示。例如：
autocomplete属性是辅助输入的自动完成功能，其值为“on”“off”与“”三类值。不指定时，使用浏览器的默认值（取决于各浏览器的设定）。该属性设置为on时，可以显式指定待输入的数据列表。如果使用datalist元素与list属性提供待输入的数据列表，自动完成时，可以将该 datalist元素中的数据作为待输入的数据在文本框中自动显示。
（4）HTML5中input标记的type属性增加的类型包括number、range、date、time等，说明其功能。
将input标记中的type属性设置为number，可以在表单中插入数值输入域，还可以限定输入数字的范围。
将input标记中的type属性设置为range，可以在表单中插入表示数值范围的滑动条，还可以限定可接受数值的范围。
专业知识整理分享
WORD格式可编辑
只要将input标记中的type属性设置为date、time，可以完成网页中日期选择器的定义。
2．操作题
制作如图4-11所示的表单。
图4-11 表单示例
2.操作题（4）-表单 考试报名表
第五章
1．简答题
（1）HTML5中插入视频使用什么标记？描述其语法格式及含义、该标记的属性及功能。
HTML5提供了视频内容的标准接口，规定使用
如果浏览器不支持url指定的video元素，将显示替代文字。
表5-1
属性
src
autoplay
controls
width
height
loop
preload
startTime
currentTime
duration
volume
muted
值
url
autoplay
controls
像素
像素
loop
auto/none/metadata
0~1
true/false
说明
要播放视频的URL
视频就绪后立刻播放
添加播放、暂停和音量等控件
设置视频播放器的宽度
设置视频播放器的高度
设置视频是否循环播放
视频在页面加载时开始加载，并预备播放
读取媒体的开始播放时间，通常为0
读取或修改媒体的当前播放位置
读取媒体总的播放时间
读取或修改媒体的播放音量
读取或修改媒体的静音状态
（2）简述video元素常用方法和事件（各列出3种即可）。
video元素还有一系列重要的方法和事件。调用这些方法和事件可以访问和控制video对象。表5-3给出了部分video元素常用的方法和事件。
表5-3
方法/事件
play()
功能
播放媒体，paused属性的值自动修改为false
专业知识整理分享
WORD格式可编辑
pause()
load()
play事件
pause事件
error事件
timeupdate事件
durationchange事件
暂停播放，paused属性的值自动修改为true
重新载入媒体进行播放
执行play()方法时触发
执行pause()方法时触发
获取媒体数据错误时触发
当前播放位置发生改变时触发
播放时长被改变
（3）简述track元素的功能和常用的属性。
track元素可以为使用video元素播放的视频或使用audio元素播放的音频添加字幕、标题或章节等文字信息。track元素为视频添加字幕的过程和为音频添加字幕的过程是相同的。track元素是video元素的子元素，
表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．操作题
在网页中插入视频，并对视频做如下设置。
① 320像素宽，240像素高；
② 显示视频播放器控件；
③ 循环播放；
④ 首选播放OGG格式文件，其次分别为MP4格式和WEBM格式（此处需准备3种不同格式的文件）；
⑤ 若不支持video元素，则显示提示文字“请选用其他高版本浏览器尝试播放此视频”。
请选用其他高版本浏览器尝试播放此视频
专业知识整理分享
WORD格式可编辑
（2）使用HTML5视频字幕制作工具创建 WebVTT文件，并通过track元素为一个视频文件添加字幕。
创建的WebVTT文件文件如下：
WEBVTT
00: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.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
专业知识整理分享
WORD格式可编辑
奔驰的骏马越过山涧
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.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
草原在你我的心田
引用的文件如下：
专业知识整理分享
WORD格式可编辑
第六章
1．简答题
（1）使用Canvas API绘图时，直线有几种线帽形态？lineCap属性有哪些取值？分别表示什么含义？
lineCap用于设置或返回线帽（线条的结束端点）样式，可以有以下三种取值。
butt：默认属性值，不为直线添加端点
round：为直线添加圆形端点
square：为直线添加正方形端点
（2）Canvas使用什么方法在网页中绘制圆形？其中需要几个参数？每个参数的含义是什么？
Canvas API 使用绘制图形路径来绘制圆形。绘制图形路径时，需要使用绘图上下文对象ctx的arc()方法。该方法的定义如下。
(x,y,radius,startAngle,endAngle,anticlockwise)
其中，x、y分别为绘制圆形的圆心横坐标和纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按逆时针方向进行绘制。
arc()方法通过指定开始角度与结束角度，除了可以用来绘制圆形，还可以绘制圆弧，这两个角度就决定了绘制的弧度。anticlockwise为布尔值参数，参数值为true时，按逆时针绘制；参数值为false时，则按顺时针绘制。
（3）路径创建完成后，为什么要使用图形上下文对象的closePath()方法关闭路径？
路径创建完成后，使用绘图上下文对象的closePath()方法关闭路径。如果绘制路径时未使用closePath()方法，则绘制出的是没有封闭的路径，除非使用beginPathj()开始新的路径绘制。
（4）Canvas定义颜色值有哪几种方法？
Canvas绘图时，绘图上下文的fillStyle属性与strokeStyle属性用来指定填充的颜色或边框的颜色，颜色定义方法与CSS中颜色定义方法基本相同。下面是定义颜色的各种方法。
颜色名：直接使用颜色的英文名称作为属性值，例如，blue表示蓝色。
#rrggbb：用一个6位的十六进制数表示颜色，例如，#0000FF表示蓝色。
#rgb：是#rrggbb的一种简写方式，例如，#0000FF可以表示为#00F，#00FFDD表示为#0FD。
rgb(rrr,ggg,bbb)：使用十进制数表示颜色的红、绿、蓝分量，其中，rrr、ggg、bbb都是0～255的十进制整数。例如，rgb(0,0,0)代表黑色。
rgb(rrr%,ggg%,bbb%)：使用百分比表示颜色的红、绿、蓝分量，例如，rgb(50%,50%,50%)表示rgb(128,128,128)。
rgba(rrr,ggg,bbb,alpha）：使用十进制数表示颜色的红、绿、蓝分量，alpha表示颜色的透明度，例如rgba(0,128,0,0.5)表示半透明的绿色。
专业知识整理分享
WORD格式可编辑
2．操作题
（1）绘制如图6-28所示星空的效果，其中黑色矩形宽800像素、高400像素，在矩形范围内绘制200颗大小、位置、角度随机的黄色五角星。
图6-28 星空的效果
5star 专业知识整理分享
WORD格式可编辑
你的浏览器不支持Canvas
（2）在页面中绘制如图6-29所示的四种不同渐变色的矩形。
图6-29 不同渐变色的四个矩形
Gradient: Linear 你的浏览器不支持Canvas
（3）使用transform和arc方法，绘制如图6-30所示的彩虹效果。
图6-30 彩虹效果
你的浏览器不支持Canvas
第七章
1．简答题
（1）在网页中使用SVG与Canvas进行绘图，有哪些不同之处？
附表列出了canvas绘图与SVG绘图的一些不同之处。
canvas
canvas通过JavaScript来绘制2D图形
SVG
SVG是一种使用XML描述2D图形的语言
canvas是逐像素进行渲染的。在 canvas 中，在SVG中，每个被绘制的图形均被视为对象。如果一旦图形被绘制完成，它就不会继续得到浏览SVG对象的属性发生变化，那么浏览器能够自动重器的关注。如果其位置发生变化，那么整个场现图形。
景也需要重新绘制，包括已被图形覆盖的对象。
依赖分辨率
不支持事件处理
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
不依赖分辨率
支持事件处理
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
（2）列举出3种path元素用于绘制路径的命令有哪些？分别是什么功能？具体怎么定义？
path元素用来定义路径，使用这个元素可以实现任何其他的图形，不仅包括基本形状，也可以实现像贝塞尔曲线那样的复杂形状。例如：
stroke-linecap="round" stroke-width="2" fill="none"/>
具体命令及功能如下。
命令 含义
M
L
H
V
A
moveto
lineto
horizontal lineto
vertical lineto
elliptical Arc
参数
x,y
x,y
x
y
说明
将画笔移动到点(x,y)
画笔从当前的点绘制线段到点(x,y)
画笔从当前的点绘制水平线段到点(x,y0)
画笔从当前的点绘制竖直线段到点(x0,y)
rx, ry x-axis-rotation
large-arc-flag sweep-flag
画笔从当前的点绘制一段圆弧到点(x,y)
x y
x1, y1,x2 y2,x y
x2 y2,x y
画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
特殊版本的三次贝塞尔曲线(省略第一个控制点)
C
S
curveto
smooth curveto
专业知识整理分享
WORD格式可编辑
quadratic
curve
smooth
Belzier
closepath
Belzier
quadratic
Q
T
Z
x1 y1,x y
x y
无参数
绘制二次贝塞尔曲线到点(x,y)
特殊版本的二次贝塞尔曲线(省略控制点)
绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。
（3）stroke-dasharray属性在绘制虚线时如何设置，参数与虚线效果有什么关系？
stroke-dasharray属性用于绘制虚实线，其格式如下。stroke-dasharray="value,value,……"
该属性由一系列数字组成，这些数字必须用逗号隔开。属性中如果包含空格，不作为分隔符。每个数字定义了实线段的长度，分别是按照绘制、不绘制这个顺序循环下去。
（4）SVG使用linearGradient元素定义渐变色时，
和 元素的功能分别是什么？其中的offset属性和stop-color属性用于实现什么功能？ 线性渐变就是一系列颜色沿着一条直线过渡，SVG也使用linearGradient元素定义线性渐变，并可以定义水平、垂直或角形的渐变。渐变的颜色可以由两种或多种颜色组成，每种颜色通过一个
标记来定义。 使用linearGradient元素定义渐变的语法格式如下。linearGradient元素的属性中，id属性为渐变色指定唯一的名称，以便引用该渐变色。
渐变色的成员色使用stop元素定义，语法格式如下。
stop元素的offset属性用于定义该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色设置成0%，最后一种设置成100%。
stop-color属性：定义该成员色的颜色。
stop-opacity属性：定义成员色的透明度，取值范围在0到1之间。
stop元素的属性也可以使用CSS定义，它支持class、id等标准HTML的属性。
2．操作题
（1）使用g、use、defs等元素，以及translate、scale等方法完成如图7-15所示效果，其中三个房子图案分别填充不同的颜色，每种形状后两个图案的缩放比例分别为0.8和0.6。
专业知识整理分享
WORD格式可编辑
图7-15 重用和缩放效果
a house and people //定义组合图形房子
House with door //定义组合图形男人
Male human //定义组合图形女人
Female human （2）使用linearGradient元素定义黑、黄、红三色组成的线性渐变，并复用此渐变色修改渐变色的方向，绘制如图7-16所示的四个圆角矩形。
专业知识整理分享
WORD格式可编辑
图7-16 投影效果
//定义线性渐变Grad1，默认水平方向
//复用线性渐变方案Grad1，定义垂直方向线性渐变Grad2和角形渐变Grad3
//分别使用3种渐变对象，填充3个图形的内部和边框
（3）使用feGaussianBlur元素，并结合translate、skewX等函数为图形定义经过高斯模糊的投影效果，如图7-3所示。
专业知识整理分享
WORD格式可编辑
图7-17 投影效果
//定义高斯模糊滤镜drop-shadow
//定义组合图形house
//绘制两个图形，对第2个图形应用高斯模糊并作平移
第八章
1．简答题
（1）计算机、平板电脑、手机等电子类设备设备可以通过哪些途径获取地理位置信息？
IP地址。通过IP地址获取位置信息通常对有固定IP地址的设备很有效，但有时不够准确。
GPS。GPS定位较准确，它利用设备上的GPS芯片进行定位，误差范围可以缩小到几米之内。
移动电话基站或无线Wi-Fi。根据用户与移动电话基站或无线Wi-Fi热点的距离，通过三角定位的方式来获取位置信息，优点是定位速度较快，而且不需要配备精密的GPS芯片，缺点则是定位较粗略，误差范围可能是几米到几千米。
用户输入。一些Web应用提供一个接口让用户输入地址、邮政编码或选择所在的区域，可以使用这些信息获得位置信息，这样就可以避免误差范围太大或延迟时间太久，这也是一种实用的 专业知识整理分享
WORD格式可编辑
定位方法。
（2）简述Geolocation API中描述地理位置信息的属性及其含义。
在Geolocation API的Position对象（或这个对象的属性）中，有地理位置信息的属性及描述。如果数据不可用，将返回null值。
属性
latitude
longitude
accuracy
altitude
altitudeAccurancy
heading
timestamp
当前地理位置的纬度信息
当前地理位置的经度信息
经度和纬度的准确度，是监测的位置与实际位置的误差范围（以米为单位）
当前地理位置的海拔高度(以米为单位)
获取到的海拔高度的精度(以米为单位)
设备的前进方向，用面朝正北方向的顺时针旋转角度来表示
获取地理位置信息的时间信息
描述
这些属性封装
（3）Geolocation API的getCurrentPosition()和watchPosition()方法有什么区别？
getCurrentPosition()用来获取用户当前位置的地理信息，watchPosition()可以监听和跟踪用户的地理位置信息，可以在地图上持续标记用户的活动路径、计算移动距离等。
2．操作题
（1）设计一个网页，在Google静态地图上标注用户当前的地理位置信息（用纬度和经度表示）。
参考示例8-3完成。
（2）设计一个网页获取用户当前位置信息的全部数据，包括纬度、经度、海拔、海拔精度和速度等，如果不能获取当前位置，给出相应的提示信息。
参考示例8-1完成。
第九章
1．简答题
（1）叙述离线Web应用工作机制。
离线Web应用指的是浏览器访问服务器的过程中，当服务器无法连接时，Web应用仍然可以运行。离线Web应用工作过程，核心是对应用缓存文件的解析和执行。
①客户端浏览器中输入要访问页面的URL地址，向该地址指向的Web服务器发出请求。
②Web服务器根据浏览器送来的请求，将请求的文档和所需资源返回给浏览器。
③浏览器解析返回的文档，处理或显示从Web服务器返回的资源文件。如果支持离线Web应用，重点考察manifest缓存文件，该文件由html标记的manifest属性指定。可分为以下3种情况。
如果是第1次访问Web服务器，浏览器向服务器请求所有manifest文件中声明缓存的文件到本地，同时更新本地缓存。
如果不是第1次访问Web服务器，并且manifest文件没有被修改，Web应用将使用本地被缓存的文件。
如果不是第1次访问Web服务器，并且manifest文件被修改或发生了版本变化，浏览器将向服务器请求manifest文件中声明的文件，并保存到本地缓存。
专业知识整理分享
WORD格式可编辑
上面的过程主要面向Web服务器在线的情况，如果支持离线应用程序的Web服务器不在线时，浏览器就会使用已经下载到本地缓存中的文件，从而在离线状态下运行Web应用程序。
离线Web应用的一个典型例子，用户可以在不连接Web服务器的情况下，编辑一个邮件或博客，并将其保存在本地，待下次连接Web服务器时再完成提交工作。
（2）开发离线Web应用程序需要哪些步骤？
①离线资源缓存。首先需要确定Web应用程序离线工作所需的资源文件。当处于在线状态时，下载这些文件并缓存到本地。当离线时，浏览器无法连接Web服务器，则可以自动加载这些资源文件，从而实现离线访问应用程序。在HTML5中，通过manifest文件清单指明需要缓存的资源。
②检测在线状态。在支持离线的Web应用程序中，浏览器应该判断在线或离线的状态，并做出对应的处理。
③本地数据存储。在离线时，Web应用程序需要能够把数据存储到本地，以便以后在线时可以同步到Web服务器上。
（3）manifest缓存文件清单的内容具体包括哪些选项，功能是什么？
manifest缓存文件是离线Web应用的关键，该文件清单的内容具体说明如下。
manifest文件第一行必须是CACHE MANIFEST，文件扩展名建议使用appcache，也可以使用manifest。
CACHE：指定需要缓存的文件，清单中列出的文件在首次访问Web服务器进下载并缓存。
NETWORK：指定的文件需要与服务器连接才能获取，不会被缓存。 *是文件通配符，代表除了在CACHE中指明的文外件，所有其他文件都不缓存，需要从Web服务器获得。
FALLBACK：在此选项下列出的文件当页面无法访问时，使用备用的资源文件。
文件编码必须是utf-8。
实现应用缓存，需要在标记中定义manifest属性，从而在网页中引用manifest文件，例如：
在访问网页时，按照test. appcache文件中指定的文件列表进行缓存。在一些Web服务器上可能需要配置对manifest文件的支持，保存后需要重新启动Web服务器。具体请参阅相应的Web服务器手册。
（4）Web Storage API中的localStorage和sessionStorage区别是什么？
Web Storage提供两种方式将数据保存在客户端：一种是localStorage，另一种是sessionStorage。从两种存储方式的名字可以看出，localStorage被称做本地存储，将数据保存在客户端本地；sessionStorage被称为会话存储，将数据保存在session中，浏览器关闭后session对象消失。两者的主要差异在于数据的保存周期和有效范围，如下所示。
Web Storage类型
localStorage
sessionStorage
数据保存周期
数据保存在本地存储（硬盘），网页关闭后，数据仍然存在，执行删除命令后数据会消失。
数据临时保存在session对象中，在网页浏览期间存续，网页关闭，数据丢失
有效范围
同一网站的网页可以访问
仅对当前浏网页可以访问
（5）Web Storage API有哪些常用方法，功能是什么？
sessionStorage和localStorage可使用的API都相同，其功能包括保存数据、读取数据、删除数据、得到索引的key值等。
localStorage 和sessionStoragey都使用setItem()方法用来保存数据，格式如下：
m("key", "value")
localStorage和sessionStoragey都使用getItem()方法用来读取数据，格式如下：
专业知识整理分享
WORD格式可编辑
var value = m("key");
删除数单个数据需要指明删除的key值，形式如下。如果key参数没有对应数据，则不执行任何操作。
Item("key");
是遍历Storage对象时，需要使用key(index)方法允许获取一个指定位置的键值。语法格式
(index);
2．操作题
（1）参考示例9-5使用localStorage实现一个计数器功能，先在同一浏览器的不同页面访问，再在不同浏览器的页面访问，观察页面显示结果。
localStorage文档 Session计数器
（2）构建一个包含图片、音频、文字和样式的离线Web应用，并在Chrome浏览器中进行测试，观察Web缓存的文件。
（3）参考使用localStorage实现的电话簿程序，使用localStorage创建一个留言本，实现增加、查找和显示功能，如图9-7所示。
localStorage文档 Session计数器
//
function saveStorage(id){
var data = mentById(id).value;
var time = new Date().getTime();
//alert(time);
m(time,data);
alert("数据已保存。");
loadStorage('msg');
}
function loadStorage(id){
var result = '
';
';for(var i = 0;i < ;i++) {
var key = (i);
//alert(key);
var value = m(key);
var date= new Date();
e(key);
var datestr = tring();
result += '
' + value + ' ' + datestr + ' }
result += '
var target = mentById(id);
TML = result;
}
function clearStorage(){
();
alert("全部数据被清除。");
loadStorage('msg');
}
第十章
1．简答题
（1）Web Workers API中常用的方法和事件有哪些？各自功能是什么？
Web Workers作为一种后台执行的线程，它的功能包括创建线程，线程与前端页面的数据交互，线程本身占用大量内存资源，本身也需要关闭或销毁。HTML5的Web Workers API中的方法和事件就是对上面的功能进行了封装。使用Web Workers API，用户可以很容易地创建在后台运行的线程(Worker)，并完成数据交互和终止线程。Web Workers常用的方法和事件下表所示。
方法/事件
Worker()方法 构造器，用于创建线程
功能
专业知识整理分享
WORD格式可编辑
postMessage()方法
terminate()方法
close()方法
setTimeout()方法
setInterval ()方法
onmessage事件
用于发送信息
终止线程，并释放浏览器/计算机资源
结束线程
在线程中实现定时处理
在线程中实现定时处理
获得接收消息的事件句柄
（2）实现前台页面与后台线程互相传递数据有哪几种方法？请写出代码。
通过发送和接收消息来实现前面页面与后台线程互相传递数据。如果想接收消息，用下面方式之一。
第1种方法，通过获取Worker对象的onmessage事件的句柄可以在后台线程中接收消息，代码如下。方法的回调函数的参数（下面代码中的event）中，有线程交互的数据。
age=function(event) {
//消息处理，数据为
}
第2种方法，使用addEventListener()方法对message事件进行监听。
ntListener("message",function(event) {
//mentById(‘message’).innerHTML=;
//消息处理，数据为
},false);
如果想要发送消息， 需要使用postMessage()方法。使用Worker对象的postMessag()方法来发送消息，代码如下。发送的消息是文本数据，也可以是JSON。
ssage(message);
（3）SharedWorker和Worker有什么区别？
HTML5 中的 Web Worker分为两种不同线程类型，一种称为专用线程（Dedicated Worker），另外一种就是共享线程 Shared Worker。SharedWorker也是Worker，但多个页面可以共用一个SharedWorker后台线程，并且可通过该后台线程共享数据。
创建SharedWorker线程的方法与前面创建Worker线程的方法类似，只是构造器略有区别。代码如下。var worker=new SharedWorker(url, [name]);
该方法第一个参数用于指定后台线程文件的URL地址，该脚本文件中定义了在后台线程中所要执行的处理，第二个参数为可选参数，用于指定Worker的名称。当用户创建多个SharedWorker对象时，脚本程序将根据创建SharedWorker对象时使用的url参数值与name参数值来决定是否创建不同的线程。
2．操作题
（1）使用Web Worker设计多线程的网页页面，前台向后台线程发送10个0~200的随机数；后台线程接收数据后，选出其中5的倍数，并将数据发送至前端页面；由前端页面在一个span元素中显示。
页面与线程数据交互 专业知识整理分享
WORD格式可编辑
从随机生成的数字中抽取5N
生成的随机数是：
后台线程计算的结果是：
// JavaScript Document，
onmessage = function(myevent) {
var result1="";
var intStr=;
var intArray=(";");
for (var i=0;i<;i++) {
if (intArray[i]%5==0) {
if (result1!="")
result1+=";";
result1+=intArray[i];
}
}
postMessage(result1);
}
专业知识整理分享
WORD格式可编辑
（2）使用SharedWorker设计多线程的网页页面，前台页面向后台线程发送一个字符串；后台线程接收数据后，在指定的字符串数组内进行查找，将查找结果发送至前台页面。
Result
请输入查询词：
/**
* Created by Administrator on 2016/8/
*/
onconnect = function(e) {
var port=[0]; //取得端口号
age=function(e) {
//查詢方法，自行完成
ssage( + "aaa");
}
}
第十一章
1．简答题
（1）什么是NoSql数据库？有什么特点？
NoSQ含义是Not Only SQL 或non-relational，具有非关系型、高效的特点的新一代数据库，。与关系型数据库比较，NoSQL数据库适用于数据模型比较简单、高并发读写、海量数据的高效存储和访问等需求。典型的NoSQL数据库，例如MongoDB、Hadoop Database或者IndexedDB等，都具有数据一致性要求不高、比较易于实现key-value映射等特点。
（2）怎样理解IndexedDB的异步API？
IndexedDB大部分操作的结果，都使用异步API请求—响应的模式。即所有异步请求都有一个onsuccess回调函数和一个onerror回调函数，前者在操作成功时调用，后者在一个操作未成功时调用。比如打开数据库的操作：
专业知识整理分享
WORD格式可编辑
var dbRequest=('testDB');
这条指令并不会返回一个数据库对象的句柄，得到的是一个IDBOpenDBRequest对象，而用户希望得到的DB对象在其result属性中。
（3）IndexedDB 数据库包括哪些对象？这些对象的含义是什么？
①对象仓库。
一个网站可能有一个或多个IndexedDB 数据库，每个数据库必须具有惟一的名称；一个数据库可包含一个或多个对象仓库。一个对象仓库（用名称惟一标识）是一个记录集合。每个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。
②索引和游标。
IndexedDB数据库中，只能对被索引的属性值进行检索。对象仓库可有一个或多个索引。IndexedDB 中的游标能够迭代一个对象仓库中的所有记录。IndexedDB 中的游标是双向的，所以可以向前和向后迭代记录，还可以跳过非惟一索引中的重复记录。
③版本更新和事务处理
版本更新是IndexedDB 数据库重要内容。IndexedDB 数据库中创建或删除对象仓库、创建或删除索引的操作，可以看作是数据库的结构发生变化，必须使用新的版本号来更新数据库的版本，以避免重复修改数据库结构。更新数据库版本将触发onupgradeneeded事件，在onupgradeneeded事件的回调函数中完成对象仓库或索引操作。
创建对象仓库与索引、对象仓库执行所有读取和写入操作的操作必须在事务中进行。
④IndexedDB的异步API。
IndexedDB规范中包含异步 API 和同步 API。
（4）什么情况下需要使用数据库的版本更新？
IndexedDB 数据库中创建或删除对象仓库、创建或删除索引的操作，可以看作是数据库的结构发生变化，必须使用新的版本号来更新数据库的版本，以避免重复修改数据库结构。
（5）什么是数据库的事务处理？IndexedDB的事务有哪三种模式？
创建对象仓库与索引、对象仓库执行所有读取和写入操作的操作必须在事务中进行。IndexedDB 事务提事务具有三种模式，readonly、readwrite、versionchange。数据库的事务处理使用transaction()方法。事务是自动提交的，不需要显式调用事务的commit方法来提交事务。
2．操作题
参考本章示例。
第十二章
1. 简答题
（1）在HTML 5中，涉及到文件操作的重要对象有哪些？这些对象的功能是什么？
在HTML5中，涉及到文件操作的重要对象有FileList对象、file对象、ArrayBuffer对象、ArrayBufferView对象、Blob接口和FileReader接口等。
①file对象是表单input的一种类型，用来选择一个文件实现上传操作。在HTML 5中，为input元素添加multiple属性，file元素允许一次选择多个文件，用户选择的每一个文件都是一个file对象。
②FileList对象是file对象的列表，代表用户选择的所有文件，是file对象的集合。
专业知识整理分享
WORD格式可编辑
③ArrayBuffer实际上是JavaScript操作二进制数据的一个接口，它的作用是分配一段可以存放数据的连续内存区域。一个ArrayBuffer对象代表一个固定长度的用于装载数据的缓存区。
④在HTML 5中，不能直接操作ArrayBuffer对象中的内容，需要ArrayBufferView对象来读写。ArrayBufferView对象可以将缓存区中的数据转换为各种数据类型的数组。
⑤Blob表示二进制原始数据，Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob对象的MIME类型，如果是未知类型，则返回一个空字符串。
⑥FileReader接口主要用来将文件读入到内存中，并且读取文件中的数据。
（2）在HTML 5中，过滤所选择文件类型的方法有哪些？
在HTML 5中，可以通过为file类型的input元素添加accept属性来指定要过滤的文件类型。在设置完accept属性之后，在浏览器中选择文件时会自动筛选符合条件的文件。目前有少数浏览器还不支持accept属性。使用这种方法过滤上传文件类型时，还需要谨慎。
（3）FileReader接口的常用方法有哪些？每种方法都实现什么功能？
FileReader接口有5个方法，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在调用该方法的对象的result属性中。
①abort()：中断读取。
②readAsBinaryString(in Blob blob)：将文件读取为二进制字符串并保存在result属性中，通常将它传送到后端，后端可以通过这段字符串存储文件。
③readAsDataURL(in Blob blob)：读取文件，并将数据以URL的形式保存在实例对象result属性中，如可以直接赋给图片的src属性等。
④readAsArrayBuffer(in Blob blob)：该方法将Blob对象或File对象中的内容读取为ArrayBuffer对象。
⑤readAsText(in Blob blob, [optional] in DOMString encoding)：以纯文件的形式读取文件，并将取到的文本保存在实例对象的result属性中。该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
（4）在HTML 5中，拖放功能的实现方法是唯一的吗？
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。要使用传统的 HTML4 实现拖放的功能，开发者要么使用复杂的 JavaScript 变成，要么使用 JavaScript 框架，比如 jQuery等。现在 HTML5 提出了拖放（DnD）API，为浏览器带来了原生拖放支持，让编码变得更容易。所有的主流浏览器比如 Chrome，FireFox 3.5 以及 Safari 4 等等都支持 HTML5 拖放。在 HTML5
中，拖放是标准的一部分，任何元素都能够拖放。HTML5也支持jQuery实现的拖放效果。
（5）请描述完成一次成功页面内元素拖拽行为事件的过程。
在HTML5中要想实现拖放操作，需要以下步骤：
①指定拖放源并设置元素为可拖放
为了使元素可拖动，把draggable属性设置为true。常见的元素有图片、文字、动画等。
②处理拖拽事件
编写dragstart、drag等事件的处理程序。
③指定放置位置并处理放置事件
将可拖放元素放到适合位置，实现该功能的事件是ondragover，默认情况下，无法将数据、元素放置到其他元素中。如果需要设置允许放置，用户必须阻止目标元素的默认处理方式。
④放置并处理拖拽结束事件
当放置被拖放元素时，就会发生drop事件、dragend事件等。
（6）DataTransfer对象的方法有哪些，分别实现什么功能？
DataTransfer对象包括setData()、getData()、clearData()等方法。
专业知识整理分享
WORD格式可编辑
①setData(format, data)
该方法将指定类型的数据信息存入dataTransfer对象，参数format表示保存的数据类型，参数data表示数据内容。
②getData(format)
该方法用于从dataTransfer对象中读取指定类型的数据信息，参数format表示读取的数据类型。
③clearData(format)
该方法用于从dataTransfer对象中移除指定类型的数据信息，参数format表示移除的数据类型。
④setDragImage(image,x,y)
该方法用于设置拖拽过程中鼠标指针显示的图标，当没有显示调用setDragImage()方法进行设置时，拖拽图标将使用默认样式。参数image用于设定拖拽图标的图像元素，x用于设定图标与鼠标指针在x轴方向的距离，y用于设定图标与鼠标指针在y轴方向的距离。
2．操作题
（1）用HTML 5中的文件API实现图片选择预览效果，如图12-13所示。
图12-13 选择图片文件后的效果
选择图片预览示例 （2）使用HTML 5中的文件API读取文本文件内容，效果如图12-14所示。
图12-14 选择读取文本文件后的效果
fileReader读取文本文件示例 请选择要读取的文本文件：
（3）使用拖放API实现页面内的拖放功能，将图片拖至垃圾箱将从页面上删除该图片，效果 专业知识整理分享
WORD格式可编辑
如图12-15、12-16所示。
图12-15拖放前的效果 图12-16拖放后的效果
- a
- b
- c
垃圾箱第十三章
1. 简答题
（1）在网页中使用CSS的方法有4种，各有什么特点? 设计一个使用CSS的页面，应用行内样式、嵌入式、链接式和导入式来使用CSS样式。
在HTML文件中使用CSS的方式有4种：行内样式、嵌入式、链接式和导入式。
①行内样式表是最简单的一种使用方式，该方式直接把CSS代码添加到HTML的代码行中，由
（4）ID选择器和类选择器在使用上有什么区别？
ID选择器和类选择器在设置格式的功能上类似，都是对特定属性的属性值进行设置。但ID选择器的一个重要功能是用做网页元素的唯一标识，所以，一个HTML文件中一个元素的ID属性值中惟一的。类选择器与ID选择器主要区别如下。
类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。
ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器在样式定义上发生冲突时，优先使用ID选择器定义的样式。
2．操作题
（1）创建一个名为“mycss1”的样式文件，该样式定义字体为华文仿宋、幼园和宋体，字号为12pt，颜色为黄色，背景为蓝色，并在一个HTML文件中链接该样式文件。
/**/
.mystyle {
font-family:宋体;
font-size: 12pt;
color:yellow;
background-color: blue;
}
测试
样式
（2）设计标记的CSS样式，要求如下。
① 超级链接无下划线；
② 未访问链接（link）为宋体、12pt、黑色；
③ 已访问链接（visited）为黑体、绿色；
专业知识整理分享
WORD格式可编辑
④ 鼠标停留在链接上（hover）为黑体、16pt、红色；
⑤ 激活超链接（active）文字为紫色。
第十四章
1．简答题
（1）文本的font属性在应用时需要注意哪些问题？
font属性是个复合属性，可一次性设置各种字体属性（属性之间以空格分隔）。在使用font属性设置字体格式时，字体属性名可以省略。font属性的排列顺序是：font-weight、font-variant、font-style、font-size和font-family。
需要说明的是，font-weight、font-variant、font-style这3个属性的顺序是可以改变的，但font-size、font-family必须按指定的顺序出现，如果顺序不对或缺少一个，那么整条样式定义可能不起作用。
（2）设置图像边框需要使用border-image属性，说明该属性各参数的意义，并在不同的浏览器中调试显示结果。
CSS3增加的border-image属性，该属性指定一个图像文件作为边框，边框的长或宽会随着网页元素承载内容的多少自动调整。使用border-image属性，浏览器在显示图像边框时，自动将用到的图像分割成9部分进行处理，不需要用户再考虑边框与内容的适应问题。
border-image属性的第一个参数需要指明边框图像的地址，接着4个参数是浏览器将边框图像分割时的上右下左四个边距，最后一个参数是边框宽度。例如：
border-image:url(images/) 5 10 15 20/25px;
-moz-border-image:url(images/) 5 10 15 20/25px;
-webkit-border-image:url(images/) 5 10 15 20/25px;
（3）比较word-wrap属性与word-break属性的区别，并通过示例加以验证。
word-wrap 是CSS3新增加的属性，该属性允许超过容器的长单词换行到下一行，它的取值 专业知识整理分享
WORD格式可编辑
为normal和break-word，默认值为normal，表示只在允许的断字点换行，break-word表示在长单词或 URL 地址内部进行换行。
word-break 是CSS3新加的属性，用来处理如何自动换行。它的取值为normal、break-all和keep-all。默认值为normal，表示使用浏览器默认的换行规则，break-all表示允许在单词内换行，keep-all表示只能在半角空格或连字符处换行。
（4）本章中介绍的各种CSS属性既有CSS2以前的属性，也有CSS3新增的属性，列举出CSS3新增属性，说明其释义。
word-break ，用来处理如何自动换行。
word-wrap，该属性允许超过容器的长单词换行到下一行。
border-radius，可以设计各种类型的圆角边框。
border-image属性，该属性指定一个图像文件作为边框，边框的长或宽会随着网页元素承载内容的多少自动调整。
max-width和max-height分别用来设置图片宽度最大值和高度最大值。
2．操作题
（1）用CSS设计如图14-24所示的页面，要求如下。
① 设置背景background-attachment、background-image、background-repeat、background-position等属性；
② 设置图片的border、width、height等属性；
③ 为控制图片位置，可将图片置于
标记或
标记中。
专业知识整理分享
WORD格式可编辑
第十五章
1．简答题
（1）什么是CSS盒模型概念，如何计算其宽度？
盒模型是CSS控制页面布局的一个非常重要的概念，页面上的所有元素，包括文本、图像、超级链接、div块等，都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为“盒模型”。
盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分，如图15-1所示。盒子的实际大小为这几部分之和，盒子宽度为：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
（2）CSS3新增哪些与盒相关的属性？简述其各自功能。
①宽度和高度，定义内容的大小属性；如果盒子里信息过多，超出width和height属性限定的大小，盒子的高度将自动放大。这时需要使用overflow属性设置处理方式。定义盒模型语法格式如下：
width: auto | length;
height: auto | length;
overflow: auto | visible | hidden | scroll;
②边界（margin）是盒模型与其他盒模型之间的距离，使用margin属性定义，其语法格式如下。
margin: auto | length;
③填充（padding）用来设置内容和盒子边框之间的距离，可用padding属性设置，其语法格式如下。
padding: length;
④边框（border）是盒模型中介于填充（padding）和边界（margin）之间的分界线，可用border-width、border-style、border-color属性定义边框的宽度、样式、颜色，也可以直接使用border属性后加3个对应值，用空格隔开进行设置。
（3）说明下列border-style属性值的含义：solid、outset、ridge、dotted。
边框样式用border-style属性描述，其值可取的关键字如下。
none：无边框，默认值
hidden：隐藏边框
dashed：点划线构成的虚线边框
dotted：点构成的虚线边框
solid：实线边框
double：双实线边框
groove：根据color值，显示3D凹槽边框
ridge：根据color值，显示3D凸槽边框
inset：根据color值，显示3D凹边边框
outset：根据color值，显示3D凸边边框
（4）简述绝对定位的设置效果。
设置position属性的值为absolute时即为绝对定位，是盒子相对其具有position属性设置的父对象进行定位。如果父对象无position属性设置，盒子以浏览窗口为参照绝对定位。绝 专业知识整理分享
WORD格式可编辑
对定位的元素浮于页面之上，不占用原页面空间，后续元素不受其影响，填充其原有位置。
（5）简述CSS的定位属性position的值的含义。
使用position属性可以精确控制盒子的位置，其语法格式如下。position: static
|relative | absolute | fixed
static：静态定位，默认的定位方式，盒子按照HTML规则定位，定义top、left、bottom、right无意义。
absolute：绝对定位，通过top、left、bottom、right等属性值定位盒子相对其具有position设置的父对象的偏移位置，不占用原页面空间。
relative：相对定位，通过top、left、bottom、right等属性值定位元素相对其原本应显示位置的偏移位置，占用原位置空间。
fixed：固定定位，通过top、left、bottom、right等属性值定位盒子相对浏览器窗口的偏移位置。
2．操作题
（1）设置盒模型，实现图15-30所示效果。
盒模型（2）设计实现购物网站商品橱窗展示，效果参考图15-31。
专业知识整理分享
WORD格式可编辑
图15-30 盒模型浏览效果 图15-31 购物网站商品橱窗展示浏览效果
运动裤￥99.00运动鞋￥159.00（3）请参考本章案例完成如下页面的设计。
摘自《大师的预言》美国著名的《连线》杂志，曾就一系列事物的发展前景向一批各自领域的专家征询。这些专家的看法可能有些武断，但令人欣赏地直奔主题。下面是他们对互联网络所预言的另一张时间进程表：2001 远程手术将十分普及，最好的医学专家可以为全世界的人诊断治疗疾病。
2001 《财富500家》上榜者中将出现一批"虚拟企业"。
2003 全球可视电话将支持更普遍的"远程会议"， 专业知识整理分享WORD格式可编辑
企业家将通过网络管理公司。
2003 "远程工作"将是更多的人主要的"上班"方式。
2007 光纤电缆广泛通向社区和家庭，"无限带宽"不再停留在梦想中。
2016 出现第一个虚拟大型公共图书馆，虚拟书架上推满了虚拟书籍和资料。这些预言中，还包括了所谓"食品药片"、"冷冻复活"等匪益所思的言论。仅从与网络相关的预言看，人类全方位的"数字化生存"──包括工作、生活和学习等相当广泛的领域── 都不是那么遥远。这一张时间进度表究竟能不能如期兑现？阿伦•凯（）首先提出，又被尼葛洛庞帝引用过的著名论断说得好："预测未来的最好办法就是把它创造出来。" 当今的社会，预测再也不是消极地等待某个事实的出现，而是积极地促成这个事实。从这个意义上讲，创造和创新才是我们对21世纪电脑发展趋势最准确的预测，远胜过一切天才的预言。第十六章
1．简答题
（1）简述HTML5新增的结构元素的含义及使用方法。
HTML 5中新增了section、article、nav、aside、header和footer等结构元素。运用这些结构元素，可以让网页的整体布局更加直观和明确、更富有语义化和更具有现代风格。
①header元素：用来展示网站的标题、企业的logo图片、网站导航条等。
②nav元素:用于页面导航。
③aside元素：aside结构元素可以有多种形式，其中最常见的形式是侧边栏，通常用来展示与当前网页或整个网站相关的一些辅助信息。
④section元素：网页中要显示的主体内容通常被放置在section结构元素中，每个section元素都应该有一个标题，用于表明该section的主要内容。
⑤footer元素：用来放置网站的版权声明和备案信息等内容，也可以放置企业的联系电话和传真等联系信息。
（2）举例说明网站中有那些元素适合定义为全局样式。
设计网页时，为网站设置一个全局样式，例如背景、边界、字体、字号和行高等属性参数，这样，既可以保证不同页面有相对一致的风格，也可以保证网页在不同浏览器中稳定的显示效果。
（3）说明CSS应采用什么措施避免样式无法兼容多种浏览器的问题。
在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网站，就应该更注意浏览器对CSS样式的兼容性。不同类型浏览器对于CSS技术的支持是不完全统一的，如果再加上浏览器对于CSS解析时存在各种Bug，CSS兼容性处理就变得异常复杂。解决浏览器兼容问题的方法被称之为Hack（即补丁的意思），就是利用各种过滤方法专门为特定类型浏览器定义样式，即称之为过滤器（Filter），从而实现在不同类型浏览器中呈现相同的渲染效果。
专业知识整理分享
WORD格式可编辑
2．操作题
（1）设计实现图片展示页面，效果如图16-8所示。
图16-8 购物网站商品橱窗展示浏览效果
"/TR/xhtml1/DTD/">
无标题文档 成年卡560元/张
适用于一名1.5米以上（不含1.5米）的游客CSS样式如下：
@charset "utf-8";
/* CSS Document */
.content {
background-color: #E1F0ED ;
height: 100px;
width: 700px;
border: 1px solid #39F;
vertical-align:middle;
}
.left {
float: left;
height: 80px;
width: 150px;
font-family: "微软雅黑", Arial;
line-height: 24px;
color: #069;
font-size: 26px;
text-align:center;
vertical-align:middle;
margin-top:30px;
}
.img {
padding:15px;
float:left;
}
专业知识整理分享
WORD格式可编辑
.right{
float:right;
height:100px;
width:350px;
padding:10px;
color:#000;
}
.right span {
font: 14px;
color: #000;
}
.right span em {
font-family: "微软雅黑";
font-size:26px;
color:#F60;
padding:10px;
line-height:50px;
}
.detail{
font-size:14px;
color:#036;
}
（2）请参考综合案例完成如下页面效果的设计，如图16-9所示。
图16-9 页面效果
页面HTML代码如下：
精品推荐
-
大连去丹东鸭绿江,九水峡漂流,凤城大梨树生态旅游区纯玩
大连旅游花花旅游为您提供特价大连周边旅游团购报价
行程天数：2天
￥280起
-
成园山庄温泉游
近市区，满足孩童的需求！
行程天数：1天
￥120起
-
大连老虎滩、滨海路、棒棰岛、东海公园纯玩一日
一次走遍大连精华景点，网罗所有美好记忆，让您的行程更精彩。
行程天数：1天
￥320起
-
薰衣草庄园
大连薰衣草庄园是大连市重点景点，也是国家AAAA级旅游景点
行程天数：1天
￥80起
-
圣亚海洋世界
行程天数：1天
￥220起
-
金石滩
专业知识整理分享
WORD格式可编辑
行程天数：1天
黄金海岸免费
-
大连去丹东鸭绿江,九水峡漂流,凤城大梨树生态旅游区纯玩
大连旅游花花旅游为您提供特价大连周边旅游团购报价
行程天数：2天
￥280起
-
成园山庄温泉游
近市区，满足孩童的需求！
行程天数：1天
￥120起
专业知识整理分享
WORD格式可编辑
CSS代码如下：
/* 精品推荐样式开始 */
.main-jp {
height: 590px;
overflow: hidden;
width: 980px;
overflow: hidden;
border:solid #aaa 1px;
margin:10px auto;
}
.main-jp {
font: normal 24px "微软雅黑";
height: 45px;
margin-left:10px;
text-align:left;
}
.main-jp {
background: none;
}
.main-jp {
width: 980px;
专业知识整理分享
WORD格式可编辑
height: 525px;
}
.main-jp li {
float: left;
width: 243px;
height: 267px;
}
.main-jp li a {
float: right;
display: inline-block;
width: 225px;
height: 255px;
border: 1px solid #ccc;
}
.main-jp li a , .main-jp li a img {
width: 225px;
height: 150px;
}
.main-jp li a {
overflow: hidden;
}
.main-jp li a h3 {
font: normal 18px "微软雅黑";
height: 40px;
line-height: 50px;
color: #666;
padding: 0 10px;
overflow: hidden;
}
.main-jp li a h4 {
font: normal 12px "微软雅黑";
color: #999;
height: 20px;
line-height: 20px;
text-indent: 10px;
overflow:hidden;
}
.main-jp li a p {
padding: 0 10px;
height: 30px;
}
.main-jp li a p b {
font-size: 14px;
color: #0097e0;
line-height: 40px;
}
.main-jp li a p span {
font: 12px;
color: #f90;
}
.main-jp li a p span em {
font: normal 26px "Arial";
}
.main-jp li a:hover img {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
专业知识整理分享
WORD格式可编辑
-o-transform: scale(1.2, 1.2);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
/* 精品推荐样式结束 */
（3）使用HTML5结构元素和CSS3样式设计一个个人网站首页。
略
专业知识整理分享
版权声明：本文标题：HTML5及CSS3web前端开发技术习题答案解析 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1702862553h433674.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
如何把 Kitten编程猫上开发出来的项目打包成安卓平台上可以安装的apk文件
我们使用 Kitten编程猫这款少儿编程工具，开发出来的项目，另存成本地工程文件，格式为bcm： bcm文件打开可以发现，内容是j
【python脚本】自动清理安卓手机读取U盘后自动创建的无用文件及文件夹
安卓手机在读取U盘时会自动创建Android，Sounds等文件夹，弹出U盘后，这些文件夹本身可以删除。但是这些文件夹数量比较多，假如U盘根目录下的文件
夜神模拟器：新建android模拟器并安装apk文件
1. 安装夜神模拟器 下载地址：https:www.yeshen a. 直接双击nox_xxx.exe一步步安装模拟器 b. adb devices查看结果,如果出现如下错误：解决方法： 夜神模拟器的adb版本和android
matlab光盘映像文件可以删除吗_Windows10光盘映像去哪儿下载？
点击箭头处 “蓝色字” ，关注我们哦！！ 题外话。2019年底，微软已经开始向安装了Windows7的电脑发送了停止安全更新和技术支持的通知，截止日期——2020年1月14日。不管你再怎么依赖Win7、再怎么吐糟Win10，都改变不了它是主
Windows系统中常见的文件后缀名有哪些
.ACA：Microsoft的代理zhi使用的角dao色文档 .acf：系统管理配置 .acm：音频压缩管理驱动程序,为Windows系统提供各种声音格式的编码和解码功能 .
[Tools]Windows 7(64)系統下提取 deb 文件中的某个文件的一种方法
需求背景: 在分析手機發生 crash 的core dump 的時候，需要vmlinux 這個文件。 而這隻文件由於build 出來的時候被打包進 deb. 之前的做法是將deb放到 ubuntu 平台上解壓。
修复Windows7引导文件工具（最新mbrfix工具，使用Windows7）
写在前面：先说下我的情况，我的电脑装了两个系统，先装Windows7家庭版，再装ubuntu，后来把装ubuntu的整个硬盘空间给
Windows自带Dism命令检查和修复系统映像文件
DISM：是Deployment Imaging and Management（部署映像服务和管理）的缩写。常使用的命令如下（均以管理员方式运行cmd&
win7计算机之间传输文件,让两台win7电脑实现互传文件的方法
有时候需要两台win7电脑之间相互传送文件，有什么办法可以实用文件互传呢？方法当然是有的，网上也有很多相关的教程，但是操作起来比较麻烦。所以在这里小编教
Win11系统提示找不到IpsPlugin.dll文件的解决办法
其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题，如果是新手第一时间会认为是软件或游戏出错了，其实并不是这样，其主要原因就是你电脑系统的该dll文件丢失了或没有安装一
ntkrnlpa.exe文件丢失导致程序无法运行问题
其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题，如果是新手第一时间会认为是软件或游戏出错了，其实并不是这样，其主要原因就是你电脑系统的该dll文件丢失了或没有安装一
Windows 中的三种对象
窗口站和桌面 https:msdn.microsoften-uslibrarywindowsdesktopms687098(vvs.85).aspx Windows 创建了三种主要类型的对象：用户接口&
映射Ubuntu虚拟机的文件到windows下
目录 前言介绍： 第一部分：安装samba实现文件共享服务 1.进入到根目录下： 2.安装samba主程序和通用程序 3.执行指令vim etcsambasmb
windows 批量解压.7z,*.rar,*.zip文件
新建 jieya.bat 文件，复制以下代码，路径尽量不要用中文，配置运行即可。 echo offREM 设置压缩包所在文件夹路径set pthD:testREM
解决VS中的 “ 无法启动程序，系统找不到指定文件 “ 问题
这个主要是配置问题。 项目 --> 属性 进入配置界面 配置属性 -->常规 -->输出目录 确定输出文件的目录 为了查看具体的值，在输出目录，点下拉，然后编辑，可看到如下界面： 配置属性 -->链接-->常规
windows文件自动同步
windows server 几大实时同步软件比较 需求： 从Windows Server 主机A 到 Windows Server 主机B 之间同步目录 方案一： 使用bat脚本计划任务
windows使用命令行压缩解压文件
安装7zip： https:www.7-zip 压缩： 7z.exe a tempa.tar tempdemo 解压： 7z x tempzip
安卓SDK文件目录
1.add-ons附加组件，存放关于google附加的API，如googlemap、effects 2.build-tools构建工具，包含了重要的编译工具ÿ
拥有一个智能化清理电脑垃圾的工具 是一个非常明智的选择 效率高&安全删除文件
拥有一个智能化清理电脑垃圾的工具 是一个非常明智的选择 效率高&安全删除文件。大家以前清理电脑垃圾是不是都是只删除回收站垃圾，或者有些人更聪明一点就会删除临时文件，仅仅清理这些垃圾是不够的
从服务器拷贝文件到本地Windows系统中
第一步 开启本地ssh连接 先要安装SSH服务，具体在网上搜一下即可。 开启服务：管理员身份运行cmd，输入net start sshd如图所示说明开启成功。&
全部评论 0暂无评论推荐文章
热门文章
-
刚回应！删库报复！一行代码蒸发数10亿！
29天前 -
项目管理精萃
29天前 -
按键精灵一直获取服务器信息,按键精灵
29天前 -
盖子的c++小课堂——第一讲：变量
29天前 -
Windows 系统引导过程
19天前
发表评论