Web前端开发-职业技能考试-初级-Web前端开发初级实操考试_V1.0.pdf

考生姓名准考证号

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

第1页共17页

（2）点击“标签页2-资讯”，搜索结果显示为tab2.html，效果如图2所示。

图1-2

index.html

【代码：搜索主页】

!（1）html!--文档声明--

html

head

（2））----文档字符编码为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））

（4））搜索搜索--提交按钮--

/form

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

（5）标签页1-网页/a/td

（5）标签页2-资讯/a/td/tr

/table

hr/

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

（6）

第2页共17页

/body

/html

第一个标签页tab1.html

【代码：】

!DOCTYPEhtml

html

head