12、ize=#> D．
3．在HTML代码中，给表格添加行的标记是（ A ）。
A．|
B． | C． | D．以上都正确
4．HTML代码表示（ B ）。
A．设置表格单元格之间空间的大小
B．设置表格单元格边框与其内部内容之间空间的大小
C．设置表格的宽度——用绝对像素值或文档总宽度的百分比
D．设置表格单元格的水平对齐
5．表格标记的基本结构是（ C ）。
A．|
B．
C． D．13、
6．以下标记符中，用于设置表格标题的是（ B ）。
A． B．<caption> C．<head> D．<html>
7．定义表格常用的3个标签是（ ABC ）。
A．<table> B．<tr> C．<td> D．<tp>
8．两个属性（ AD ）可用于表格的合并单元格。
A．colspan B．trspan C．tdspan D．rowspan
9．<frameset cols=#>用来指定（ B ）。
A．混合分框 B．纵向分框 C．横向分框 D．任意分框
10．HTML中“<noframes></noframes>”的具体含义</p><p style='padding:5px 0px;'>14、是（ A ）。
A．无框架时的内容 B．相关性 C．基本视窗名称 D．文件形态
11．定义框架要用到（ C ）标签。
A．<framework> B．<frameset> C．<frame> D．<framespace>
12．定义上下分割的框架大小的是（ A ）。
A．rows B．cols C．widths D．heights
上机指导
1．使用Dreamweaver创建一个HTML文件，文件名为NBAIndex.html，网页显示效果如图3-15所示。
图3-15 上机指导第1题网页效果
要求如下。
（1）要求使用表格元素。
（2）表格中第</p><p style='padding:5px 0px;'>15、一行的背景图片，存在ch3\images目录中。
答：源码请参见“CH03_LAB\NBAIndex.html”
2．使用Dreamweaver创建一个HTML文件，文件名为NBAIndex.html，网页显示效果如图3-16所示。
图3-16 上机指导第2题网页效果
要求如下。
（1）要求使用表格元素。
（2）表格中第一行的背景图片，存在ch3\images目录中。
答：源码请参见“CH03_LAB\NBAIndex.html”。
习题
1．下列关于表单的说法不正确的一项是（ B ）。
A．表单对象可以单独存在于网页表单之外
B．表单中包含各种表单对象</p><p style='padding:5px 0px;'>16、如文本域、列表框和按钮
C．表单就是表单对象
D．表单由两部分组成：一是描述表单的HTML源代码，二是用来处理用户表单域中输入的信息的服务器端应用程序客户端脚本
2．若要产生一个4行30列的多行文本域，以下方法中，正确的是（ C ）。
A．<input type="text" rows="4" cols="30" name="txtintrol">
B．<textarea rows="4" cols="30" name="txtintro">
C．<textarea rows="4" cols="30" name="txtintro"></textarea>
D．<text</p><p style='padding:5px 0px;'>17、area rows="30"cols="4" name="txtintro"></textarea>
3．HTML代码<select name="NAME"></select>表示（ D ）。
A．创建表格 B．创建一个滚动菜单
C．设置每个表单项的内容 D．创建一个下拉菜单
4．HTML代码<input type=text name="foo" size=20>表示（ B ）。
A．创建一个单选框 B．创建一个单行文本输入区域
C．创建一个提交按钮 D．创建一个使用图像的提交按钮
5．实现下拉列表框，要用到（B）标签。
A．<input> B．<select> C．<op</p><p style='padding:5px 0px;'>18、tion> D．<radio>
上机指导
1．使用Dreamweaver创建一个HTML文件，文件名为clientMgrAdd.html，网页显示效果如图4-19所示。
图4-19 上机指导第1题网页效果
要求如下。
（1）要求使用表格进行布局。
（2）其中“民族”下拉框中的列表信息为：汉族、少数民族、其他。“政治面貌”下拉框中的列表信息为：中共党员、中共预备党员、共青团员、群众、其他。“学历”下拉框中的列表信息为：小学、初中、高中、中专、高职、专科、本科、硕士研究生、博士研究生。“专业技术职称”下拉框中的列表信息为：工程专业技术人员 高级工程师、工程专业技术人员 工</p><p style='padding:5px 0px;'>19、程师、工程专业技术人员 助理工程师、经济专业技术人员 高级经济师、经济专业技术人员 经济师、经济专业技术人员 助理经济师、会计专业技术人员 高级会计师、会计专业技术人员 会计师、会计专业技术人员 助理会计师、统计专业技术人员 高级统计师、统计专业技术人员 统计师、统计专业技术人员 助理统计师、审计专业技术人员 高级审计师、审计专业技术人员 审计师、审计专业技术人员 助理审计师、政工专业技术人员 助理政工师、政工专业技术人员 高级政工师、政工专业技术人员 政工师。“客户经理等级”下拉框中的列表信息为高级专家级客户经理、专家级客户经理、资深客户经理、高级客户经理、客户经理、客户经理助理、无。“业务</p><p style='padding:5px 0px;'>20、线条”下拉框中的列表信息为：对公、对个人。
（3）界面的样式信息可以等学完CSS后再进行完善。
答：源码请参见“CH04_LAB\clientMgrAdd.html”。
2．请使用Dreamweaver创建一个HTML文件，文件名为studyMgrAdd.html，网页显示效果如图4-20所示。
图4-20 上机指导第2题网页效果
要求如下。
（1）使用表格进行布局。
（2）其中“资料类型”下拉框中的列表信息为：规章制度、学习培训材料、岗位资格考试教程、客户营销技巧。
（3）界面的样式信息可以等学完CSS后再进行完善。
答：源码请参见“CH04_LAB\studyM</p><p style='padding:5px 0px;'>21、grAdd.html”。
习题
1．CSS的语法结构由三部分组成：选择器 、 属性 、 值 。
2．添加CSS的3种方法为 内联样式 、 内部样式 、外部样式 。
3．常用的字体属性有font-size、font-family、font-style、font-weight、font-variant。
4．CSS中的选择器不包括（ A ）。
A．超文本标记选择器 B．类选择器
C．标签选择器 D．ID选择器
5．若要在网页中插入样式表main.css，以下用法中，正确的是（ A ）。
A．<link href="main.css" type="text/css</p><p style='padding:5px 0px;'>22、" rel="stylesheet">
B．<link src="main.css" type="text/css" rel="stylesheet">
C．<link href="main.css" type="text/css">
D．<include href="main.css" type="text/css" rel="stylesheet">
6．样式表定义#title {color:red}表示（ B ）。
A．网页中的标题是红色的
B．网页中某一个id为title的元素中的内容是红色的
C．网页中元素名为title的内容是红色的
D</p><p style='padding:5px 0px;'>23、．以上任意一个都可以
7．CSS文本属性中，文本对齐属性的取值有（ BCDE ）。
A．auto B．justify C．center D．right E．left
上机指导
（1）对网页中“你好，欢迎使用CSS样式”文本内容应用字体属性，具体要求：字体为宋体，字体大小为36px，字体加粗。
答：源代码请参见“CH05_LAB \test01.html”。
（2）使用内联样式表，实现图5-34所示的页面效果。使用2个<p>标签包含相应的文本信息，要求设置如下样式：
① 第一段内容“内联样式表的应用”，宋体、字体大小为20px、字体颜色为蓝色、居中显示。
② </p><p style='padding:5px 0px;'>24、第二段内容“第一个样式表的使用……”，默认字体，字体大小为30px、加粗、居中显示。
答：源代码请参见“CH05_LAB \ test02.html”。
（3）设计一个网页，其页面展示效果如图5-35所示，具体要求如下：
①“冬至的由来”使用<h1>标题，字体颜色为蓝色。
② 使用<p>标签标记两段文字，左对齐显示，行间距为15px。
③ 正文中所有“冬至”的文字，显示为蓝色字体。
答：源代码请参见“CH05_LAB\test03.html”。
习题
1．网页布局的概念是把即将出现在网页中的所有元素进行 排版 。
2．盒模型由 外边距 、 内边距 、 内容 和 </p><p style='height:0px;padding:0;overflow:hidden'>25、边框 组成。
3．盒子的定位方式有 静态定位、相对定位 、绝对定位和固定定位。
4．实现元素浮动的属性为float ，清除浮动可以使用 clear 属性。
5．CSS中盒子的padding属性包括的属性有（BCDE ）。
A．填充 B．上填充 C．底填充
D．左填充 E．右填充
6．CSS中，下面不属于盒子模型属性的是（A ）。
A．borderStyle B．margin C．padding D．border
7．下列CSS规则中能够让图层div不显示的选项是（ B ）。
A．div{display:block;} B．div{display:none;}</p><p style='height:0px;padding:0;overflow:hidden'>26、
C．div{display:inline;} D．div{display:hidden;}
8．下列CSS规则中能让列表项水平排列的选项是（ A ）。
A．li{float:left;} B．li{float:none;}
C．li{float:middle;} D．li{float:up;}
9．简述采用DIV+CSS技术进行页面布局的基本步骤。
答：DIV+CSS布局的步骤大致有4步：第一步在整体上对页面进行分块；第二步使用<div>标签进行分块设计，清理<div>标签的嵌套以及层叠关系；第三步对<div>标签进行CSS定位；第四步在各个块中填充相应的内容。
上机</p><p style='height:0px;padding:0;overflow:hidden'>27、指导
1.通过CSS+DIV实现鲜花网站的设计，具体要求如下。
（1）网站布局，由三个<div>组成，构建一行两列的网站页面。
（2）DIV1设置背景图片，使用table表格实现上方菜单导航。
（3）DIV2通过form表单+列表实现。
（4）DIV3实现图6-24所示的排列展示效果。
（5）背景图片位于image文件夹下。
答：源代码请参见“CH06_LAB \ test1\flowerShow.html”。
2．通过CSS+DIV实现个人主页（见图6-25）的设计具体要求如下。
（1）网站导航使用table（已用矩形框标示出来）完成，宽度为600px。
（2）网页布</p><p style='height:0px;padding:0;overflow:hidden'>28、局：两列布局。
（3）背景图片位于image文件夹下。
答：源代码请参见“CH06_LAB\test2\personShow.html”。
习题
1.CSS3遵循了___模块化___开发模式。
2.在CSS3中增加的设置元素不透明度的属性的是_opacity__。
3.CSS3中新增加的选择器分别是__关系选择器__、__属性选择器_和__伪类选择器___。
4.CSS3中设置边框圆角的属性是__border-radius__，设置文本阴影的属性是_text-shadow__。
5.CSS3中新增加的颜色模式有__RGBA__、___HSL___和__HSLA___。
</p><p style='height:0px;padding:0;overflow:hidden'>29、
6.在CSS3中，为某元素设置border-radius：20px 25px的圆角样式，其中20px作用在该元素的___上左边角__、__下右边角___，25px作用在该元素的___下左边角___、___上右边角___。
7.CSS3中，新增加的UI元素状态伪类选择器有__checked选择器___、___enabled选择器___和____disabled选择器______。
8.在CSS3中，text-overflow属性的取值可以为__clip__和__ ellipsis _____。
9.RGBA色彩模式的语法为rgba(r,g,b,a),其中a代表_透明度___，取值为__0</p><p style='height:0px;padding:0;overflow:hidden'>30、~1__。
上机指导
1.使用CSS3制作如图所示导航菜单
图7-24 CSS3制作导航菜单实现效果一
要求：1导航条设置圆角效果
2 导航菜单选项之间设置分隔线（第一个选项前不设置，最后一个选项后不设置）
3 当鼠标悬停到任意的菜单选项时，该菜单选项右下方出现紫色阴影效果，当鼠标移 开后，阴影效果消失，如图所示
图7-25 CSS3制作导航菜单实现效果二
答：源代码请参见“CH07_LAB\navigation.html”。
2.为下面代码添加CSS样式，实现如图所示效果。
<body>
<div class="yue">
<</p><p style='height:0px;padding:0;overflow:hidden'>31、/div>
<div class="text">
<span>中</span>
<span>秋</span>
<span>佳</span>
<span>节</span>
</div>
</body>
图7-26 “中秋佳节”网页实现效果
要求:
1.class=”yue”的div元素，宽度为300px,高度为300px,背景为素材bg7-7.jpg，设置圆角实现月亮效果。
2.使用伪类选择器分别设置“中”、“秋”“佳”、“节”字体的位置以及阴影效果。
答：源代码请参见“CH07_LAB\goddess.html”。
习题
一、选</p><p style='height:0px;padding:0;overflow:hidden'>32、择题
1.以下代码运行后的结果是输出( B )
var a=[1, 2, 3];
console.log(a.join());
A．123 B．1,2,3 C．1 2 3 D．[1,2,3]
2.在 JavaScript中，'1555’+3 的运行结果是( C )
A．1558 B．1552 C．15553 D．1553
3.以下代码运行后弹出的结果是( B )
var a = 888;
++a;
alert(a++);
A．888 B．889 C．890 D</p><p style='height:0px;padding:0;overflow:hidden'>33、．891
4.关于变量的命名规则，下列说法正确的是（ ABCDE ）
A．首字符必须是大写或小写的字母、下划线（_）或美元符（$）
B．除首字母的字符可以是字母、数字、下划线或美元符
C．变量名称不能是保留字
D．长度是任意的
E．区分大小写
5.下列哪一个表达式返回值为假（ B ）
A．!(3<=1)
B．(4>=4)&&(5<=2)
C．(“a”==“a”)&&(“c”!=“d”)
D．(2<3)||(3<2)
二 填空题
1.Boolean类型的值有true 和false。
2.在HTML文件中引入JavaScript</p><p style='height:0px;padding:0;overflow:hidden'>34、的两种方式是直接把js代码写在html页面中和在页面中进行引入js文件。
3．下面代码执行完成后，k的结果是 10
var i = 0,j = 0;
for(;i<10,j<6;i++,j++){
k = i + j;
}
上机指导
1. 请编写程序，在网页上打印输出杨辉三角形
答：源代码请参见“CH08_LAB\yanghui.html”。
2.编写一个函数，在页面上输出1~1000之间所有能同时被3、5、7整除的整数，并要求每行显示6个这样的数。
答：源代码请参见“CH08_LAB\number.html”。
习题
1. 要求用Ja</p><p style='height:0px;padding:0;overflow:hidden'>35、vaScript实现下面的功能：在一个文本框中内容发生改变后，单击页面的其他部分将弹出一个消息框显示文本框中的内容，下面语句正确的是( A )。
A.<input type="text" onChange="alert(this.value)">
B.<input type="text" onClick="alert(this.value)">
C.<input type="text" onChange="alert(text.value)">
D.<input type="text" onClick="alert(value)">
2. 下列选项中，( D )不是网页中的事件。
</p><p style='height:0px;padding:0;overflow:hidden'>36、A.onclick
B.onmouseover
C.onsubmit
D.onpressbutton
3. 在HTML页面中，不能与onChange事件处理程序相关联的表单元素有( D )。
A.文本框
B.复选框
C.列表框
D.按钮
4. 以下关于JavaScript事件的描述中，不正确的是：（D）
A.click——鼠标单击事件
B.focus——获取焦点事件
C.mouseOver——鼠标指针移动到事件源对象上时触发的事件
D.change——选择字段时触发的事件
5. 考察以下代码片段：
＜script type="text</p><p style='height:0px;padding:0;overflow:hidden'>37、/JavaScript"＞
function handleEvent() {
var oTextbox =document.getElementById("txt1");
oTextbox.value += " " + event.type;//event是所触发的事件对象
}
＜/script＞ 请在文本框中操作键盘：
＜input type="text" id="txt"size="5"
onkeydown="handleEvent()"
onkeyup="handleEve</p><p style='height:0px;padding:0;overflow:hidden'>38、nt()"
onkeypress="handleEvent()"/＞
＜textarea id="txt1" rows="6" cols="30"＞＜/textarea＞
如果光标定位文本框中，敲击键盘的shift键，文本域中的输出结果为:（B ）
A.keydown keyup keypress
B.keydown keyup
C.keydown
D.keyup
6. 分析下面的代码：
<HTML>
<BODY>
<SELECT type="select" name="s1" onChange=ale</p><p style='height:0px;padding:0;overflow:hidden'>39、rt("你选择了"+s1.value) >
<OPTION selected value=select1 >北京< /OPTION>
<OPTION value=select2 >上海</OPTION >
<OPTION value=select3 >广州</OPTION >
</SELECT>
</BODY >
</HTML>
下面对结果的描述正确的是：（ A ）。
A.当选中“上海”时，弹出“你选择了select2”信息框
B.当选中“广州”时，弹出“你选择了广州”</p><p style='height:0px;padding:0;overflow:hidden'>40、信息框
C.任何时候选中“北京”时，不弹出信息框
D.代码有错误，应该将“onChange”修改为“onClick”
7. 下列哪个不是js的事件类型（A）
A.动作事件
B.鼠标事件
C.键盘事件
D.HTML页面事件
8. 下列关于鼠标事件描述有误的是（B）
A.click表示鼠标单击
B.dblclick表示鼠标右击
C.mousedown表示鼠标的按钮被按下
D.mousemover表示鼠标进入某个对象范围，并且移动
9. 考察以下代码片段：
＜form action="#" name="for</p><p style='height:0px;padding:0;overflow:hidden'>41、m1"＞
＜input type="button" name="button1" value="按钮1"/＞
＜input type="button" name="button2" value="按钮2"/＞
＜/form＞
＜script type="text/javascript"＞
function handleEvent1(){
document.form1.button2.click();
}
function handleEvent2() {
alert(event.srcElement</p><p style='height:0px;padding:0;overflow:hidden'>42、name+"的"+event.type+"事件被触发！");
}
document.form1.button1.onclick = handleEvent1;
document.form1.button2.onclick =handleEvent2;
＜/script＞
如果用户点击了按钮1，此时输出结果为：A
A.输出 “button2的click事件被触发！”
B.输出 “button1的click事件被触发！”
C.程序出错，没有输出
D.依次输出“button1的click事件被触发！” “button2的click事件被</p><p style='height:0px;padding:0;overflow:hidden'>43、触发！”
10. 下列陈述有误的是（D）
陈述一：一个button的click事件只能添加一个事件处理函数
陈述二：js事件一旦添加就无法销毁
A.陈述1正确，陈述2错误
B.陈述1错误，陈述2正确
C.两种陈述都正确
D.两种陈述都错误
上机指导
1. 请使用Dreamweaver创建一个HTML文件，文件名为eventExercise.html，网页显示效果如图9-6所示
图9-6 上机指导第1题网页效果图
要求：
1、 点击“显示”按钮后，在下边显示已选择的水果
2、 要求分别用三种事件注册方式进行实现，体会三种事件</p><p style='height:0px;padding:0;overflow:hidden'>44、注册方式的区别
答：源代码请参见“CH09_LAB\fruits.html”，
CH09_LAB\fruits2.html，
CH09_LAB\fruits3.html。
习题
一、选择题
1、 以下说法不正确的是：（B）
A.DOM 的全称为 Document Object Model
B.BOM 为文档对象模型
C.DOM 的作用为可以对页面的内容进行增加删除替换
D.BOM 为浏览器对象模型
2、下列关于获取页面元素说法正确的是：（AC）
A.document.getElementById(‘a’)是通过 id 值a获取页面中的一个元素
B.</p><p style='height:0px;padding:0;overflow:hidden'>45、document.getElementsByName(“na”)是通过name属性值na获取页面中的一个元素
C.document.getElementsByTagName(“div”)是通过标签名获取所有 div
D.以上说法都不正确
二 填空题
1、请写出至少3个BOM中常用的对象 screen 、history、 location。
2、我们通过 location 对象获取当前页面地址的信息。
3、DOM 中获取第一个子节点 firstChild ，所有子节点 lastChild 。
上机指导
1、 假设有如下HTML页面：
<!DOCTYPE html PUBL</p><p style='height:0px;padding:0;overflow:hidden'>46、IC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档
欢迎您!
47、1）使用DOM来添加下列代码到上面这个页面中：
Hello World!
（2）把上面Hello World!
内容替换成Hello China！
（3）在上一题的基础上添加内容Hello Inspur！
答：源代码请参见“CH10_LAB\ hello.html”。
2 编写一个HTML页面，要求如下：该页面包含两个按钮：“绘制乘法表”和“删除一行”，页面效果如图10-11所示。
（1）点击“绘制乘法表”询问用户需要生成的行数，根据用户输入决定打印内容。
（2）点击“删除一行”，能够删除乘法表最后一行的内容。
图1048、11乘法表
答：源代码请参见“CH10_LAB\multi.html”。
习题
1．HTML代码实现过程中，设置标签点击弹出新窗口或者新标签页，可以设置属性 target="_blank" 或者 target="view_window" 两种方式。
2．HTML 4.01与HTML5之间在设置HTML文档的字符编码方面的差异是前者通常使用 ，后者使用 。
3．
49、HTML文档中如果要去除载入图片失败时显示在左上角的碎片图标，要借用![]()
标签的 onerror 事件和JavaScript。
4．HTML文档中设置登录或者注册页面时，表单提交需要设置method使用 post 方式。
上机指导
1. 说一下Java语言的特点及相对于其他编程语言的优点？本章介绍的商城首页幻灯片广告，具体实现时还有各种不同的切换效果，请查找资料实现其他切换效果，例如百叶窗、放射、飞入等。
答：源代码请参见“CH11_LAB\key1\index.html”。
2. 本章介绍的购物车页面，当前商品数量修改方式为双击编辑，请尝试添加修改商品数量的加减号按钮，以实现单击加减号修改商品数量。
答：源代码请参见“CH11_LAB\key2\index.html”。
浙ICP备2021020529号-1 | 浙B2-20240490 
