Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx

Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx

《Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx》由会员分享，可在线阅读，更多相关《Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx（28页珍藏版）》请在冰点文库上搜索。

Web前端开发职业技能考试初级Web前端开发初级实操考试V10

考生姓名准考证号

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>

--文档声明-->

（2）="utf-8">

--文档字符编码为utf-8-->S

--设置文档标题为“搜索”-->

--提交按钮-->

--在iframe框架中打开被链接文档tab1.html或tab2.html-->

--tab1.html显示在iframe中-->

frameborder="0">

【代码：

第一个标签页tab1.html】

DOCTYPEhtml>

--设置无边框表格-->

HTMLStandard

1.2IsthisHTML5?

Thissectionisnon-normative.Inshort:

Yes.Inmorelength:

theterm"HTML5"iswidelyusedasabuzzwordtorefer...

http:

//HTMLS

1234

【代码：

第二个标签页tab2.html】

DOCTYPEhtml>

实现实时Html编辑器

给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...

http:

//HTML.com

html中q标签（短的引用）的详细介绍

本篇将介绍html中q标签（短的引用）的详细用法,有兴趣的朋友可以了解一下!

学习html其实就是学习标签的用法,今天小编要介绍的是...

http:

//HTMLS

1234

【问题】（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""http:

//www.w3.org/TR/html4/loose.dtd">

欢迎来到XX网

本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。

本站致力于推广各种前端技术，所有资源...