《Web前端开发技术(HTML+CSS+JavaScript)》章节练习题答案课后习题库1-11章全.docx

习题1. 什么是Web技术？ 答：Web即全球广域网（World Wide Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联的网状结构。2. 什么是Web前端？ 答：Web前端是指基于Web（现在一般指动态页面技术）的客户端软件，也就是通常说的在浏览器端运行的网页程序。Web前端降低了应用软件部署的难度，减少了更新操作，只需对服务器一端的软件更新即可完成所有用户需要的更新，且现在的动态页面技术基本可以实现所有的传统C/S客户端的功能。3. 什么是Web项目？Web项目包含哪些内容？Web前端开发技术有哪些？答：（1）Web项目也可以称为Web工程或者Web应用程序。它是一种可以通过Web访问的应用程序。Web项目最大的一个好处就是用户很容易访问，用户只要安装了浏览器即可，不需要再安装其他软件。例如现在经常使用的门户网站（新浪、搜狐等）、电商网站（淘宝、京东等）、网上银行等都属于Web项目，用户通过浏览器就可以访问和使用它们。Web项目开发与建设是目前软件开发领域的三大方向之一。（2）Web项目由两大部分组成，分别是Web客户端和Web服务器端。Web客户端的作用是组织和显示来自Web服务器端的信息，以及接收用户从界面上输入的信息并传递到Web服务器端；Web服务器端的作用是进行业务逻辑的处理和数据存储，并把处理后的结果反馈到Web客户端，供用户使用。（3）基本的静态网页开发技术为HTML/CSS/JavaScript，图1-2所示为Web前端基础开发技术的基本情况。其中HTML的英文全称是Hyper Text Markup Language，中文全称是超文本标记语言，作用是在浏览器端组织和显示网页信息（文本、图片、视频等），属于网页的内容层。CSS英文全称是Cascading Style Sheets，中文全称是层叠样式表，作用是格式化网页的样式，如文本的字体、图片显示位置等，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，属于网页的样式层。JavaScript是客户端脚本语言，它使网页与用户之间产生动态交互效果，属于网页的行为层。上机指导1.使用Adobe Dreamweaver CC 2017创建一个HTML文档，文档名为inspur.html，网页中显示文本信息“浪潮优派欢迎你”。答：源码请参见“CHO1_LABinspur.html”。习题1用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。A B C D 2创建最小的标题文本标签是（ D ）。ABCD3HTML中，设置背景颜色的代码是（ A ）。ABCD4在HTML中，下面是段落标签的是（ D ）。A BC D5HTML文件中的图片标记是（ B ）。ABCD6HTML文本显示状态代码中，表示（ A ）。A文本加注下标线B文本加注上标线C文本闪烁D文本或图片居中7创建一个位于文档内部位置的链接的代码是（ D ）。ABCD8HTML中，插入图像的HTML代码是，其中src的含义是（ B ）。A链接的地址B图像的路径C所插入图像的属性D以上都正确9设置围绕一个图像的边框的大小的标记是（ D ）。ABCD10设置水平线高度的HTML代码是（ B ）。ABCD11HTML代码表示（ C ）。A创建一个超链接B创建一个自动发送电子邮件的链接C创建一个位于文档内部的链接点D创建一个指向位于文档内部的链接点上机指导1使用Dreamweaver创建一个HTML文件，文件名为dangdangIndex.html，网页显示效果如图2-27所示。图2-27 上机指导第1题网页显示效果要求如下。（1）“首页”“我的当当”“37类商品”三个按钮链接到本页即可。（2）要求marquee属性从下到上，高度为100，鼠标移动至上边后停止，离开后继续移动。使用无序列表内容包括：衬衫全场满百返30元A券当当网图书短信比价服务发表评论，月月礼券等你拿雀巢矿泉水“开盖赢大礼”当当有奖问答，69元抢购！当当玩具让利狂潮抢购中当当购物卡，送礼好选择（3）网页中所有的图片信息，存在ch2images目录中。答：源码请参见“CH02_LABdangdangIndex.html”。2使用Dreamweaver创建一个HTML文件，文件名为workIndex.html，网页显示效果如图2-28所示。图2-28 上机指导第2题网页显示效果要求如下。（1）单击“工作室简介”跳转到“工作室简介”位置。（2）单击“设计作品”跳转到“设计作品”位置。（3）单击“广告知识”跳转到“广告知识”位置。（4）单击“E-mail站长”可以给自己的某一个qq邮箱发送邮件。（5）“欢迎光临梦幻美术工作室！”从右向左移动，并要求来回移动，当鼠标移动上去的时候停止，鼠标移开继续移动。（6）广告知识下的链接都链接到本页即可。（7）网页中所有的图片信息，存在目录ch2images中。答：源码请参见“CH02_LABworkIndex.html”。习题1框架中“不可改变大小”的语法是（ D ）。ABCD2设置围绕表格的边框宽度的HTML代码是（ D ）。ABCD3在HTML代码中，给表格添加行的标记是（ A ）。ABCD以上都正确4HTML代码表示（ B ）。A设置表格单元格之间空间的大小B设置表格单元格边框与其内部内容之间空间的大小C设置表格的宽度用绝对像素值或文档总宽度的百分比D设置表格单元格的水平对齐5表格标记的基本结构是（ C ）。ABCD6以下标记符中，用于设置表格标题的是（ B ）。ABCD7定义表格常用的3个标签是（ ABC ）。ABCD8两个属性（ AD ）可用于表格的合并单元格。AcolspanBtrspanCtdspanDrowspan9用来指定（ B ）。A混合分框B纵向分框C横向分框D任意分框10HTML中“”的具体含义是（ A ）。A无框架时的内容B相关性C基本视窗名称D文件形态11定义框架要用到（ C ）标签。ABCD12定义上下分割的框架大小的是（ A ）。ArowsBcolsCwidthsDheights上机指导1使用Dreamweaver创建一个HTML文件，文件名为NBAIndex.html，网页显示效果如图3-15所示。图3-15 上机指导第1题网页效果要求如下。（1）要求使用表格元素。（2）表格中第一行的背景图片，存在ch3images目录中。答：源码请参见“CH03_LABNBAIndex.html”2使用Dreamweaver创建一个HTML文件，文件名为NBAIndex.html，网页显示效果如图3-16所示。图3-16 上机指导第2题网页效果要求如下。（1）要求使用表格元素。（2）表格中第一行的背景图片，存在ch3images目录中。答：源码请参见“CH03_LABNBAIndex.html”。习题1下列关于表单的说法不正确的一项是（ B ）。A表单对象可以单独存在于网页表单之外B表单中包含各种表单对象，如文本域、列表框和按钮C表单就是表单对象D表单由两部分组成：一是描述表单的HTML源代码，二是用来处理用户表单域中输入的信息的服务器端应用程序客户端脚本2若要产生一个4行30列的多行文本域，以下方法中，正确的是（ C ）。ABCD3HTML代码表示（ D ）。A创建表格B创建一个滚动菜单C设置每个表单项的内容D创建一个下拉菜单4HTML代码表示（ B ）。A创建一个单选框B创建一个单行文本输入区域C创建一个提交按钮D创建一个使用图像的提交按钮5实现下拉列表框，要用到（B）标签。ABCD上机指导1使用Dreamweaver创建一个HTML文件，文件名为clientMgrAdd.html，网页显示效果如图4-19所示。 图4-19 上机指导第1题网页效果要求如下。（1）要求使用表格进行布局。（2）其中“民族”下拉框中的列表信息为：汉族、少数民族、其他。“政治面貌”下拉框中的列表信息为：中共党员、中共预备党员、共青团员、群众、其他。“学历”下拉框中的列表信息为：小学、初中、高中、中专、高职、专科、本科、硕士研究生、博士研究生。“专业技术职称”下拉框中的列表信息为：工程专业技术人员 高级工程师、工程专业技术人员 工程师、工程专业技术人员 助理工程师、经济专业技术人员 高级经济师、经济专业技术人员 经济师、经济专业技术人员 助理经济师、会计专业技术人员 高级会计师、会计专业技术人员 会计师、会计专业技术人员 助理会计师、统计专业技术人员 高级统计师、统计专业技术人员 统计师、统计专业技术人员 助理统计师、审计专业技术人员 高级审计师、审计专业技术人员 审计师、审计专业技术人员 助理审计师、政工专业技术人员 助理政工师、政工专业技术人员 高级政工师、政工专业技术人员 政工师。“客户经理等级”下拉框中的列表信息为高级专家级客户经理、专家级客户经理、资深客户经理、高级客户经理、客户经理、客户经理助理、无。“业务线条”下拉框中的列表信息为：对公、对个人。（3）界面的样式信息可以等学完CSS后再进行完善。答：源码请参见“CH04_LABclientMgrAdd.html”。2请使用Dreamweaver创建一个HTML文件，文件名为studyMgrAdd.html，网页显示效果如图4-20所示。图4-20 上机指导第2题网页效果要求如下。（1）使用表格进行布局。（2）其中“资料类型”下拉框中的列表信息为：规章制度、学习培训材料、岗位资格考试教程、客户营销技巧。（3）界面的样式信息可以等学完CSS后再进行完善。答：源码请参见“CH04_LABstudyMgrAdd.html”。习题1CSS的语法结构由三部分组成：选择器、属性、值。2添加CSS的3种方法为内联样式、内部样式、外部样式。3常用的字体属性有font-size、font-family、font-style、font-weight、font-variant。4CSS中的选择器不包括（ A ）。A超文本标记选择器B类选择器C标签选择器 DID选择器5若要在网页中插入样式表main.css，以下用法中，正确的是（ A ）。ABC D6样式表定义#title color:red表示（ B ）。A网页中的标题是红色的B网页中某一个id为title的元素中的内容是红色的C网页中元素名为title的内容是红色的D以上任意一个都可以7CSS文本属性中，文本对齐属性的取值有（ BCDE ）。Aauto Bjustify Ccenter DrightEleft上机指导（1）对网页中“你好，欢迎使用CSS样式”文本内容应用字体属性，具体要求：字体为宋体，字体大小为36px，字体加粗。答：源代码请参见“CH05_LAB test01.html”。（2）使用内联样式表，实现图5-34所示的页面效果。使用2个标签包含相应的文本信息，要求设置如下样式： 第一段内容“内联样式表的应用”，宋体、字体大小为20px、字体颜色为蓝色、居中显示。 第二段内容“第一个样式表的使用”，默认字体，字体大小为30px、加粗、居中显示。 答：源代码请参见“CH05_LAB test02.html”。（3）设计一个网页，其页面展示效果如图5-35所示，具体要求如下：“冬至的由来”使用标题，字体颜色为蓝色。 使用标签标记两段文字，左对齐显示，行间距为15px。 正文中所有“冬至”的文字，显示为蓝色字体。答：源代码请参见“CH05_LABtest03.html”。习题1网页布局的概念是把即将出现在网页中的所有元素进行排版。2盒模型由外边距、内边距、内容和边框组成。3盒子的定位方式有静态定位、相对定位、绝对定位和固定定位。4实现元素浮动的属性为float ，清除浮动可以使用clear属性。5CSS中盒子的padding属性包括的属性有（BCDE ）。A填充B上填充C底填充D左填充E右填充6CSS中，下面不属于盒子模型属性的是（A ）。AborderStyleBmarginCpadding Dborder 7下列CSS规则中能够让图层div不显示的选项是（ B ）。Adivdisplay:block;Bdivdisplay:none;Cdivdisplay:inline;Ddivdisplay:hidden;8下列CSS规则中能让列表项水平排列的选项是（ A ）。Alifloat:left; Blifloat:none;Clifloat:middle; Dlifloat:up;9简述采用DIV+CSS技术进行页面布局的基本步骤。答：DIV+CSS布局的步骤大致有4步：第一步在整体上对页面进行分块；第二步使用标签进行分块设计，清理标签的嵌套以及层叠关系；第三步对标签进行CSS定位；第四步在各个块中填充相应的内容。上机指导1.通过CSS+DIV实现鲜花网站的设计，具体要求如下。（1）网站布局，由三个组成，构建一行两列的网站页面。（2）DIV1设置背景图片，使用table表格实现上方菜单导航。（3）DIV2通过form表单+列表实现。（4）DIV3实现图6-24所示的排列展示效果。（5）背景图片位于image文件夹下。答：源代码请参见“CH06_LAB test1flowerShow.html”。2通过CSS+DIV实现个人主页（见图6-25）的设计具体要求如下。（1）网站导航使用table（已用矩形框标示出来）完成，宽度为600px。（2）网页布局：两列布局。（3）背景图片位于image文件夹下。答：源代码请参见“CH06_LABtest2personShow.html”。习题1.CSS3遵循了_模块化_开发模式。2.在CSS3中增加的设置元素不透明度的属性的是_opacity_。3.CSS3中新增加的选择器分别是_关系选择器_、_属性选择器_和_伪类选择器_。4.CSS3中设置边框圆角的属性是_border-radius_，设置文本阴影的属性是_text-shadow_。5.CSS3中新增加的颜色模式有_RGBA_、_HSL_和_HSLA_。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代表_透明度_，取值为_01_。上机指导1.使用CSS3制作如图所示导航菜单图7-24 CSS3制作导航菜单实现效果一要求：1导航条设置圆角效果 2 导航菜单选项之间设置分隔线（第一个选项前不设置，最后一个选项后不设置） 3 当鼠标悬停到任意的菜单选项时，该菜单选项右下方出现紫色阴影效果，当鼠标移开后，阴影效果消失，如图所示图7-25 CSS3制作导航菜单实现效果二答：源代码请参见“CH07_LABnavigation.html”。2.为下面代码添加CSS样式，实现如图所示效果。中秋佳节图7-26 “中秋佳节”网页实现效果要求:1.class=”yue”的div元素，宽度为300px,高度为300px,背景为素材bg7-7.jpg，设置圆角实现月亮效果。2.使用伪类选择器分别设置“中”、“秋”“佳”、“节”字体的位置以及阴影效果。答：源代码请参见“CH07_LABgoddess.html”。习题一、选择题1.以下代码运行后的结果是输出( B )var a=1, 2, 3;console.log(a.join();A123 B1,2,3 C1 2 3 D1,2,32.在 JavaScript中，1555+3 的运行结果是( C )A1558 B1552 C15553 D15533.以下代码运行后弹出的结果是( B )var a = 888;+a;alert(a+);A888 B889 C890 D8914.关于变量的命名规则，下列说法正确的是（ ABCDE ）A首字符必须是大写或小写的字母、下划线（_）或美元符（$）B除首字母的字符可以是字母、数字、下划线或美元符C变量名称不能是保留字D长度是任意的E区分大小写5.下列哪一个表达式返回值为假（ B ）A!(3=4)&(5=2)C(“a”=“a”)&(“c”!=“d”)D(23)|(32)二 填空题1.Boolean类型的值有true 和false。2.在HTML文件中引入JavaScript的两种方式是直接把js代码写在html页面中和在页面中进行引入js文件。3下面代码执行完成后，k的结果是 10 var i = 0,j = 0;for(;i10,j6;i+,j+)k = i + j;上机指导1. 请编写程序，在网页上打印输出杨辉三角形答：源代码请参见“CH08_LAByanghui.html”。2.编写一个函数，在页面上输出11000之间所有能同时被3、5、7整除的整数，并要求每行显示6个这样的数。答：源代码请参见“CH08_LABnumber.html”。习题1. 要求用JavaScript实现下面的功能：在一个文本框中内容发生改变后，单击页面的其他部分将弹出一个消息框显示文本框中的内容，下面语句正确的是( A )。A.B.C.D.2. 下列选项中，( D )不是网页中的事件。A.onclickB.onmouseoverC.onsubmitD.onpressbutton3. 在HTML页面中，不能与onChange事件处理程序相关联的表单元素有( D )。A.文本框B.复选框C.列表框D.按钮4. 以下关于JavaScript事件的描述中，不正确的是：（D） A.click鼠标单击事件 B.focus获取焦点事件 C.mouseOver鼠标指针移动到事件源对象上时触发的事件 D.change选择字段时触发的事件5. 考察以下代码片段： script type=text/JavaScript function handleEvent() var oTextbox =document.getElementById(txt1); oTextbox.value += + event.type;/event是所触发的事件对象 /script 请在文本框中操作键盘： input type=text id=txtsize=5 onkeydown=handleEvent() onkeyup=handleEvent() onkeypress=handleEvent()/ textarea id=txt1 rows=6 cols=30/textarea如果光标定位文本框中，敲击键盘的shift键，文本域中的输出结果为:（B ）A.keydown keyup keypress B.keydown keyup C.keydown D.keyup 6. 分析下面的代码： 北京 上海 广州 下面对结果的描述正确的是：（ A ）。 A.当选中“上海”时，弹出“你选择了select2”信息框 B.当选中“广州”时，弹出“你选择了广州”信息框 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=form1 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.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事件被触发！” 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、 要求分别用三种事件注册方式进行实现，体会三种事件注册方式的区别答：源代码请参见“CH09_LABfruits.html”，CH09_LABfruits2.html，CH09_LABfruits3.html。习题一、选择题1、 以下说法不正确的是：（B）A.DOM的全称为 Document Object ModelB.BOM为文档对象模型C.DOM的作用为可以对页面的内容进行增加删除替换D.BOM为浏览器对象模型2、下列关于获取页面元素说法正确的是：（AC） A.document.getElementById(a)是通过 id 值a获取页面中的一个元素 B.document.getElementsByName(“na”)是通过name属性值na获取页面中的一个元素 C.document.getElementsByTagName(“div”)是通过标签名获取所有 divD.以上说法都不正确二 填空题1、请写出至少3个BOM中常用的对象 screen 、history、 location。2、我们通过 location 对象获取当前页面地址的信息。3、DOM中获取第一个子节点 firstChild ，所有子节点 lastChild 。上机指导1、 假设有如下HTML页面：无标题文档欢迎您!（1）使用DOM来添加下列代码到上面这个页面中：Hello World!（2）把上面Hello World!内容替换成Hello China！（3）在上一题的基础上添加内容Hello Inspur！答：源代码请参见“CH10_LAB hello.html”。2 编写一个HTML页面，要求如下：该页面包含两个按钮：“绘制乘法表”和“删除一行”，页面效果如图10-11所示。（1）点击“绘制乘法表”询问用户需要生成的行数，根据用户输入决定打印内容。（2）点击“删除一行”，能够删除乘法表最后一行的内容。图10-11乘法表答：源代码请参见“CH10_LABmulti.html”。习题1HTML代码实现过程中，设置标签点击弹出新窗口或者新标签页，可以设置属性target=_blank或者target=view_window两种方式。2HTML 4.01与HTML5之间在设置HTML文档的字符编码方面的差异是前者通常使用，后者使用。3HTML文档中如果要去除载入图片失败时显示在左上角的碎片图标，要借用标签的onerror事件和JavaScript。4HTML文档中设置登录或者注册页面时，表单提交需要设置method使用post方式。上机指导1. 说一下Java语言的特点及相对于其他编程语言的优点？本章介绍的商城首页幻灯片广告，具体实现时还有各种不同的切换效果，请查找资料实现其他切换效果，例如百叶窗、放射、飞入等。答：源代码请参见“CH11_LABkey1index.html”。2. 本章介绍的购物车页面，当前商品数量修改方式为双击编辑，请尝试添加修改商品数量的加减号按钮，以实现单击加减号修改商品数量。答：源代码请参见“CH11_LABkey2index.html”。