首页 > 其他分享> > Web前端开发技术第三版课后练习答案

Web前端开发技术第三版课后练习答案

2021-04-28 12:02:47 作者：互联网

P16-第1章练习与实验答案
练习1
1.选择题
(1)B (2)D (3)B (4)B (5)D (6)A
2.填空题
(1)标记、文本
(2)Tim Berners-Lee（蒂姆·伯纳斯·李）
(3)查看
(4)NotePad、EditPlus、TextPad、TopStyle、UltraEdit等
(5)超文本标记语言、统一资源定位符（器）、层叠样式表（级联样式表）、异步JavaScript和XML
(6)IE、Firefox、Chrome、opera、UCWEB等
3简答题
见教材。

实验1
略

P32-第2章练习与实验答案
练习2
1.选择题
(1)B (2)D (3)A (4)B (5)A (6)B

2.填空题
(1)html、htm，index.html、default.html
(2)、
(3)单、双，双，开始（首）、结束（尾）
(4)头部(head)、主体(body)。Body、head
(5) 严格型（Strict）、过渡型（Transitional）、框架型（Frameset）、<!doctype html>

3．简答题
见教材。

实验2
1.代码

<!doctype html>

求知家园欢迎来到我们的求知家园！

2．代码 Google搜索欢迎使用Google搜索！

P46-第3章练习与实验答案
练习3
1.选择题
(1)A (2)A (3)C (4)C (5)B (6)A (7)B (8)B (9)D (10)A
2.填空题
(1)body、title
(2)、
(3)、
(4)、
(5)、
(6)、
(7)、、。
3.问答题
见教材。

实验3
1.代码

<!doctype html>

自荐信自荐信

尊敬的领导：
您好！

感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！

我是计算机专业的本科毕业生。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。

此致
敬礼!

联系E-mail:zhang@163.com

2．代码 <!-exp_3_2.html --> 数学方程式

数学方程式

2x ²+3x=9
x ₁+x ₂=10

P57-第4章练习与实验答案
练习4
1.选择题
(1)C (2)D (3)B (4)B (5)C (6)D
2.填空题
(1) 添加列表项值
(2)无序列表、有序列表
(3)start、整形数值、value
3.问答题
见教材。

实验4
1.代码

<!doctype html>

windows不同版本

windows 95
windows 98
windows NT
- windows NT Workstation
- windows NT Server
windows 2000
- windows 2000 Professional
- windows 2000 Server
- windows 2000 Advance Server
windows xp
windows vista
windows 7
windows 8

2.代码第四届中国大学出版社图书奖公示

第四届中国大学出版社图书奖公示

优秀教材一等奖（68种）

1.刑事诉讼法（第五版），陈光中主编，北京大学出版社

2.普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖编著，北京大学出版社

3.音韻學教程（第四版），唐作藩著，北京大学出版社

4.保险学(第5版)，孙祁祥著，北京大学出版社

...

优秀教材二等奖（119种）

1.艺术欣赏教程（第2版），杨辛、谢孟主编，北京大学出版社

2.经济学基础（第6版），[美] 曼昆著，北京大学出版社

3.创新管理：赢得持续竞争优势（第2版），陈劲著，北京大学出版社

4.医学遗传学（第3版），傅松滨主编，北京大学医学出版

...

附文字素材：第四届中国大学出版社图书奖公示优秀教材一等奖（68种） 1.刑事诉讼法（第五版），陈光中主编，北京大学出版社 2.普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖编著，北京大学出版社 3.音韻學教程（第四版），唐作藩著，北京大学出版社 4.保险学(第5版)，孙祁祥著，北京大学出版社 ... 优秀教材二等奖（119种） 1.艺术欣赏教程（第2版），杨辛、谢孟主编，北京大学出版社 2.经济学基础（第6版），[美] 曼昆著，北京大学出版社 3.创新管理：赢得持续竞争优势（第2版），陈劲著，北京大学出版社 4.医学遗传学（第3版），傅松滨主编，北京大学医学出版 ...

P70-第5章练习与实验答案
练习5
1.选择题
(1)D (2)C (3)B (4)C (5)B (6)A (7)B

2.填空题
(1) href=“mailto:someone@mail.com”
(2) name、“#target1”
(3)绝对路径、相对路径、根路径。相对、根路径，绝对。
(4) 中国教育网
3.问答题
见教材。

实验5
1.代码

<!doctype html>

apple网站

浮动框架中打开新页面

在左边浮动框架中打开百度在右边浮动框架中打开腾讯

P85-第6章练习与实验答案
练习6
1.选择题
（1）D （2）A （3）D（4）B
2.填空题
（1）、，
（2）border=“0”
（3）矩形；圆形；多边形。
3.简答题
（1）设置滚动空白空间就是指滚动文字背景和它周围文字及图像之间的空白空间范围。默认情况下，滚动对象周围的文字或图像是与滚动背景紧密连接的，使用hspace和vspace可以设置它们之间的空白空间。
（2）
Width设置宽度 height设置高度 alt替换文本

实验6
1、源代码如下所示：

<!doctype html>

图像对齐方式应用

未设置对齐方式的图像:

PNG，图像文件存储格式，其目的是试图(原来此处使用了"企图")替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。

已设置对齐方式的图像：

PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。

2.代码如下所示：图像画廊

图像画廊

P106-第7章练习与实验答案
练习7
1.选择题
(1) A (2) C (3) D (4) A (5) D (6) D
2.填空题
(1) id,class
(2) link,href;style,@import url(“外部样式文件名”);
(3) .css
3.问答题
见教材。

实验7
1.代码

<!doctype html>

古诗排版

Web前端开发工程师工作内容

web前端工程师在不同的公司，会有不同的职能，但称呼都是类似。

做网站设计、网页界面开发
做网页界面开发
做网页界面开发、前台数据绑定和前台逻辑的处理
设计、开发、数据处理

附：素材 Web前端开发工程师工作内容 web前端工程师在不同的公司，会有不同的职能，但称呼都是类似。 做网站设计、网页界面开发 做网页界面开发 做网页界面开发、前台数据绑定和前台逻辑的处理 设计、开发、数据处理

P118-第8章练习与实验答案
练习12
1.选择题
（1）C （2）A （3）B （4）C （5）A
2.填空题
（1）

;id、class、style。
（2）top、height。
（3）z-index，position。
3.简答题
略
实验8
1、源代码：

<!doctype html>

新闻

2017央视综艺节目发力彰显公益大爱
继北京、上海后，2017年腾讯视频推介会昨又在广州隆重举行
“跨界融合开放共赢”移动互联网营销峰会
首届“联建杯”户外LED显示屏媒体大赛评审圆满落幕

/* exp_8_1.css */ #d1{ width:600px; height:380px; background-color:Lime; } #d2{ font-family:"幼圆"; font-size:20px; } .b{ font-weight:bold; text-decoration:underline; color:red; } .it{font-style:italic;font-size:24px;font-weight:bold;}源代码：

<!doctype html>

匾牌设计

海纳百川，有容乃大

P146-第9章练习与实验答案
练习9
1.选择题
(1) D (2)B (3) D (4) A (5) C
2.填空题
(1)text-indent；text-align:center;
(2)background-repeat:repeat-x;background-position。
(3) red或RGB(100%,0,0)、rgb(255,0,0)、#FF0000、#F00
(4) 边框为2像素、双实线、红色。
3.问答题
见教材。
实验9
2、源代码：
------------------- exp_9_1.html -----------------

<!doctype html>

CSS+div

2．

<!doctype html>

Head Line

Mobile Widget使用的标准的Web技术，如HTML，CSS，javascript等。这些经典的Web技术规范是由W3C（万维网联盟）的下属各个工作组制定并推进的。作为开发Widget之前的知识准备，在本章中我们将逐一介绍这些技术。

P168-第10章练习与实验答案
练习12
1.选择题
（1）B （2）A （3）C （4）D （5）A
2.简答题
（1）略
(2) display: none让对象不显示，原来不存在。 display:block—作用是显示特定对象；visibility: visible—作用是让特定对象可视（说明原来就存在，只是不可视），对使用visibility: hidden : 可以让对象隐藏起来。
实验12
3、源代码：
HTML文件

<!doctype html>

Web页面设计实例

首页 | 博客 | 设计 | 论坛 | 关于

欢度新春佳节

CSS文件
/* exp_10_1.css /
/ 应用对象：edu_10_1.html*/

body {
font-family:Verdana;
font-size:16px;
margin:0;
text-align:center;
}
h4{float:left;margin:45px auto;padding-left:50px;}
p{margin:2px;font-size:14px;
}
#Container {margin:0 auto;
width:900px;
}
#Header {
height:118px;
border-bottom:5px;
background-color:rgb(230,230,230);
border-bottom:5px solid #FFFFFF;
}
#PageBody {
height:380px;
border-bottom:5px solid #FFFFFF;
}
#SideBar {
float:left;
width:200px;
height:380px;
background:#Dff100;
text-align:center;
padding:50px auto;
border-right:5px solid #FFFFFF;
}
#MainBody {
float:right;
width:695px;
height:380px;
background:#cff000;
}
#Footer {
height:60px;
background-color:rgb(230,230,230);
text-align:center;
font-family:“Courier New”;
font-size:12px;
padding-top:10px;
}
#Header img{
float:left;
}
span{margin-top:45px;width:50px;height:30px;font-size:20px;font-family:“华文新魏”;padding:45px 10px;
vertical-align:middle;text-align:center;
}

a{width:48px;height:24px;
font-size:20px;
font-family:“华文新魏”; text-align:center;
}
ul{list-style-type:none;margin:0px;padding:35px;text-align:center;}
li{ width:50px;height:30px;
font-size:20px;
font-family:“华文新魏”;
padding:10px 35px;
}
h3{text-align:center;color:red;font-size:24px;
background:#CFF000;padding:6px auto;}
a:link,a:visited,a:active{text-decoration:none;display:block; }
a:hover{border-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF;}
2．Exp_10_2.html

<!doctype html>

DIV+CSS布局 logo nav Content-left Content-center-left Content-center-right Content-right Footer

P189-第11章练习与实验答案
练习11
1.选择题
（1）B （2）D （3）D （4）B （5）D （6）B
2.填空题
(1)

、、
(2) rowspan 、3、 Colspan 、 5
(3) frame、rules
(4) cellspacing、cellpadding
3.简答题
答案略，见教材。
实验11
4、源代码：
------------------- exp_11_1.html -----------------

表格实验

A	B
	E	C
D

5、源代码： div与表格应用实例——计算器布局

P208-第13章练习与实验答案
练习13
1.选择题
(1)D (2)C (3)B (4)C (5)A
2.填空题
(1)post、get
(2)浏览器、服务器
(3)、name、size、multiple
(4)textarea、rows、cols
(5)reset、submit、button
(6)不相同、不相同；相同、不相同
(7)checked、selected
(8)fieldset、legend
实验13
6、源代码：

<!doctype html>

登录页面登录页面用户名:
密    码:
类    型: 管理员普通用户
记住密码自动登录
           2、源代码：应聘页面 希望工作地点: 北京上海广州西安杭州南京重庆天津 月薪要求: 要求提供过度住房
请选择应聘行业:
计算机软件计算机硬件计算机服务通信/电信/网络设备互联网/电子商务网络游戏电子技术/半导体/集成电路仪器仪表/工业自动化

附录A 模拟试卷参考答案
一、选择题（每题1分,共30分）

题号 1 2 3 4 5 6 7 8 9 10
答案 A D B B D C D A D D
题号 11 12 13 14 15 16 17 18 19 20
答案 D C C C C D A C B B
题号 21 22 23 24 25 26 27 28 29 30
答案 A B B D B C D A A D

二、填空题（每空1分，共20分）
（1）单（2）双
（3） © （4） face
（5） size （6） _blank
（7）课程成绩表（8） body|主体
（9） button （10） . (点)
（11） # （12） var today=new Date();
（13） 0-100 （14）内部样式表
（15）导入样式表（16）链入样式表
（17）（18） rowspan
（19） src （20） circle
三、看图填充程序（每空2分，共36分）
（1）欢迎学习Web客户端编程（2） alert(“Web客户端编程很好学！”);
（3）

web前端开发技术

（4）

（5）

1.HTML

（6）

2.CSS

（7） background:#99ff99 （8） 2px double #ff3333
（9） font-size:24px （10）

（11）软件工程（12） color:white
（13） font-weight:bold （14） i<=7|i<8
（15） number[i]=“0”+number[i] （16）document.getElementById(num)
（17） readonly （18）selectnumber(‘number1’)
（19） list （20）placeholder
（21） datalist，datalist （22）id
（23）
四、编程题（每题6分，共12分）（超出页面转反面）
1.表格编程

教材表

教材表
序号	教材名称	数量（本）
1	软件工程	64
2	数据结构	54
合计		118

2.JavaScript编程找出1000以内的平方数，并计算累加和

找出1000以内的平方数，并计算累加和

（0.5分）五、问答题 1．举例说明HTML5文档组成结构。（5分）答： HTML5文档结构

（1分）（1分）

（1分）

...

（1分）（1分）

2．写出HTML、CSS、JavaScript三大部分程序注释的方法。（4分）
答：（1）HTML中注释方法有两种：<!—注释1–>、程序注释2（1.5分）；
（2）CSS中注释可以用“/* 这是样式表注释 /” （1分）；
（3）JavaScript中可以用三种：单行注解//；多行注释/ 这是多行注释 */（1.5分）；
3．JavaScript关于标记符命名规定是什么？（3分）
答：JavaScript关于标识符的规定有：
（1）必须使用字母或者下划线开始（0.5分）；
（2）必须使用英文字母、数字、下划线组成，不能出现空格或制表符（1分）；
（3）不能使用JavaScript关键词与JavaScript保留字（0.5分）；
（4）不能使用JavaScript语言内部的单词，比如Infinity,NaN,undefined（0.5分）；
（5）大小写敏感，也就是说x和X是不一样的两个标识符（0.5分）。

附录模拟试卷2参考答案

一、选择题（每题1分,共30分）
题号 1 2 3 4 5 6 7 8 9 10
答案 D C B A A B C D A D
题号 11 12 13 14 15 16 17 18 19 20
答案 B D C A B D C A B D
题号 21 22 23 24 25 26 27 28 29 30
答案 C C A D C B B C A D

二、填空题（每空1分，共20分）
（1）（2）
（3） sum+=1/(2*n-1) （4） face|size
（5） size | face （6） 5
（7）外部链接（8）
（9） file （10）属性
（11） [属性]值（12） join(“-”)
（13）十六进制（14）标记样式
（15）类样式（16） id样式
（17） 4 （18） #
（19） -300 （20） 2014
三、看图填充程序（每空2分，共36分）
（1） align=“center” （2）
（3） font-size:28px （4） margin:0 auto
（5） name=“rigtiframe” （6） target
（7） middle （8） font-weight
（9） bordercolor （10） align=“center”
（11） colspan=“3” （12） class=“red”
（13） src=“sum_factorial.js” （14） readonly
（15） type=“button” （16） sum=sum+result |sum+=result
（17） compute_sum(n) （18） sum
（19） transform:scale （20） transform:skew
（21） transform:matrix （22） vertical-align:top
（23） id=“div3”
注：属性或属性值单词写错的必须扣分，但如果赋值语句中属性名或属性值写对适当给分，最多给本题分数的一半。

四、编程题（每题6分，共12分）（超出页面转反面）
1．表单编程（6分）。

Web前端开发技术教学反馈（0.5分）

Web前端开发技术教学反馈

（0.5分）（1分）学号：（0.5分）姓名：（0.5分）性别：男女
（1分）教学反馈意见：
请输入意见
（1分）（1分）

评分参考：单选择钮type属性值赋值错误适当扣分；文本域标记使用错误扣1分；其它参照评分标准适当计扣。
2．JavaScript编程

计算所有能被17整除的3位整数的和（0.5分）评分参考：如果用其它循环也能得到同样的结果可以适当给分；JS函数结构正确可以适当给1分，如果函数体语句主体结构正确，也可以适当给分，如果只能写出HTML部分代码最多给1分。五、问答题（12分） 1．简述有序列表的定义语法，并说明有序列表的编号有几种，分别是什么？（5分）答：

（结构1分，2个属性1分）
Java程序设计
Web程序设计
（2个属性1分）
Java程序设计指导书

编号有5种，分别为：1、a、A、i、I。（2分）评分参考：有序列表结构未写全的扣1分,编号的种类每写对一个计0.5分。 2．举例说明CSS中边界margin多种定义的方法。（4分）如：div{margin: ;} 答：(1)div{margin:10px; } 1个值表示4个边界全部相同； (1分) (2)div{margin:10px 20px; } 2个值表示第1个为上下边界10px（相同），第2个值表示左右边界20px（相同）；(1分) (3)div{margin:10px 10px 20px ; }3个值：第1个表示上边界10px，第2个表示左右边界10px，第3个表示下边界20px； (1分) (4)div{margin:10px 20px 30px 40px; }4个值分别表示上、右、下、左边界。 (1分)

评分参考：四种定义每少一种扣1分，每写一种计1分。

3．举例说明window对象中常用的消息框函数。（3分）
答：window对象常用的消息框函数有点3个：
(1)alert(“告警信息！”); (1分)
(2)confirm(“确认吗？”) (1分)
(3)prompt(“提示信息”,默认值) (1分)

评分参考：函数名称每写对一个得1分，如果全是汉字写的函数名称最多1分。

标签：Web,填空题,练习,前端开发,实验,课后练习,font,北京大学出版社,size
来源： https://blog.csdn.net/weixin_47423314/article/details/116230479