本文编写于 100 天前,最后修改于 41 天前,其中某些信息可能已经过时。

2019最新1+x证书Web前端职业技能等级模拟考试样题(初级实操)

考生姓名 准考证号
2019年下半年 Web前端开发初级 实操考试
(考试时间14:00-16:30 共150分钟)

  1. 本试卷共4道题,满分100分。
  2. 请在指定位置或开发环境下作答。

试题一(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>
            <meta content="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">
                <input type="text" class="search_val">
                <input type="(4)" value="搜索"/><!-- 提交按钮 -->
            </form>
            <table><!--在iframe框架中打开被链接文档tab1.html或tab2.html-->
                <tr><td><a href="tab1.html" (5)>标签页1-网页</a></td>
                    <td><a href="tab2.html" (5)>标签页2-资讯</a></td></tr>
            </table>
            <hr/>        
            <!-- tab1.html显示在 iframe 中 -->
            <iframe name="main" id="main" (6) width="500px" height="280px" 
                    frameborder="0" ></iframe>        
        </body>
    </html>

【代码:第一个标签页tab1.html】

<!DOCTYPE html>
<html>
    <head>
        <meta content="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>
        <table border="0" width="290px"><!-- 设置无边框表格 -->
            <tr><td>
                <table>
                    <tr><td (7)><!-- 合并两列 -->
                        (8)<!-- 设置标题“HTML”为三号标题 -->
                    </td></tr>
                    <tr><td rowspan="2">
                        <!-- 插入img文件夹下的logo.png图片 -->
                        <img (9) width="40px"></td>
                        <td><p>超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接等...</p>
                    </td></tr>
                    <tr><td><a href="#">http://HTML.com</a></td></tr>
                </table>
            </td></tr>
            <tr><td colspan="2">
                <h3>HTML Standard</h3>
                <p class="noPic">1.2 Is this HTML5?This section is non-normative.In short: Yes.In more length: the term "HTML5" is widely used as a buzzword to refer ...</p>
                <a href="#">http://HTMLStudy.com</a>
                </td></tr>
        </table>
        <a href="#">1 </a><a href="#">2 </a><a href="#">3 </a><a href="#">4 </a>
    </body>
</html>

【代码:第二个标签页tab2.html】

<!DOCTYPE html>
<html>
    <head>
        <meta content="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>
        <table border="0" width="290px">
            <tr><td><h3>实现实时Html编辑器</h3>
                    <p>给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...</p>
                    <a href="#">http://HTML.com</a></td></tr>
            <tr><td><h3>html中q标签(短的引用)的详细介绍</h3>
                    <p>本篇将介绍html中q标签(短的引用)的详细用法,有兴趣的朋友可以了解一下! 学习html其实就是学习标签的用法,今天小编要介绍的是... </p>
                    <a href="#">http://HTMLStudy.com</a></td></tr>
        </table>
        <a href="#">1 </a><a href="#">2 </a><a href="#">3 </a><a href="#">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】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web技术社区</title>
<link rel="stylesheet" type="text/css" href="(1)" />
</head>
<body>
    <div id="introduction">
        <div id="content">
            <h2>欢迎来到XX网</h2><br />
            <p>本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。</p>
            <p>本站致力于推广各种前端技术,所有资源...</p>
        </div>
    </div><br /><br />
    <div id="(2)">
        <!--第一张图片和列表-->
        <div class="card">
            <img src="img/html.png" alt="这是第一张图片"/><br /><br />
            <ul>
                <li>HTML 指的是超文本标记语言</li>
                /* ...省略其它li,参见【效果图】内容 */
            </ul>
        </div>
    <!--第二张图片和列表-->
        <div class="card">
            <img src="img/css.png" alt="这是第二张图片"/><br /><br />
            <ul>
                <li>CSS 指层叠样式表</li>
                /* ...省略其它li,参见【效果图】内容 */
            </ul>
        </div>
<!--第三张图片和列表-->
        <div class="card">
            <img src="img/js.png" alt="这是第三张图片"/><br /><br />
            <ul>
                <li>JavaScript 是一种轻量级的编程语言</li>
/* ...省略其它li,参见【效果图】内容 */
            </ul>
        </div>
<!--第四张图片和列表-->
        <div class="card">
            <img src="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;
}
#main img {
(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】

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <title>社区便利店收银系统</title>
    <style>
      body{
         text-align:center;
         font-size:13px;
      }
      table{
        margin:10px auto;
      } 
      #result{
        width:245px;
        height:40px;
      }
    </style>
  </head>
  <body>
    <h2>社区便利店收银系统</h2>
    <input type="text" value="" id="result" disabled="disabled" />
    <table border="1" width="250px">
      <tr>
        <th>名称</td>
        <th>价格</td>
        <th>添加</td>
      </tr>
      <tr>
        <td>山东苹果</td>
        <td>¥13.5/份</td>
        <td><input type="button" value="+" onclick="addClick(13.5)" /></td>
      </tr>
      <tr>
        <td>新奇士橙</td>
        <td>¥12.5/份</td>
        <td><input type="button" value="+" onclick="addClick(12.5)" /></td>
      </tr>
      <tr>
        <td>麒麟瓜</td>
        <td>¥3.0/份</td>
        <td><input type="button" value="+" onclick="addClick(3.0)" /></td>
      </tr>
      <tr>
        <td>国产红提</td>
        <td>¥10.5/份</td>
        <td><input type="button" value="+" onclick="addClick(10.5)" /></td>
      </tr>
      <tr>
        <td>进口香蕉</td>
        <td>¥4.5/份</td>
        <td><input type="button" value="+" onclick="addClick(4.5)" /></td>
      </tr>
    </table>
    <input class="btn" type="button" value="结 帐" id="btn_checkout" onclick="checkoutClick()" />
    &nbsp;&nbsp;&nbsp;
    <input class="btn" type="button" value="交易完成" onclick="reloadClick()" />
    <script>
      /*
      功能:使用Javascript编写代码,点击“+”按钮触发,修改“文本框”值为购买的水果价格,多次点击,以“+”连接各价格
      参数:price 为添加水果的价格
      返回:无
      编写代码提示:
           (1)获得“文本框result”值
           (2)判断“文本框result”值是否为””:
           (3)若为””,则将当前price赋值给“文本框”
           (4)若不为"",则先在“文本框”已有值后添加一个“+”,再添加此次价格price      
*/
      function addClick(price) {
        // 编写代码
      }
      /*
      功能:使用Javascript编写代码,点击“结账”按钮触发,计算所购水果的总金额,并将结果显示在“文本框”result上。
      参数:无
      返回:无
      编写代码提示:
           (1)获得“文本框result”值
           (2)使用“+”分隔出“文本框result”值中每一个价格,存放到Array对象中
           (3)使用for循环遍历数组对象,将每个价格相加得到总金额
           (4)设置“文本框result”值为“总金额:xxx”
           (5)调用disabledBtn()函数禁用“结帐”按钮
           (6)调用transparency()函数设置水果商品表格的透明度
      */
      function checkoutClick() {
        // 编写代码
      }
      /*
      功能:使用jQuery库编写代码,将“结帐”按钮设为禁用
      参数:无
      返回:无
      */
      function disabledBtn() {
        // 编写代码
      }
      /*
      功能:使用jQuery库编写代码,将水果商品表格透明度设为0.3,动画持续时间为1s
      参数:无
      返回:无
      编写代码提示:使用jQuery的动画函数实现。
      */
      function transparency() {
        // 编写代码
      }
      /*
      功能:点击“交易完成”按钮触发,重新加载当前页面,初始页面状态
      参数:无
      返回:无
      */
      function reloadClick() {
        // 编写代码
      }
    </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页面。


【代码:首页index.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<!--viewport是网页的可视区域-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>首页</title>
        <style type="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;}                
section ul,footer ul {
display: flex;
flex-wrap:  (1) ;/*弹性布局*/
}
            section ul li {
                         (2) : 5px;/*圆角边框*/
                         (3) : #FFFFFF;/*背景颜色*/}
            footer{ position: fixed;bottom: 0; width: 100%;
border-top: 1px #eee solid;}
            footer ul li {flex: 1;text-align: center;padding-top: 5px;}
            footer ul li a{display: block;font-size: 14px;color: black;}
/*第一个li字体加粗*/
            footer ul li: (4) { font-weight: bold;}
            a{text-decoration: none;}
            section div{
                text-align: center;
                margin: 10px 0;
                font-size: 14px;
            }
            section div span{ margin-right: 25px;}
            #slider{ text-align: center;}
            .list_group{ justify-content: center;}
        </style>
    </head>
    <body>
        <header>美好生活小区</header>
        <section id="slider"><img src="img/banner.jpg"/></section>
        <section>
            <div><span>物业公告:</span><span>感恩回馈预存有礼</span></div>
            <ul class="list_group">
                <li><a href="#"><img src="img/f1.jpg"/></a></li>
                <li><a href="repair.html"><img src="img/f2.jpg"/></a></li>
                <li><a href="#"><img src="img/f3.jpg"/></a></li>
                <li><a href="#"><img src="img/f4.jpg"/></a></li>
            </ul>
        </section>
        <footer>
            <ul>
                <li><img src="img/nav1.jpg"><a href="index.html">首页</a></li>
                <li><img src="img/nav2.jpg"><a href="#">客服</a></li>
                <li><img src="img/nav3.jpg"><a href="#">我的</a></li>
            </ul>
        </footer>
    </body>
</html>

【代码:报事报修页面repair.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0" />
        <title>报事报修</title>
        <style type="text/css">
            body{margin: 0;padding: 0;}
            h3{margin: 0;padding: 5px;}
            header{background: #767676;color: white;}
            .add div{padding: 4%;}
            .add label{width: 30%; display: inline-block;}
            textarea{ width: 90%;}
            div:after{content: "*";}
            input[type="submit"],input[type="button"]{
                width: 20%;
                height: 30px;
                margin: 4% 0 0 20%;
            }
        </style>
    </head>
    <body>
        <header><h3>报事报修</h3></header>
        <article class="add">
            <form action="#" method="get">                
                <div><label>地址:</label>
                <input id="address" type="text" required="required"/></div>
                <div><label>联系人:</label>
                <input id="callName" type="text" required="required"/></div>
                <div><label>联系电话:</label>
                <input id="callNum" type="number" required="required"></div>
                <div><label>预约时间:</label>
                <input id="time" type="date" required="required"></div>
                <div>报修详情:
                    <textarea id="infoDetailed" cols="50" rows="5" 
                     placeholder="请输入..." required="required"></textarea>
</div>
                <input type="submit" onclick="return printForm()" value="保存" />
                <input type="button"  value="放弃" />
            </form>
        </article>
        <script type="text/javascript">
        /*duties构造方法*/
        function duties() {
        /*data对象存储表单数据*/
            this.data= {address: "",callName: "",
                            callNum: "",time: "",infoDetailed: ""};
            /*向data对象赋值*/
            this.setFormInfo=function() {
                this.data.address = document.getElementById("address").value;
                this.data.callName = document.getElementById("callName").value;
                this.data.callNum = document.getElementById("callNum").value;
                this.data.time = document.getElementById("time").value;
                this.data.infoDetailed =
                         document.getElementById("infoDetailed").value;
            }
        /*实例化duties对象*/
        var form1 = new duties();
        /*此处通过模拟调试向控制台输出表单输入信息*/
        function printForm() {        
                form1.setFormInfo()
                var infoStr = "地址:" + form1.data.address + "#" + "联系人:" + 
                form1.data.callName + "#" + "联系电话:" + form1.data.callNum + "#" 
                + "预约时间:" + form1.data.time + "报修详情:" 
                + form1.data.infoDetailed;
                /*console.log()是一个向控制台输出结果的方法,参数可以为字符串*/
                console.log(infoStr);
     }
        </script>
    </body>
</html>

【问题1】(8分,每空1分)
阅读和分析上述移动端“智慧物业”网站,回答下列问题,填写(a)~(h)。
1、移动端页面视区
若要使页面适应移动端设备,需要设置meta标签的name值为(a),该值是用户网页的可视区域,即“视区”。
其中content中参数(b)可以设置控制视区的宽度,可以指定的一个值,如 600,或者特殊的值。若要设置页面的初始缩放比例,需要设置content中参数 (c)。
2、HTML5语义化元素
在HTML5中用于定义文档的页眉的标签是(d);用于定义文档或节的页脚的标签是(e);用于定义文档中的节的标签是(f)。
3、CSS3特性应用
网站首页的标题使用了自定义字体myFont,定义自定义字体需要css的(g)规则。
4、表单属性应用
在该网站的页面中,对表单“输入元素”中的内容进行非空验证,可在表单“输入元素”中加入(h)属性。

【问题2】(8分,每空2分)
阅读和分析首页index.html代码,正确选用下列代码1至代码8,补全填写index.html中(1)至(4)处代码。
代码1:first-line
代码2:wrap
代码3:background-color
代码4:border-radius
代码5:nowrap
代码6:first-child
代码7:border-right
代码8:backgroud-clip

【问题3】(4分)
阅读和分析报事报修页面repair.html中代码,回答下面的问题,填写输出内容。
(1)在报事报修页面repair.html的表单中输入各表单项的值:
“地址”值:13栋201室
“联系人”值:张三
“联系电话”值:12345678
“预约时间”值:2019-07-01
“报修详情”值:管道堵塞
(2)点击“保存”按钮调用printForm()方法后,在该方法中使用“console.log(infoStr)”,请填写该语句向控制台输出的内容是( )

附件:题目代码点击下载代码.zip

“本文章已经通过区块链技术进行版权认证,禁止任何形式的改编转载抄袭,违者追究法律责任”
版权归妙笔生花个人博客,由皮皮家园终身维护!zh66.club