1+X认证Web前端开发初级模拟试题及答案7套

1+X认证Web前端开发初级模拟试题及答案7套一、单选题（共30小题，每小题2分，共60分）1、在HTML中，CSS样式中文本属性的说法错误的是（D）A.font-weight用于设置字体的粗细B.font-family用于设置文本的字体类型C.color用于设置文本的颜色D.text-align用于设置文本的字体形状2、在HTML中,通常要通过定位，CSS属性中可以设置垂直叠放次序（C）A.list-style

B.padding

C.z-index

D.Float3、在html中，样式表按照应用方式可以分为三种类型，其中不包括（D）。内嵌样式表行内样式表外部样式表文件类样式4

、有关下面代码片段的说法，（C）是正确的。<style

type="text/css">

A{

color:blue;

text-decoration:none;

}

A:link{

color:blue;

}A:hover{

color:red;

}A:visited{

color:green;

}</style>A.

A样式与A:link样式效果相同B.

A:hover是鼠标正在按下时链接文字的样式C.

A:link是未被访问的链接样式D.

A:visited是鼠标正在按下时链接文字的样式5、阅读以下代码段，则可知（

A

）。<inputtype="text"

name="text"><inputtype="radio"

name="radio"

value="女"><inputtype="checkbox"

name="checkbox"

value="checkbox">

<inputtype="file"

name="file">A.

上面代码表示的表单元素类型分别是：文本框、单选按钮、复选框、文件域B.

上面代码表示的表单元素类型分别是：文本框、复选框、单选按钮、文件域C.

上面代码表示的表单元素类型分别是：密码框、多选按钮、复选框、文件域D.

上面代码表示的表单元素类型分别是：文本框、单选按钮、下拉列表框、文件域6、以下不属于块级标签的是（C）A.divB.tableC.imgD.from7、如何显示这样一个边框：上边框10像素、下边框5像素、左边框20像素、右边框1像素？（D）A.border-width:10px5px20px1pxB.border-width:10px20px5px1pxC.border-width:5px20px10px1pxD.border-width:10px1px5px20px8、下列哪种方式是用类选择器定义样式的（B）p{color:red}

B..

one{color:red}

C.#two{color:red}

D.p,h1{color:red}9、阅读下面的HTML及CSS代码，图片距最外面的DIV外边缘的距离是（D）。<style

type="text/css">

#outbox

{

border:10px

solid

#ff0000;

width:400px;

}

#inbox

{

border:20px

solid

#ff0000;

margin:10px;

padding:10px;

}

</style>

<div

id="outbox">

<div

id="inbox"><img

src="flower.jpg"

/></div>

</div>

A．10px

B．30px

C．40px

D．50px10、在CSS3中，哪项表示选择title属性包含单词"abc"的全部元素。（D）A.[title~=abc]B.[title=abc]C.[title$="abc"]D.[title*="abc"]11、将一个div在鼠标放上去的时候向右偏移100px旋转180度，以下代码正确的是（A）A.transform:translateX(100px)rotate(180deg);transform:translateX(-100px)rotate(-180deg);transform:translateY(100px)rotate(180deg);transform:translateY(-100px)rotate(-180deg);12、将删除指定元素的子节点，并返回被删除的节点对象，使用哪个方法。（D）A.insertBefore方法B.cloneNode方法C.appendChild方法D.removeChild方法13、将s中所有的字母变成小写字母的方法是（B）A.toSmallCaseB.toLowerCaseC.toLIttleCaseD.toUpperCase14、如果在HTML页面中包含如下图片标签，则选项中的（）语句能够实现隐藏该图片的功能。(D)<imgid=”pic”src=”Sunset.jpg”width=”400”height=”300”>A.document.getElementById(“pic”).style.display=”visible”;B.document.getElementById(“pic”).style.display=”disvisible”;C.document.getElementById(“pic”).style.display=”block”;D.document.getElementById(“pic”).style.display=”none”;15、阅读以下程序functionreplaceStr(inStr,oldStr,newStr){varrep=inStr;while(rep.indexOf(oldStr)>-1){rep=rep.replace(oldStr,newStr);}returnrep;}alert(replaceStr("howdoyoudo","do","are"));以下结果正确的是(A)A.弹出警示对话框，显示howareyouare。B.弹出警示对话框，显示howareyoudo。C.弹出警示对话框，显示howdoyouare。D.弹出警示对话框，显示howyoudo。16、有语句“varx=0;while(____)x+=2;”，要使while循环体执行10次，空白处的循环判定式应写为：(C)x<10x<=10x<20.x<=2017、在jquery中指定一个类，如果存在就执行删除功能，如果不存在就执行添加功能，下面哪一个是可以直接完成该功能的？（C）

A、removeClass()deleteClass()toggleClass(class)addClass()18、下面不属于ajax事件的是？(C)

A、ajaxComplete(callback)ajaxSuccess(callback)C、$.post(url)D、ajaxSend(callback)19、在HTML5中，哪个元素可以对页面的标题进行分组。（B）A.address元素B.hgroup元素C.section元素D.nav元素20、以下哪个元素可以为figure标签添加标题。（C）titleB.h3C.figcaptionD.caption21、在CSS中，为页面中的某个DIV标签设置样式div{width:200px;padding:020px;border:5px;}，则该标签的实际宽度为（

D

）A.200px

B.220px

C.240px

D.250px22、以下哪个代码给元素设置背景裁切的属性（A）Abackound-clipBbackground-sizecbackound-overDbackound-contain23、弹性盒子中哪个不是justify-content的属性(C)A.flex-startB.flex-endC.flex-centerD.space-around

24、JavaScript的数据类型不包括。（D）A.数值B.字符串值C.数组D.类25、以下()表达式产生一个0~7之间(含0,7)的随机整数.(C)A.Math.floor(Math.random()*6)B.Math.floor(Math.random()*7)C.Math.floor(Math.random()*8)D.Math.ceil(Math.random()*8)26、在HTML文档对象模型中，history对象的（）用于加载历史列表中的下一个URL页面。(C)next()B.back()C.forward()D.go(-1)27、当浏览器窗口（包含宽度、高度）被调整后，触发以下哪项事件。（C）A.onsize事件B.onload事件C.onresize事件D.onchange事件28、Javascript中制作图片代替按钮的提交效果需要手动提交方法submit()，以下调用正确的是（C）A.submit()B.myform.submit()C.document.myform.submit()D.window.myform.submit();29、查看一下代码，请问输出正确的是（A）varTest={foo:"test",func:function(){varself=this;console.log(this.foo);console.log(self.foo);(function(){console.log(this.foo);console.log(self.foo);})();}};Test.func();A

testtestundefinedtestBtestundefinedundefinedtestCtesttestundefinedDtesttesttesttest30、以下哪个选项可以对元素定义不同的过渡动画效果。（D）A.animations属性B.transform属性C.position属性D.transition属性多选题（共15小题，每小题2分，共30分）1、border-style设置边框样式的属性有哪些。（ABD）A.dottedB.dashedC.doubleD.solid2、动画是使元素从一种样式逐渐变化为另一种样式的效果，使用什么来规定变化发生的时间的方式。（AB）A.form-toB.0%-100%C.0-100D.1-103、分析下面的HTML代码片段，则选项中的说法正确的是（AD）<tableborder="10"><tr><tdcolspan=2align="center">姓名</td></tr><tr><tdrowspan=2align="center">成绩</td><tdalign="center">语文</td></tr><tr><tdcolspan=2align="center">数学</td></tr><table>

A.“姓名”单元个跨2列

B.该表格的边框宽度为10毫米

C.该表格共有2行3列

D.该表格中的文字均居中显示4、在HTML中，使用HTML元素的class属性，将样式应用于网页上某个段落的代码如下所示：<p

class=”firstp”>这是一个段落</p>

下面选项中，（

AC

）正确定义了上面代码引用的样式规则。A.<sytle

type=”text/css”>p{color:red}</sytle>B.<sytle

type=”text/css”>#firstp{color:red}</sytle>C.<sytle

type=”text/css”>.firstp{color:red}</sytle>D.<sytle

type=”text/css”>p#firstp{color:red}</sytle>5、在页面中，能够调取对话框是哪些方法。（ABC）。A.alert()方法B.confirm()方法C.prompt()方法D.cloneNode方法6、可以指定超出盒中内容的显示样式的属性是。（AD）A.overflow属性B.font-overflow属性C.box-overflow属性D.text-overflow属性7、下列选项中，（）段HTML代码所表示的“返回”链接能够正确实现IE工具栏后退按钮的功能。(AD)A.<ahref=”javascript:history.go(-1)”>返回</a>B.<ahref=”javascript:location.back()”>返回</a>C.<ahref=”javascript:locationgo(-1)”>返回</a>D.<ahref=”javascript:history.back()”>返回</a>8、在HTML页面中，定义了如下所示的Javascript函数，则正确调用该函数的HTML代码是（选择二项）(AB)functioncompute(op){alert(op);}A.<inputname=”a”type=”button”onclick=”compute(this.value)”value=”+”>B.<inputname=”b”type=”button”onclick=”compute(‘-‘)”value=”-”>C.<inputname=”c”type=”button”onclick=”compute(“*”)”value=”*”>D.<inputname=”d”type=”button”onclick=”compute(/)”value=”/”>9、CSS中，盒模型的属性包括（BCD

）A.visible

B.margin

C.padding

D.border10、jQuery中遍历节点的方法，错误的是（BCD）

A.next()取得匹配元素后面紧邻的同辈元素

B.prev()取得匹配元素的所有同辈元素

C.siblings()取得匹配元素前的所有同辈元素

D.closest()取得元素紧邻的后一个元素匹配11、分析下面的JavaScript代码段a=newArray(2,3,4,5,6);sum=0;for(i=2;i<a.length;i++)sum+=a[i];document．write(sum);输出结果不正确的是(ABC)．A．20B．23456C．2，3，4，5，6D．1512、关于WEB标准以下说法正确的是（

ACD

）A.Web标准是一个复杂的概念集合，它由一系列标准组成B.这些标准全部都由W3C起草与发布C.Web标准可以分为3个方面D.Web标准里的表现标准语言主要包括CSS13、下面选项中属于css3新属性的是（BCD）A.text-alignB.border-radiusC.transitionD.box-shadow14、下面关于css3伪类描述正确的是（AB）A.p:first-of-type

选择属于其父元素的首个<p>;B.

p:nth-child(2)

选择属于其父元素的第二个子元素的每个<p>;元素。C.p:only-of-type

选择属于其父元素的唯一子元素的每个<p>;元素。D.p:only-child选择属于其父元素唯一的<p>;

15、CSS中的选择器包括（BCD）A.超文本标记选择器

B.类选择器

C.标签选择器

D.ID选择器三、判断题（共5小题，每小题2分，共10分。在每小题对应的括号内填入判断结果，用“√”表示正确，用“×”表示错误）1、<progress>是HTML5中新增的状态交互元素，用来表示页面中的某个任务完成的进度。（√）2、在CSS中，border:1px

2px

3px

4px表示设置某个HTML元素的上边框为1px、右边框为2px、左边框为3px、下边框为4px。（×）3、在css3代码transform:rotate(30deg)是逆时针旋转30度（×）4、下面的javascript代码的执行<scripttype="text/javascript">varx=45；if(x>=60){document.writeln("要下雨了")；}elseif(x>=50){document.writeln("天很阴")；}elseif(x>=30){document.writeln("很舒适")；}elseif(x>=00){document.writeln("很干燥")；}<script>是很干燥（×）5、在jquery中onclick()方法是用来做点击事件的（×）模拟卷8一、单选题（每小题2分，共30小题，共60分）1、在Bootstrap框架中，表单元素<input>要加上下列哪个类，才能给表单元素<input>添加圆角属性和阴影效果（）。A、.form-group B、.form-horizontal C、.form-inline D、.form-control2、Bootstrap框架中的.img-responsive类可以让图片支持响应式布局，它的实现原理是（）。A、设置max-width:100%;和height:auto;B、设置max-width:100%;和height:100%;C、设置width:auto;和max-height:100%;D、设置width:auto;和height:auto;3、在移动端使用Bootstrap时，导航条在屏幕显示时会被折叠，实现显示和折叠功能的按钮需要如何处理（）。A、折叠按钮设置data-toggle=’collapsed’，折叠容器需要添加collapsed类B、折叠按钮设置data-toggle=’collapse’，折叠容器需要添加collapse类C、折叠按钮设置data-toggle=’scroll’，折叠容器需要添加collapse类D、折叠按钮设置data-spy=’scroll’，折叠容器需要添加collapse类4、在Bootstrap中实现.nav的内容按比例填充所有可用空间，应该加哪个类（）。A、.nav-center B、.nav-fill C、.nav-left D、.nav-right5、在Bootstrap中，使用tab标签页插件，要显示的内容要放在下方哪个容器里面（）。A、.content B、.tab-group C、.tab-body D、.tab-content6、以下哪个标签不是HTML5的语义化标签（）。A、<header></header> B、<section></section>C、<marquee></marquee> D、<article></article>7、在使用css3盒模型时，box-sizing属性设置为（），元素的宽度只是该元素内容的宽度，而不包括边框和内边距的宽度。A、content-box B、border-box C、text-box D、none8、实现一个css3线性渐变效果，渐变的方向是从右上角到左下角，起点颜色是从白色到黑色，以下写法正确的是（）。A、background:linear-gradient(225deg,rgba(0,0,0,1),rgba(255,255,255,1));B、background:linear-gradient(-135deg,hsla(120,100%,0%,1),hsla(240,100%,100%,1));C、background:linear-gradient(totopleft,white,black);D、background:linear-gradient(tobottomleft,white,black);9、使用css3过渡效果“transition:

width

.5s

ease-in

.1s;”，其中“.5s”

对应的属性是（）。A、transition-property：对象中的参与过渡的属性B、transition-duration：对象过渡的持续时间C、transition-timing-function：对象中过渡的动画类型D、transition-delay：对象延迟过渡的时间10、使用SQL语句创建数据库，数据库名为mytest，下列SQL语句写法是正确的是（）。A、createmytest B、createtablemytestC、databasemytest D、createdatabasemytest11、下列哪项为查找结果按照学号降序排列（）。A、ORDERBYDESCStuNum B、ORDERBYStuNumDESCC、ORDERBYStuNumASC D、ORDERBYASCStuNum12、在视图上不能完成的操作是（）。A、查询 B、在视图上定义新的视图 C、更新视图 D、在视图上定义新的表13、用于将事务处理写到数据库的命令是（）。A、insert B、rollback C、commit D、savepoint14、关于PHP，下列说法错误的是（）。A、开发PHP网页所使用的脚本语言是PHPB、网页中的PHP代码同html标记符一样，必须用分隔符”<”和”>”将其括起来C、PHP网页，运行时在客户端可查看到真实的PHP源代码D、PHP和html可混合编程15、以下PHP变量名不正确的是（）。A、$_beijing B、$_Beijing C、$9Beijing D、$Beijing16、array_push()的作用是（）。A、将数组的第一个元素弹出 B、将数组的最后一个元素弹出C、将一个或多个元素压入数组的末尾 D、将一个或多个元素插入数组的开头17、以下关于继承的说法错误的是（）。A、一个类可以在声明中用extends关键字继承另一个类的方法和属性B、如果父类中的方法被声明为final，则子类无法覆盖该方法C、PHP可以多重继承，一个类可以继承多个父类D、属性不能被定义为final，只有类和方法才能被定义为final18、执行以下代码，输出结果是（）。<?PHPclassa{function__construct(){echo"echoclassasomething";}}classbextendsa{function__construct(){echo"echoclassbsomething";}}$a=newb();?>A、echoclassasomethingechoclassbsomethingB、echoclassbsomethingechoclassasomethingC、echoclassasomethingD、echoclassbsomething19、下面有关PHP中require()和include()的描述，说法错误的是（）。A、require函数通常放在PHP程序的最前面B、include函数一般是放在流程控制的处理部分中C、require_once语句和require语句完全相同，唯一区别是PHP会检查该文件是否已经被包含过，如果是则不会再次包含D、require在引入不存文件时产生一个警告且脚本还会继续执行，而include则会导致一个致命性错误且脚本停止执行20、PHP用于存储用户会话信息的超级全局变量是（）。A、$_GET B、$_POST C、$_FILES D、$_SESSION21、在PHP中用于存储cookie数据的超级全局变量是（）。A、$_COOKIES B、$_GETCOOKIESC、$_GETCOOKIE D、$_COOKIE22、以下PHP代码，用来查询mysql数据库中的User表，若能正常连接数据库，则以下选项中能正确执行$sql的查询语句的是（）。<?php……$conn=newmysqli($servername,$username,$password,$dbname);$sql="select*fromUser";（）;A、mysqli_query($conn,$sql); B、$conn->execute($sql);C、$conn->query($sql); D、query($sql);23、使用composer下载laravel时，若不指定下载版本，默认下载哪个版本的laravel（）。A、最新版本 B、稳定版本 C、某一固定版本 D、无法下载24、laravel中控制器所在文件路径是（）。A、app/Http/Controller B、routes/Http/ControllerC、app/Controller D、app/Http25、laravel的Blade模板中指定继承母模板的关键字是（）。A、@section B、@extends C、@include D、@yield26、以下laravel代码中$fillable作用是（）。classUserextendsModel{//定义模型关联的数据表(一个模型只操作一个表)protected$table='user';protected$fillable=['user_account','user_password','email','create_time','del'];}A、设置允许写入的数据字段 B、设置不允许写入的数据字段C、设置允许读取的数据字段 D、设置不允许读取的数据字段27、下面选项中，创建XMLHttpRequest对象的语法正确的是（）。A、xmlhttp=newXMLHttpRequest();B、xmlhttp=newActiveXObject(""Microsoft.XMLHTTP"");C、xmlhttp=newXMLHttpRequest(""Microsoft.XMLHTTP"");D、xmlhttp=newActiveXObject();28、使用jQuery发送AJAX请求，关于请求的类型说法正确的是（）。A、只能发送GET类型请求 B、只能发送POST类型请求C、可以发送PUT类型请求D、可以发送GET或者POST类型请求29、浏览器客户端向服务器发送AJAX请求，服务器接收请求，处理完毕后，返回数据为“处理成功”，AJAX获取到服务器返回的数据时，以下关于AJAX响应属性正确的是（）。A、status=403 B、readyState=4 C、status=404 D、readyState=330、下面选项中，将字符串""{""姓名"":""张三"",""性别"":""男""}""解析成JSON对象，写法正确的是（）。A、JSON.parses(""{""姓名"":""张三"",""性别"":""男""}"");B、JSON.stringify(""{""姓名"":""张三"",""性别"":""男""}"");C、JSON.parse(""{""姓名"":""张三"",""性别"":""男""}"");D、JSON.string(""{""姓名"":""张三"",""性别"":""男""}"");"二、多选题（每小题2分，共15小题，共30分）1、在Bootstrap栅格系统中，适应移动端超小设备(<576px)和移动端平板设备(<768px)，使用的类前缀是（）。A、.col-md- B、.col-lg- C、.col- D、.col-sm-2、下列关于Bootstrap栅格系统说法正确的是（）。A、栅格系统每一行不能少于12列B、通过“行(row)”在水平方向创建一组“列(column)”C、“行(row)”必须包含在.container（固定宽度）或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补(padding)D、如果一“行(row)”中包含了的“列(column)”大于12，多余的“列(column)”所在的元素将被作为一个整体另起一行排列3、在HTML5中，用于播放视频与音频文件的元素是（）。A、<video>元素 B、<audio>元素 C、<music>元素 D、<move>元素4、为了适应移动设备，html页面可以用meta标签对viewport进行控制，meta标签内可以控制下面哪些属性（）。A、initial-scale B、user-scalable C、max-width D、min-width5、在css3单位中，哪些相对font-size属性来计算（）。A、vh B、em C、vw D、rem6、若用如下的SQL语句创建了一个SC表：CREATETABLESC(S#CHAR(6)NOTNULL，C#CHAR(3)NOTNULL，SCOREINTEGER，NOTECHAR(20))向SC表插入如下数据时，哪些数据可以被成功插入（）。A、('201009'，'111'，60，'必修') B、('200823'，'101'，NULL，NULL)C、(NULL，'103'，80，'选修') D、('201132'，NULL，86，'101')7、MySQL数据库中，创建唯一索引的方式有（）。A、Createindex B、CreatetableC、创建表时设置主键约束 D、创建表时设置唯一约束8、XAMPP套件中包括哪些内容（）。A、PHP B、Apache C、MySQL D、Chrome9、PHP支持的复合数据类型是（）。A、Boolean布尔类型 B、Array数组C、Resource资源类型 D、Object对象10、在PHP中，以下哪些是不等运算符（）。A、≠ B、!= C、<> D、><11、PHP中可以实现循环的是（）。A、for B、break C、while D、waiting12、在PHP类定义中，对属性或方法的访问控制，是通过在前面添加关键字来实现的，以下属于访问控制关键字的选项是（）。A、public B、private C、protected D、default13、以下Laravel路由配置代码，若相关的控制类以及方法，模板文件都存在，正确的是（）。A、Route::post(“/login”,“UserController@login”);B、Route::get(“/index”,function(){returnview(“index”);});C、Route::match([“get”,“post”],“/reg”,“UserController@regist”);D、Route::any([“get”,“post”],“/user/{id}”,function($id){return“user”.$id;});14、使用RESTfulAPI规范设计用户管理模块接口，设计新增用户接口和查询用户接口时，分别选用动词为（）。A、POST B、PUT C、GET D、DELETE15、在商品管理系统中，使用jQueryajax发送请求，实现查询所有商品信息并显示至界面，最少需要在jQueryajax中设置哪些属性（）。A、url B、type C、data D、success三、判断题（每小题2分，共5小题，共10分。在每小题后对应括号内填入判断结果，正确的选项填写“√”，错误的选项填写“×”）1、Bootstrap插件全部依赖jQuery（）。2、某元素hidden属性为true时，元素属于不可见状态，元素内的内容也不会被浏览器创建（）。3、盒阴影box-shadow中“阴影模糊值”可以为负数（）。4、MySQL可使用source命令导入本地sql脚本文件（）。5、PHP可以使用“scanf”来打印输出结果（）。模拟卷9试题一（20分）阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（10）代码。【说明】在当今互联网技术高速发展的时代，搜索引擎是用户使用率最高的网络服务工具之一。本项目为“搜索引擎”网站。项目名称为Search，包括搜索主页面index.html、第一个标签页tab1.html、第二个标签页tab2.html和img文件夹，其中，img文件夹包括图片logo.png。页面布局和内容为：（1）index.html为搜索主页，分为三部分，自上而下依次是：搜索框、分类标签和搜索结果。其中，搜索结果使用iframe标签定义，显示tab1.html或tab2.html。（2）tab1.html为搜索结果页，是“标签页1-网页”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用2个table进行布局。（3）tab2.html为搜索结果页，是“标签页2-资讯”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用1个table进行布局。选择不同的类别标签，会显示该类别下的搜索结果。【效果图】（1）打开index.html效果如图1所示。图1-1（2）点击“标签页2-资讯”，搜索结果显示为tab2.html，效果如图2所示。图1-2【代码：搜索主页index.html】<!（1）html><!--文档声明--><html> <head> <metacontent="text/html;"（2）="utf-8"><!--文档字符编码为utf-8-->S <title>搜索</title><!--设置文档标题为“搜索”--> <style> .search_val{width:400px;margin-bottom:20px;}/*设置搜索框为400px，底部外边距为20px*/ a{margin-right:20px}/*设置a链接的右边距为20px*/ </style> </head> <body> <form（3）="index.html"method="get"> <inputtype="text"class="search_val"> <inputtype="（4）"value="搜索"/><!--提交按钮--> </form> <table><!--在iframe框架中打开被链接文档tab1.html或tab2.html--> <tr><td><ahref="tab1.html"（5）>标签页1-网页</a></td> <td><ahref="tab2.html"（5）>标签页2-资讯</a></td></tr> </table> <hr/> <!--tab1.html显示在iframe中--> <iframename="main"id="main"（6）width="500px"height="280px" frameborder="0"></iframe> </body></html>【代码：第一个标签页tab1.html】<!DOCTYPEhtml><html> <head> <metacontent="text/html;"charset="utf-8"> <title>搜索</title> <style> body{font-size:13px;}/*设置页面字体大小为13px*/ p{width:380px;}/*设置p元素的宽度为380px*/ p,h3{margin:0;padding:0;}/*设置内边距和外边距均为0*/ .noPic{width:460px;}/*设置类名为noPic的元素的宽度为460px*/ img{padding:10px;}/*设置图片的内边距为10px*/ </style> </head> <body> <tableborder="0"width="290px"><!--设置无边框表格--> <tr><td> <table> <tr><td（7）><!--合并两列--> （8）<!--设置标题“HTML”为三号标题--> </td></tr> <tr><tdrowspan="2"> <!--插入img文件夹下的logo.png图片--> <img（9）width="40px"></td> <td><p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接等...</p> </td></tr> <tr><td><ahref="#">http://HTML.com</a></td></tr> </table> </td></tr> <tr><tdcolspan="2"> <h3>HTMLStandard</h3> <pclass="noPic">1.2IsthisHTML5?Thissectionisnon-normative.Inshort:Yes.Inmorelength:theterm"HTML5"iswidelyusedasabuzzwordtorefer...</p> <ahref="#">http://HTMLS</a> </td></tr> </table> <ahref="#">1</a><ahref="#">2</a><ahref="#">3</a><ahref="#">4</a> </body></html>【代码：第二个标签页tab2.html】<!DOCTYPEhtml><html> <head> <metacontent="text/html;"charset="utf-8"> <title>搜索</title> <style> body{font-size:13px;}/*设置页面字体大小为13px*/ td{padding:10px;}/*设置td单元格的内边距为10px*/ p{width:450px;}/*设置p元素的宽度为450px*/ p,h3{（10）}/*设置内边距和外边距均为0*/ </style> </head> <body> <tableborder="0"width="290px"> <tr><td><h3>实现实时Html编辑器</h3><p>给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...</p><ahref="#">http://HTML.com</a></td></tr> <tr><td><h3>html中q标签(短的引用)的详细介绍</h3><p>本篇将介绍html中q标签(短的引用)的详细用法,有兴趣的朋友可以了解一下!学习html其实就是学习标签的用法,今天小编要介绍的是...</p><ahref="#">http://HTMLS</a></td></tr> </table> <ahref="#">1</a><ahref="#">2</a><ahref="#">3</a><ahref="#">4</a> </body></html>【问题】（20分，每空2分）进行静态网页开发，补全代码，在（1）至（10）处填入正确的内容。试题二（30分）阅读下列说明、效果图、HTML代码和CSS代码，开发网页动态页面样式，填写（1）至（15）代码。【说明】这是“Web技术社区”网站，该网站致力于推广和分享各种前端技术，如HTML、CSS、JavaScript和jQuery，现在我们需要编写该网站首页样式。项目名称为web_skill，包含首页index.html、css文件夹和img文件夹，其中，css文件夹包含index.css文件，img文件夹包含html.png、css.png、js.png和jquery.png图片。首页（index.html）内容分为两部分，一是【网站介绍】，位于页面上端，内容为【欢迎语】和【网站内容介绍】，以文字的形式展示；二是【技术介绍】，位于页面下端，展示四项【技术】，每项都包括【技术logo】和【技术特点】，以图片和列表的形式展示。对页面样式进行设计，要求为：（1）页面全局样式：设置页面全局属性，页面外边距和内边距为“0”，字体为“宋体”，字体大小为“35px”。为页面设置透明度动画，在页面加载时执行，透明度从“0”到“1”，动画持续时间为“1s”，动画次数为“1”次。（2）【网站介绍】样式：为页面上端【网站介绍】部分添加背景颜色“#000000”，并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。另外，为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。（3）【技术介绍】样式：为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。另外，为【技术】设置宽度为“17%”、外边距为“4%”；为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”；为【技术特点】中列表设置文本内容“居左”。【效果图】图2-1【代码：首页index.html】<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>Web技术社区</title><linkrel="stylesheet"type="text/css"href="（1）"/></head><body> <divid="introduction"> <divid="content"> <h2>欢迎来到XX网</h2><br/> <p>本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。</p> <p>本站致力于推广各种前端技术，所有资源...</p> </div> </div><br/><br/> <divid="（2）"><!--第一张图片和列表--> <divclass="card"> <imgsrc="img/html.png"alt="这是第一张图片"/><br/><br/> <ul> <li>HTML指的是超文本标记语言</li> /*...省略其它li，参见【效果图】内容*/ </ul> </div><!--第二张图片和列表--> <divclass="card"> <imgsrc="img/css.png"alt="这是第二张图片"/><br/><br/> <ul> <li>CSS指层叠样式表</li> /*...省略其它li，参见【效果图】内容*/ </ul> </div><!--第三张图片和列表--> <divclass="card"> <imgsrc="img/js.png"alt="这是第三张图片"/><br/><br/> <ul> <li>JavaScript是一种轻量级的编程语言</li>/*...省略其它li，参见【效果图】内容*/ </ul> </div><!--第四张图片和列表--> <divclass="card"> <imgsrc="img/jquery.png"alt="这是第四张图片"/><br/><br/> <ul> <li>jQuery是一个JavaScript函数库</li>/*...省略其它li，参见【效果图】内容*/ </ul> </div> </div></body></html>【代码：CSS文件index.css】（3）{margin:0;（4）;/*内边距*/（5）;/*字体*/font-size:35px;}body{ animation-name:fadeIn; （6）;animation-iteration-count:1;}（7）fadeIn{ from{opacity:0;} to{opacity:1;}}#introduction{（8）;/*背景颜色*/width:100%;height:400px;（9）;/*字体颜色*/}#content{（10）;/*绝对布局*/（11）;/*顶部边距*/left:16%; width:68%; text-align:center;}#main{ （12）; text-align:center;}#mainimg{（13）;border-radius:20px; height:200px; width:200px;}.card{ width:17%; margin:4%;}（14）{/*列表样式，以class加子元素选择器的方式填写*/ （15）;}【问题】（30分，每空2分）开发网页动态页面样式，补全代码，在（1）至（15）处填入正确的内容。试题三（30分）阅读下列说明、效果图和HTML代码，进行网页编程，回答问题1至问题5。【说明】随着个性化服务发展，学校、街边、社区等都流行将水果等商品洗净、切好，并装盒，按份出售。现开发一个“社区便利店收银系统”，店中每天提供固定种类的水果，装盒后，标记每一份价格，按份进行销售。在系统中，打开收银网页（casher.html），点击“+”添加销售水果，点击“结账”进行购买水果结算，点击“完成交易”进行下一个新用户购买。项目名称为casher，包含收银网页casher.html和js文件夹，其中，js文件夹包含jquery-3.3.1.min.js文件。收银网页分为三个区域：上端内容为“标题”和一个不可编辑的“文本框”，“文本框”用来显示结账金额；中间内容为水果商品表格，在表格每一行中，点击一次“+”按钮，则添加一份，点击多次，则添加多份；下端内容为“结帐”和“完成交易”按钮。【效果图】（1）收银网页casher.html效果如图3-1所示。图3-1初始化状态（2）在表格每一行中，点击水果名称后的“+”按钮，则将该水果的价格显示到上方的“文本框”中。若购买多份水果时，每份水果的价格之间使用“+”连接，如图3-2所示。图3-2添加水果（3）点击“结帐”按钮，将“文本框”中价格进行计算，设置“文本框”显示内容为“总金额:xxx”；将“结帐”按钮设置为“禁用”；使用jQuery动画，将中间的表格透明度设为“0.3”，动画持续时间为“1s”。如图3-3所示。图3-3结帐（4）点击“交易完成”按钮，重新加载网页，恢复到网页的初始状态。【代码：收银网页casher.html】<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><scripttype="text/javascript"src="js/jquery-3.3.1.min.js"></script><title>社区便利店收银系统</title><style>body{ text-align:center; font-size:13px; } table{ margin:10pxauto; } #result{ width:245px; height:40px; }</style></head><body><h2>社区便利店收银系统</h2><inputtype="text"value=""id="result"disabled="disabled"/><tableborder="1"width="250px"><tr><th>名称</td><th>价格</td><th>添加</td></tr><tr><td>山东苹果</td><td>￥13.5/份</td><td><inputtype="button"value="+"onclick="addClick(13.5)"/></td></tr><tr><td>新奇士橙</td><td>￥12.5/份</td><td><inputtype="button"value="+"onclick="addClick(12.5)"/></td></tr><tr><td>麒麟瓜</td><td>￥3.0/份</td><td><inputtype="button"value="+"onclick="addClick(3.0)"/></td></tr><tr><td>国产红提</td><td>￥10.5/份</td><td><inputtype="button"value="+"onclick="addClick(10.5)"/></td></tr><tr><td>进口香蕉</td><td>￥4.5/份</td><td><inputtype="button"value="+"onclick="addClick(4.5)"/></td></tr></table><inputclass="btn"type="button"value="结帐"id="btn_checkout"onclick="checkoutClick()"/>   <inputclass="btn"type="button"value="交易完成"onclick="reloadClick()"/><script>/*功能：使用Javascript编写代码，点击“+”按钮触发，修改“文本框”值为购买的水果价格，多次点击，以“+”连接各价格参数：price为添加水果的价格返回：无编写代码提示：（1）获得“文本框result”值（2）判断“文本框result”值是否为””：（3）若为””，则将当前price赋值给“文本框”（4）若不为""，则先在“文本框”已有值后添加一个“+”，再添加此次价格price*/functionaddClick(price){//编写代码}/*功能：使用Javascript编写代码，点击“结账”按钮触发，计算所购水果的总金额，并将结果显示在“文本框”result上。参数：无返回：无编写代码提示：（1）获得“文本框result”值（2）使用“+”分隔出“文本框result”值中每一个价格，存放到Array对象中（3）使用for循环遍历数组对象，将每个价格相加得到总金额（4）设置“文本框result”值为“总金额:xxx”（5）调用disabledBtn()函数禁用“结帐”按钮（6）调用transparency()函数设置水果商品表格的透明度*/functioncheckoutClick(){//编写代码}/*功能：使用jQuery库编写代码，将“结帐”按钮设为禁用参数：无返回：无*/functiondisabledBtn(){//编写代码}/*功能：使用jQuery库编写代码，将水果商品表格透明度设为0.3，动画持续时间为1s参数：无返回：无编写代码提示：使用jQuery的动画函数实现。*/functiontransparency(){//编写代码}/*功能：点击“交易完成”按钮触发，重新加载当前页面，初始页面状态参数：无返回：无*/functionreloadClick(){//编写代码}</script></body></html>【问题1】（7分）使用JavaScript编写addClick()函数，并调试运行，满足功能要求。【问题2】（10分）使用JavaScript编写checkoutClick()函数，并调试运行，满足功能要求。【问题3】（5分）使用jQuery编写disabledBtn()函数，并调试运行，满足功能要求。【问题4】（5分）使用jQuery编写transparency()函数，并调试运行，满足功能要求。【问题5】（3分）编写reloadClick()函数，并调试运行，满足功能要求。试题四（20分）阅读下列说明、效果图和HTML代码，进行移动端静态网站案例分析，回答问题1至问题3。【说明】某公司开发了一款移动端“智慧物业”网站，为业主和物业搭建便捷平台。对业主方而言，可以查阅相关社区基本信息、物业服务、在线缴费和报事报修等；对物业方而言，可以加强与物业之间的交流，收集业主的意见和建议，在线进行沟通和处理相关物业事宜等。现在我们需要设计和编写“智慧物业”网站中的“首页”和“报事报修”页面。项目名称为IComMobile，包括首页index.html、报事报修repair.html、img文件夹和font文件夹，其中，img文件夹包含页面所需图片资源，font文件夹包含自定义字体。（1）首页（index.html）：内容分为四个部分，一是【标题栏】，位于页面上端，内容为社区名称，以文字的形式展示；二是【轮播图】，位于【标题栏】下方，内容为主题图片，以图片展示；三是【功能列表】，位于【轮播图】下方，内容包括社区中心、报事报修、物管窗口、物业交费四个功能，以图片按钮的形式展示；四是【底部导航栏】，位于页面最下端，内容为导航按钮，每个导航按钮以图标和文字展示。（2）报事报修页面（repair.html）：内容为一个表单，内容包含“地址”、“联系人”、“联系电话”、“预约时间”、“报修详情”五个表单项，每一项必填，以及“保存”按钮和“放弃”按钮，业主在首页上点击“报事报修”进入该页面，填写相关表单信息，点击“保存”按钮提交表单，点击“放弃”按钮则放弃提交当前表单内容。【效果图】首页效果如图4-1，事报修效果如图4-2，在首页点击“报事报修”进入图4-2页面。图4-1图4-2图4-1图4-2【代码：首页index.html】<!DOCTYPEhtml><html> <head> <metacharset="utf-8"><!--viewport是网页的可视区域--> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <title>首页</title> <styletype="text/css"> *{margin:0;padding:0;} ul,li{list-style:none;} @font-face{font-family:myFont;/*自定义字体名*/ src:url('font/STFANGSO.TTF')/*自定义字体路径*/} header{font-family:myFont;/*使用自定义字体*/font-size:25px;text-align:center;} sectionul,footerul{display:flex;flex-wrap:(1);/*弹性布局*/} sectionulli{ (2):5px;/*圆角边框*/ (3):#FFFFFF;/*背景颜色*/}footer{position:fixed;bottom:0;width:100%;border-top:1px#eeesolid;} footerulli{flex:1;text-align:center;padding-top:5px;}footerullia{display:block;font-size:14px;color:black;}/*第一个li字体加粗*/ footerulli:(4){font-weight:bold;} a{text-decoration:none;} sectiondiv{ text-align:center; margin:10px0; font-size:14px; } sectiondivspan{margin-right:25px;} #slider{text-align:center;} .list_group{justify-content:center;} </style> </head> <body> <header>美好生活小区</header> <sectionid="slider"><imgsrc="img/banner.jpg"/></section> <section> <div><span>物业公告：</span><span>感恩回馈预存有礼</span></div> <ulclass="list_group"> <li><ahref="#"><imgsrc="img/f1.jpg"/></a></li> <li><ahref="repair.html"><imgsrc="img/f2.jpg"/></a></li> <li><ahref="#"><imgsrc="img/f3.jpg"/></a></li> <li><ahref="#"><imgsrc="img/f4.jpg"/></a></li> </ul> </section> <footer> <ul> <li><imgsrc="img/nav1.jpg"><ahref="index.html">首页</a></li> <li><imgsrc="img/nav2.jpg"><ahref="#">客服</a></li> <li><imgsrc="img/nav3.jpg"><ahref="#">我的</a></li> </ul> </footer> </body></html>【代码：报事报修页面repair.html】<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,minimum-scale=1.0"/> <title>报事报修</title> <styletype="text/css"> body{margin:0;padding:0;} h3{margin:0;padding:5px;} header{background:#767676;color:white;} .adddiv{padding:4%;} .addlabel{width:30%;display:inline-block;} textarea{width:90%;} div:after{content:"*";} input[type="submit"],input[type="button"]{ width:20%; height:30px; margin:4%0020%; } </style> </head> <body> <header><h3>报事报修</h3></header> <articleclass="add"> <formaction="#"method="get"> <div><label>地址：</label> <inputid="address"type="text"required="required"/></di